/* ============================================================
   LOETO TRAVELS · v2 — Editorial inmersivo
   Sistema de diseño: safari nocturno, tipografía editorial,
   profundidad por capas y movimiento contenido.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Base oscura: verde noche con temperatura, nunca negro puro */
  --night:        #0a1f1a;
  --night-deep:   #061511;
  --night-soft:   #102c25;
  --surface:      #14352c;
  --surface-hi:   #1b443a;

  /* Luz: arena, sol y brasa — el calor del paisaje */
  --sand:         #e8d5a9;
  --sand-deep:    #d4b878;
  --sun:          #f0b45e;
  --ember:        #d97642;
  --clay:         #b85c38;

  /* Texto sobre oscuro */
  --text:         #f4efe4;
  --text-soft:    rgba(244, 239, 228, 0.72);
  --text-faint:   rgba(244, 239, 228, 0.46);
  --text-ghost:   rgba(244, 239, 228, 0.22);

  /* Trazos y veladuras */
  --line:         rgba(232, 213, 169, 0.16);
  --line-soft:    rgba(232, 213, 169, 0.09);
  --glass:        rgba(255, 255, 255, 0.045);
  --glass-hi:     rgba(255, 255, 255, 0.08);

  /* Profundidad */
  --lift-sm:  0 2px 8px rgba(0,0,0,.2);
  --lift:     0 18px 48px rgba(0, 0, 0, 0.42);
  --lift-lg:  0 32px 80px rgba(0, 0, 0, 0.55);
  --glow:     0 0 48px rgba(240, 180, 94, 0.22);

  /* Ritmo tipográfico */
  --serif: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Movimiento: una sola curva para todo el sitio */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  /* Medidas */
  --gutter: clamp(20px, 5vw, 80px);
  --maxw: 1320px;
  --radius: 20px;
  --radius-lg: 28px;
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; margin: 0; }

/* Grano sutil: evita que los degradados se vean "plásticos" */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 3. UTILIDADES ---------- */
.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sand-deep);
  margin: 0;
}

.section {
  position: relative;
  z-index: 2;
  padding: clamp(72px, 11vw, 150px) var(--gutter);
  max-width: var(--maxw);
  margin-inline: auto;
}

/* Revelado al hacer scroll */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- 4. CABECERA ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: 76px;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 28px;
  transition: background .5s var(--ease-soft), backdrop-filter .5s var(--ease-soft), border-color .5s var(--ease-soft), height .4s var(--ease-soft);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  height: 64px;
  background: rgba(10, 31, 26, 0.82);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-bottom-color: var(--line-soft);
}

.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-mark {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--sand-deep);
  border-radius: 50%;
  font: italic 24px/1 var(--serif);
  color: var(--sand);
  transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.brand:hover .brand-mark { background: var(--sand); color: var(--night); transform: rotate(-8deg); }
.brand b { display: block; font-size: 14px; font-weight: 600; letter-spacing: .2em; line-height: 1; }
.brand small { display: block; margin-top: 4px; font-size: 7.5px; letter-spacing: .42em; color: var(--text-faint); }

.site-header nav { display: flex; gap: 32px; margin-left: auto; }
.site-header nav a {
  position: relative;
  font-size: 13px; font-weight: 500;
  color: var(--text-soft);
  padding: 6px 0;
  transition: color .3s var(--ease);
}
.site-header nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--sun);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.site-header nav a:hover { color: var(--text); }
.site-header nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.header-actions { display: flex; align-items: center; gap: 16px; }

.language-switcher { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--text-ghost); }
.language-switcher button { padding: 6px 3px; color: var(--text-faint); transition: color .3s var(--ease); }
.language-switcher button:hover { color: var(--text); }
.language-switcher button.active { color: var(--sun); }

.selection-button {
  display: inline-flex; align-items: center; gap: 9px;
  height: 42px; padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 13px; font-weight: 500;
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.selection-button:hover { background: var(--glass-hi); border-color: var(--sand-deep); transform: translateY(-1px); }
.cart-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#header-count {
  display: grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 100px;
  background: var(--sun); color: var(--night);
  font-size: 11px; font-weight: 700;
  transition: transform .4s var(--ease);
}
#header-count.is-bump { animation: bump .5s var(--ease); }
@keyframes bump { 0%,100% { transform: scale(1); } 40% { transform: scale(1.35); } }

/* ---------- 5. HERO ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: 120px var(--gutter) 90px;
  overflow: hidden;
  isolation: isolate;
}

/* Cielo por capas: del índigo nocturno al calor del horizonte */
.hero-art { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-art::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 85% at 50% 108%, rgba(240,180,94,.30) 0%, rgba(217,118,66,.14) 28%, transparent 62%),
    radial-gradient(90% 60% at 78% 12%, rgba(27,68,58,.75) 0%, transparent 70%),
    linear-gradient(180deg, #061511 0%, #0a2019 38%, #123027 72%, #1d4335 100%);
}
/* Sol bajo, justo tocando el horizonte */
.hero-art .sun {
  position: absolute; left: 50%; bottom: 20%;
  width: min(300px, 48vw); aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, #ffd89b 0%, #f0b45e 42%, rgba(217,118,66,.42) 66%, transparent 72%);
  filter: blur(2px);
  opacity: .85;
  animation: sunRise 3s var(--ease) both;
}
@keyframes sunRise { from { transform: translate(-50%, 55px); opacity: 0; } to { transform: translate(-50%, 0); opacity: .85; } }

/* Siluetas de horizonte superpuestas */
.ridge { position: absolute; left: -5%; width: 110%; background-repeat: no-repeat; background-size: 100% 100%; }
.ridge-back {
  bottom: 16%; height: 20%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath d='M0 200 L0 118 Q90 86 180 104 T360 92 Q470 68 560 96 T760 80 Q880 54 980 86 T1200 72 L1200 200Z' fill='%23123027'/%3E%3C/svg%3E");
  opacity: .9;
}
.ridge-front {
  bottom: 0; height: 24%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath d='M0 200 L0 140 Q120 112 240 132 T480 118 Q620 96 760 124 T1010 106 Q1120 92 1200 112 L1200 200Z' fill='%230a1f1a'/%3E%3C/svg%3E");
}

/* Acacias: la silueta que define el paisaje austral */
.tree { position: absolute; bottom: 14%; background-repeat: no-repeat; background-size: contain; background-position: bottom; opacity: .92; }
.tree-one {
  left: 7%; width: min(200px, 24vw); height: min(150px, 19vw);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Cg fill='%23061511'%3E%3Cpath d='M96 150 L96 86 L92 60 L100 58 L104 60 L102 86 L104 150Z'/%3E%3Cpath d='M98 62 L62 48 M98 62 L136 46 M98 70 L74 58 M98 66 L124 56' stroke='%23061511' stroke-width='3' fill='none'/%3E%3Cellipse cx='100' cy='44' rx='66' ry='17'/%3E%3Cellipse cx='64' cy='52' rx='28' ry='10'/%3E%3Cellipse cx='140' cy='50' rx='30' ry='10'/%3E%3C/g%3E%3C/svg%3E");
}
.tree-two {
  right: 10%; width: min(150px, 18vw); height: min(115px, 14vw);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 115'%3E%3Cg fill='%23061511'%3E%3Cpath d='M72 115 L72 66 L69 48 L76 47 L79 49 L77 66 L79 115Z'/%3E%3Cpath d='M74 50 L48 40 M74 50 L102 38' stroke='%23061511' stroke-width='2.5' fill='none'/%3E%3Cellipse cx='75' cy='34' rx='50' ry='13'/%3E%3Cellipse cx='46' cy='41' rx='21' ry='8'/%3E%3Cellipse cx='106' cy='39' rx='22' ry='8'/%3E%3C/g%3E%3C/svg%3E");
}
/* Elefante cruzando el horizonte, muy lentamente */
.elephant {
  position: absolute; bottom: 15.5%; left: 34%;
  width: min(118px, 15vw); height: min(84px, 11vw);
  background-repeat: no-repeat; background-size: contain; background-position: bottom;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 85'%3E%3Cg fill='%23061511'%3E%3Cpath d='M28 78 L28 52 Q24 36 36 28 Q52 17 74 21 Q94 25 98 42 L99 60 Q99 72 95 78 L87 78 L87 62 L74 64 L74 78 L64 78 L64 63 L46 62 L46 78 L37 78 L37 60 Q30 58 28 52Z'/%3E%3Cpath d='M98 40 Q110 38 112 50 Q113 62 106 70 Q102 74 100 70 Q104 60 102 50 Z'/%3E%3Cpath d='M100 62 Q106 72 104 80 Q103 84 99 83 Q97 74 96 66 Z'/%3E%3C/g%3E%3C/svg%3E");
  opacity: .95;
  animation: walk 70s linear infinite;
}
@keyframes walk { from { transform: translateX(-10vw); } to { transform: translateX(72vw); } }

.hero-copy { max-width: 860px; position: relative; }
.hero .eyebrow { margin-bottom: 26px; animation: fadeUp 1s var(--ease) .15s both; }
.hero h1 {
  font-size: clamp(46px, 9.2vw, 124px);
  line-height: 0.94;
  letter-spacing: -0.035em;
  margin-bottom: 30px;
  animation: fadeUp 1.1s var(--ease) .3s both;
}
.hero h1 em {
  font-style: italic;
  background: linear-gradient(100deg, var(--sand) 0%, var(--sun) 48%, var(--ember) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero-lead {
  max-width: 560px;
  font-size: clamp(16px, 1.9vw, 20px);
  line-height: 1.65;
  color: var(--text-soft);
  margin: 0 0 42px;
  animation: fadeUp 1.1s var(--ease) .45s both;
}
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; animation: fadeUp 1.1s var(--ease) .6s both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

.hero-note {
  position: absolute;
  right: var(--gutter); bottom: clamp(36px, 7vw, 76px);
  display: flex; align-items: flex-start; gap: 13px;
  max-width: 260px;
  padding: 18px 22px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-size: 13px; line-height: 1.5;
  color: var(--text-soft);
  animation: fadeUp 1.2s var(--ease) .85s both;
}
.hero-note p { margin: 0; }
.hero-note b { color: var(--text); font-weight: 600; }
.note-icon { color: var(--sun); font-size: 15px; line-height: 1.2; }

/* ---------- 6. BOTONES ---------- */
.button {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px; padding: 0 34px;
  border-radius: 100px;
  font-size: 14px; font-weight: 600; letter-spacing: .01em;
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.button-primary { background: var(--sand); color: var(--night-deep); box-shadow: var(--lift-sm); }
.button-primary:hover { background: #fff3d6; transform: translateY(-2px); box-shadow: var(--lift), var(--glow); }
.button-primary:active { transform: translateY(0); }
.button-secondary { border: 1px solid var(--line); color: var(--text); background: var(--glass); }
.button-secondary:hover { border-color: var(--sand-deep); background: var(--glass-hi); transform: translateY(-2px); }
.button:disabled { opacity: .38; pointer-events: none; }
.full-width { width: 100%; }

.text-link {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 500;
  color: var(--text-soft);
  transition: color .3s var(--ease), gap .3s var(--ease);
}
.text-link:hover { color: var(--sun); gap: 14px; }

/* ---------- 7. ENCABEZADOS DE SECCIÓN ---------- */
.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 32px 60px;
  align-items: end;
  margin-bottom: clamp(44px, 6vw, 72px);
}
.section-heading h2 {
  font-size: clamp(34px, 5.4vw, 66px);
  margin-top: 16px;
}
.section-heading > p {
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.7;
  color: var(--text-soft);
  margin: 0;
  padding-bottom: 8px;
}

/* ---------- 8. DESTINOS ---------- */
.destinations { background: linear-gradient(180deg, var(--night) 0%, var(--night-soft) 100%); }
.destination-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 20px;
}
.destination-card {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 60px;
  min-height: 330px;
  padding: 30px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  text-align: left;
  overflow: hidden;
  isolation: isolate;
  transition: transform .6s var(--ease), border-color .5s var(--ease), box-shadow .6s var(--ease);
}
.destination-card::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  transition: transform 1.1s var(--ease), opacity .6s var(--ease);
}
.destination-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(6,21,17,.08) 0%, rgba(6,21,17,.62) 58%, rgba(6,21,17,.9) 100%);
}
.destination-card:hover { transform: translateY(-8px); border-color: var(--line); box-shadow: var(--lift-lg); }
.destination-card:hover::before { transform: scale(1.1); }

.destination-botswana::before { background: radial-gradient(85% 70% at 25% 18%, #2f6b52 0%, #184034 48%, #0b2119 100%); }
.destination-zimbabwe::before { background: radial-gradient(85% 70% at 72% 22%, #2b6168 0%, #17424a 46%, #0a1f24 100%); }
.destination-zambia::before   { background: radial-gradient(85% 70% at 40% 20%, #7a4f2e 0%, #4a2f1e 48%, #1d1410 100%); }

.destination-number {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--sand-deep);
  letter-spacing: .06em;
}
.destination-content { display: flex; flex-direction: column; gap: 7px; }
.destination-content small {
  font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--sand-deep);
}
.destination-content b {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(27px, 3.4vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.destination-content > span { font-size: 14px; color: var(--text-soft); line-height: 1.55; }
.destination-count { font-size: 12px; color: var(--text-faint); margin-top: 3px; }

.round-arrow {
  position: absolute; top: 26px; right: 26px;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 15px;
  color: var(--sand);
  transition: background .4s var(--ease), color .4s var(--ease), transform .5s var(--ease), border-color .4s var(--ease);
}
.destination-card:hover .round-arrow { background: var(--sand); color: var(--night); border-color: var(--sand); transform: rotate(45deg); }

/* ---------- 9. TOURS MULTI-DÍA ---------- */
.tours { background: var(--night-soft); }
.tours-grid { display: flex; flex-direction: column; gap: 18px; }

.tour-card {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr) auto;
  gap: 30px;
  align-items: center;
  width: 100%;
  padding: 30px 34px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: linear-gradient(100deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.012) 100%);
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: transform .55s var(--ease), border-color .45s var(--ease), box-shadow .55s var(--ease), background .45s var(--ease);
}
.tour-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--sun), var(--ember));
  transform: scaleY(0); transform-origin: top;
  transition: transform .6s var(--ease);
}
.tour-card:hover { transform: translateX(6px); border-color: var(--line); box-shadow: var(--lift); background: linear-gradient(100deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%); }
.tour-card:hover::before { transform: scaleY(1); }

.tour-number {
  font-family: var(--serif);
  font-size: clamp(40px, 5vw, 58px);
  line-height: 1;
  color: var(--text-ghost);
  transition: color .5s var(--ease);
}
.tour-card:hover .tour-number { color: var(--sand-deep); }

.tour-body { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.tour-route { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sand-deep); }
.tour-card h3 { font-size: clamp(22px, 2.9vw, 31px); line-height: 1.12; }
.tour-highlights { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 3px; }
.tour-highlights span {
  padding: 5px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 100px;
  font-size: 11.5px;
  color: var(--text-soft);
  background: rgba(255,255,255,.025);
}
.tour-ideal { font-size: 13.5px; color: var(--text-faint); line-height: 1.55; margin: 3px 0 0; }

.tour-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; text-align: right; white-space: nowrap; }
.tour-duration { font-size: 13px; font-weight: 600; color: var(--text); }
.tour-lodging { font-size: 11.5px; color: var(--text-faint); max-width: 210px; white-space: normal; text-align: right; line-height: 1.45; }
.tour-price { font-family: var(--serif); font-size: 25px; color: var(--sand); }
.tour-price small { display: block; font-family: var(--sans); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); margin-top: 2px; }

/* ---------- 10. EXPLORADOR: FILTROS ---------- */
.explorer-layout { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 48px; align-items: start; }

.filters {
  position: sticky; top: 92px;
  display: flex; flex-direction: column; gap: 32px;
  padding: 28px 24px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.filter-group { display: flex; flex-direction: column; gap: 14px; }
.filter-label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase;
  color: var(--text-faint);
}
.filter-label button { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: none; color: var(--sun); transition: opacity .3s; }
.filter-label button:hover { opacity: .7; }

.filter-options { display: flex; flex-direction: column; gap: 2px; }
.filter-options label {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px;
  border-radius: 11px;
  font-size: 14px;
  color: var(--text-soft);
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.filter-options label:hover { background: var(--glass-hi); color: var(--text); }
.filter-options input { appearance: none; width: 15px; height: 15px; border: 1.5px solid var(--text-ghost); border-radius: 50%; flex-shrink: 0; transition: border-color .3s, box-shadow .3s; }
.filter-options input:checked { border-color: var(--sun); box-shadow: inset 0 0 0 4px var(--sun); }
.filter-options label:has(input:checked) { color: var(--text); background: var(--glass-hi); }

.interest-options { display: flex; flex-wrap: wrap; gap: 8px; }
.interest-options label {
  padding: 8px 15px;
  border: 1px solid var(--line-soft);
  border-radius: 100px;
  font-size: 12.5px;
  color: var(--text-soft);
  cursor: pointer;
  transition: all .3s var(--ease);
}
.interest-options input { display: none; }
.interest-options label:hover { border-color: var(--sand-deep); color: var(--text); }
.interest-options label:has(input:checked) { background: var(--sand); border-color: var(--sand); color: var(--night-deep); font-weight: 600; }

.search-wrap { display: flex; align-items: center; gap: 10px; padding: 0 15px; height: 46px; border: 1px solid var(--line-soft); border-radius: 13px; background: rgba(0,0,0,.18); transition: border-color .3s var(--ease); }
.search-wrap:focus-within { border-color: var(--sand-deep); }
.search-wrap span { color: var(--text-faint); font-size: 15px; }
.search-wrap input { flex: 1; min-width: 0; border: 0; background: none; font-size: 14px; color: var(--text); outline: none; }
.search-wrap input::placeholder { color: var(--text-ghost); }

/* ---------- 11. RESULTADOS ---------- */
.results-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--line-soft); }
.results-bar p { margin: 0; font-size: 14px; color: var(--text-faint); }
.results-bar b { font-family: var(--serif); font-size: 21px; font-weight: 400; color: var(--text); margin-right: 5px; }
.sort-label { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.sort-label select {
  height: 40px; padding: 0 34px 0 15px;
  border: 1px solid var(--line-soft); border-radius: 100px;
  background: var(--glass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23e8d5a9' stroke-width='1.5'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 14px center;
  appearance: none; -webkit-appearance: none;
  font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--text);
  cursor: pointer; transition: border-color .3s var(--ease);
}
.sort-label select:hover { border-color: var(--sand-deep); }
.sort-label select option { background: var(--surface); color: var(--text); }

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

/* ---------- 12. TARJETA DE EXPERIENCIA ---------- */
.experience-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  cursor: pointer;
  transition: transform .55s var(--ease), border-color .45s var(--ease), box-shadow .55s var(--ease);
}
.experience-card:hover { transform: translateY(-7px); border-color: var(--line); box-shadow: var(--lift-lg); }

.card-visual {
  position: relative;
  display: grid; place-items: center;
  overflow: hidden;
  isolation: isolate;
}

/* Paisajes abstractos: respaldo bajo la foto, visibles si una imagen no carga */
.visual-dawn   { background: linear-gradient(170deg, #4a2f1e 0%, #a8623a 42%, #f0b45e 100%); }
.visual-river  { background: linear-gradient(170deg, #0f3d3a 0%, #1d6b63 48%, #3d9c8e 100%); }
.visual-safari { background: linear-gradient(170deg, #2a1f12 0%, #6b4a28 45%, #c4934d 100%); }
.visual-delta  { background: linear-gradient(170deg, #113028 0%, #2a6b52 46%, #6bab84 100%); }
.visual-falls  { background: linear-gradient(170deg, #122c3d 0%, #27576b 45%, #7fb5c4 100%); }
.visual-sunset { background: linear-gradient(170deg, #3d1f28 0%, #a8503f 44%, #f0a35e 100%); }
.visual-culture{ background: linear-gradient(170deg, #3d2a14 0%, #8a5f2a 46%, #d4a855 100%); }
.visual-night  { background: linear-gradient(170deg, #06121f 0%, #1a2d4a 48%, #3d5578 100%); }
.visual-stars  { background: linear-gradient(170deg, #0a0f24 0%, #232a52 46%, #4d4a7a 100%); }
.visual-aerial { background: linear-gradient(170deg, #14303d 0%, #2d6478 46%, #86bcca 100%); }
.visual-island { background: linear-gradient(170deg, #0f3328 0%, #2d7355 46%, #78b58c 100%); }
.visual-walk   { background: linear-gradient(170deg, #26301a 0%, #566b2e 46%, #9cb464 100%); }


.card-badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  padding: 5px 12px;
  border-radius: 100px;
  background: rgba(6,21,17,.6);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 10px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--sand);
}
.card-add {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(6,21,17,.58);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff; font-size: 19px; line-height: 1;
  transition: background .35s var(--ease), transform .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.card-add:hover { background: var(--sand); color: var(--night); border-color: var(--sand); transform: scale(1.1); }
.card-add.is-active { background: var(--sun); color: var(--night); border-color: var(--sun); }

.card-body { display: flex; flex-direction: column; gap: 11px; padding: 22px; flex: 1; }
.card-meta { display: flex; align-items: center; gap: 9px; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); }
.card-meta span:nth-child(2) { color: var(--text-ghost); }
.experience-card h3 { font-size: 21px; line-height: 1.2; }
.card-text { font-size: 13.5px; line-height: 1.6; color: var(--text-soft); margin: 0; flex: 1; }
.card-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding-top: 15px; border-top: 1px solid var(--line-soft); }
.card-price { display: flex; flex-direction: column; gap: 1px; }
.card-price small { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-ghost); }
.card-price b { font-family: var(--serif); font-size: 21px; font-weight: 400; color: var(--sand); }
.card-link { font-size: 12.5px; font-weight: 600; color: var(--text-soft); transition: color .3s var(--ease), gap .3s var(--ease); display: inline-flex; gap: 6px; }
.experience-card:hover .card-link { color: var(--sun); gap: 10px; }

/* ---------- 13. ESTADO VACÍO ---------- */
.empty-state { display: grid; justify-items: center; gap: 13px; padding: 80px 24px; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius-lg); }
.empty-state > span { font-size: 30px; color: var(--sand-deep); }
.empty-state h3 { font-size: 25px; }
.empty-state p { margin: 0; color: var(--text-soft); font-size: 14.5px; }
.empty-state .button { margin-top: 10px; }

/* ---------- 14. AVISO DE DEMO ---------- */
.demo-notice {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 16px 20px;
  border: 1px solid rgba(240,180,94,.22);
  border-radius: 15px;
  background: rgba(240,180,94,.055);
  font-size: 13px; line-height: 1.55;
  color: var(--text-soft);
}
.demo-notice > span {
  display: grid; place-items: center;
  width: 21px; height: 21px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--sun); color: var(--night);
  font-size: 12px; font-weight: 700; font-style: italic;
}
.demo-notice p { margin: 0; }
.demo-notice b { color: var(--text); font-weight: 600; }

/* ---------- 15. VISTA DE DETALLE ---------- */
.experience-detail { position: relative; z-index: 2; padding: 110px var(--gutter) clamp(72px, 10vw, 130px); max-width: var(--maxw); margin-inline: auto; }
.detail-back { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 34px; font-size: 13.5px; color: var(--text-soft); transition: color .3s var(--ease), gap .3s var(--ease); }
.detail-back:hover { color: var(--sun); gap: 14px; }

.detail-hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; min-height: 340px; padding: 42px; border-radius: var(--radius-lg); overflow: hidden; isolation: isolate; margin-bottom: 52px; }
.detail-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6,21,17,.15) 0%, rgba(6,21,17,.82) 100%); }
.detail-hero h1 { font-size: clamp(32px, 5.4vw, 60px); line-height: 1.04; max-width: 15ch; }
.detail-badge { align-self: flex-start; padding: 7px 15px; border-radius: 100px; background: rgba(6,21,17,.58); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 10.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--sand); }
.detail-facts { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 13.5px; color: var(--text-soft); }
.detail-facts span { display: inline-flex; align-items: center; gap: 8px; }
.detail-facts i { font-style: normal; color: var(--sun); }

.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 56px; align-items: start; }
.detail-summary { font-size: clamp(16px, 1.85vw, 19px); line-height: 1.72; color: var(--text-soft); margin: 0 0 48px; }
.detail-block { margin-bottom: 48px; }
.detail-block h2 { font-size: clamp(25px, 3.2vw, 35px); margin-bottom: 12px; }
.detail-block > p { color: var(--text-soft); font-size: 14.5px; line-height: 1.68; margin: 0 0 28px; max-width: 62ch; }

/* Itinerario con línea de tiempo */
.itinerary { display: flex; flex-direction: column; gap: 0; }
.itinerary-item { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 26px; padding: 0 0 36px 0; }
.itinerary-item::before { content: ""; position: absolute; left: 7px; top: 24px; bottom: -4px; width: 1px; background: linear-gradient(180deg, var(--line) 0%, transparent 100%); }
.itinerary-item:last-child { padding-bottom: 0; }
.itinerary-item:last-child::before { display: none; }
.itinerary-day { position: relative; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--sand-deep); padding-left: 26px; padding-top: 3px; }
.itinerary-day::before { content: ""; position: absolute; left: 0; top: 7px; width: 15px; height: 15px; border: 1px solid var(--sand-deep); border-radius: 50%; background: var(--night); }
.itinerary-day::after { content: ""; position: absolute; left: 4.5px; top: 11.5px; width: 6px; height: 6px; border-radius: 50%; background: var(--sun); }
.itinerary-body h3 { font-size: 20px; margin-bottom: 8px; }
.itinerary-body p { margin: 0 0 14px; font-size: 14px; line-height: 1.68; color: var(--text-soft); }
.itinerary-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.itinerary-tags span { padding: 5px 12px; border: 1px solid var(--line-soft); border-radius: 100px; font-size: 11.5px; color: var(--text-faint); }

/* Listas de incluye / no incluye */
.detail-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; }
.detail-list { padding: 26px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--glass); }
.detail-list h3 { font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 16px; }
.detail-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.detail-list li { position: relative; padding-left: 24px; font-size: 13.5px; line-height: 1.55; color: var(--text-soft); }
.detail-list li::before { position: absolute; left: 0; top: -1px; font-size: 14px; }
.list-includes li::before { content: "✓"; color: #6bbd8e; }
.list-excludes li::before { content: "–"; color: var(--text-ghost); }

/* Panel lateral de reserva */
.detail-aside { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 18px; padding: 30px; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--lift); }
.detail-price { display: flex; flex-direction: column; gap: 3px; padding-bottom: 20px; border-bottom: 1px solid var(--line-soft); }
.detail-price small { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
.detail-price b { font-family: var(--serif); font-size: 38px; font-weight: 400; color: var(--sand); line-height: 1.1; }
.detail-notice { font-size: 11.5px; line-height: 1.55; color: var(--text-faint); margin: 0; }

/* ---------- 16. PANEL DE SELECCIÓN ---------- */
.drawer-backdrop { position: fixed; inset: 0; z-index: 998; background: rgba(4,12,10,.72); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); opacity: 0; animation: fadeIn .4s var(--ease) forwards; }
@keyframes fadeIn { to { opacity: 1; } }

.selection-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 999;
  width: min(430px, 100vw);
  display: flex; flex-direction: column;
  background: var(--night-soft);
  border-left: 1px solid var(--line-soft);
  box-shadow: var(--lift-lg);
  transform: translateX(100%);
  transition: transform .6s var(--ease);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.selection-panel.is-open { transform: none; }

.panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 28px 26px 22px; border-bottom: 1px solid var(--line-soft); }
.panel-header h2 { font-size: 27px; margin-top: 8px; }
.panel-header .eyebrow { font-size: 10px; }
.icon-button { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line-soft); border-radius: 50%; font-size: 20px; color: var(--text-soft); flex-shrink: 0; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); }
.icon-button:hover { background: var(--glass-hi); color: var(--text); border-color: var(--line); transform: rotate(90deg); }

.selection-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 22px 26px; }
.selection-item { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 15px; align-items: center; padding: 14px; border: 1px solid var(--line-soft); border-radius: 15px; background: var(--glass); animation: slideIn .45s var(--ease) both; }
@keyframes slideIn { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
.selection-visual { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 12px; font-size: 21px; color: #fff; }
.selection-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.selection-info b { font-family: var(--serif); font-size: 15.5px; font-weight: 400; line-height: 1.25; }
.selection-info span { font-size: 11.5px; color: var(--text-faint); }
.selection-remove { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--text-faint); font-size: 17px; transition: background .3s, color .3s; }
.selection-remove:hover { background: rgba(217,118,66,.16); color: var(--ember); }

.selection-empty { flex: 1; display: grid; place-content: center; justify-items: center; gap: 11px; padding: 40px 32px; text-align: center; }
.selection-empty > span { font-size: 32px; color: var(--text-ghost); }
.selection-empty h3 { font-size: 22px; }
.selection-empty p { margin: 0; font-size: 13.5px; color: var(--text-soft); line-height: 1.6; }

.panel-footer { display: flex; flex-direction: column; gap: 14px; padding: 24px 26px; border-top: 1px solid var(--line-soft); background: rgba(0,0,0,.18); }
.selection-summary { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--text-faint); }
.selection-summary b { font-family: var(--serif); font-size: 20px; font-weight: 400; color: var(--text); }
.panel-footer > p { margin: 0; font-size: 11.5px; text-align: center; color: var(--text-ghost); line-height: 1.5; }

/* ---------- 17. DIÁLOGO ---------- */
dialog { max-width: min(620px, calc(100vw - 32px)); width: 100%; padding: 0; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--night-soft); color: var(--text); box-shadow: var(--lift-lg); }
dialog::backdrop { background: rgba(4,12,10,.78); backdrop-filter: blur(6px); }
dialog[open] { animation: dialogIn .5s var(--ease); }
@keyframes dialogIn { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: none; } }
dialog form { padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.dialog-header h2 { font-size: 30px; margin-top: 8px; }
.dialog-intro { margin: 0; font-size: 14.5px; color: var(--text-soft); line-height: 1.6; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.form-grid label { display: flex; flex-direction: column; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); }
.form-grid .full-field { grid-column: 1 / -1; }
.form-grid input, .form-grid select, .form-grid textarea {
  padding: 13px 15px;
  border: 1px solid var(--line-soft); border-radius: 12px;
  background: rgba(0,0,0,.22); color: var(--text);
  font-size: 14.5px; font-weight: 400; letter-spacing: 0; text-transform: none;
  outline: none; resize: vertical;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color: var(--sand-deep); background: rgba(0,0,0,.3); }
.form-grid input::placeholder, .form-grid textarea::placeholder { color: var(--text-ghost); }
.form-grid select option { background: var(--surface); }

.form-selection { display: flex; flex-wrap: wrap; gap: 8px; }
.form-selection span { padding: 7px 14px; border: 1px solid var(--line-soft); border-radius: 100px; font-size: 12px; color: var(--text-soft); background: var(--glass); }
.form-demo { margin: 0; font-size: 12px; line-height: 1.55; color: var(--text-faint); padding: 14px 16px; border-radius: 12px; background: rgba(240,180,94,.06); border: 1px solid rgba(240,180,94,.16); }
.form-demo b { color: var(--sand); }

/* ---------- 18. TOAST ---------- */
.toast {
  position: fixed; left: 50%; bottom: 32px; z-index: 1200;
  display: flex; align-items: center; gap: 11px;
  padding: 15px 26px;
  border: 1px solid var(--line); border-radius: 100px;
  background: rgba(20,53,44,.95);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--lift);
  font-size: 13.5px; color: var(--text);
  transform: translate(-50%, 120%); opacity: 0;
  pointer-events: none;
  transition: transform .6s var(--ease), opacity .4s var(--ease);
  margin-bottom: env(safe-area-inset-bottom, 0px);
}
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }

/* ---------- 19. PIE ---------- */
footer { position: relative; z-index: 2; display: grid; justify-items: center; gap: 15px; padding: clamp(64px, 9vw, 110px) var(--gutter); text-align: center; border-top: 1px solid var(--line-soft); background: var(--night-deep); }
.footer-brand { margin-bottom: 6px; }
footer p { margin: 0; font-size: 14.5px; color: var(--text-soft); max-width: 42ch; line-height: 1.6; }
.footer-demo { font-size: 11.5px !important; color: var(--text-ghost) !important; letter-spacing: .05em; margin-top: 10px !important; }

/* ---------- 20. RESPONSIVE ---------- */

/* Portátiles pequeños: el panel de detalle deja de ser lateral */
@media (max-width: 1080px) {
  .detail-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .detail-aside { position: static; }
  .explorer-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 34px; }
}

/* Tablet: filtros arriba, tours apilados */
@media (max-width: 900px) {
  .section-heading { grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
  .section-heading > p { padding-bottom: 0; }

  .explorer-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .filters { position: static; flex-direction: row; flex-wrap: wrap; gap: 26px; }
  .filters .filter-group { flex: 1 1 230px; }
  .filter-options { flex-direction: row; flex-wrap: wrap; }
  .filter-options label { padding: 8px 14px; border: 1px solid var(--line-soft); border-radius: 100px; }
  .filter-options input { display: none; }
  .filter-options label:has(input:checked) { background: var(--sand); border-color: var(--sand); color: var(--night-deep); font-weight: 600; }

  .tour-card { grid-template-columns: 62px minmax(0, 1fr); gap: 20px; padding: 26px; }
  .tour-meta { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 10px 22px; text-align: left; padding-top: 18px; border-top: 1px solid var(--line-soft); }
  .tour-lodging { text-align: left; max-width: none; }
  .tour-price { font-size: 22px; margin-left: auto; }
  .tour-price small { text-align: right; }
}

/* Móvil */
@media (max-width: 680px) {
  .site-header { height: 62px; gap: 12px; }
  .site-header.is-scrolled { height: 56px; }
  /* La navegación textual se oculta: el hero ya ofrece los dos accesos */
  .site-header nav { display: none; }
  .header-actions { margin-left: auto; gap: 10px; }
  .selection-button { height: 38px; padding: 0 14px; font-size: 12px; }
  .selection-button span:not(#header-count) { display: none; }
  .brand small { display: none; }
  .brand b { font-size: 13px; }

  .hero { min-height: 92svh; padding: 100px var(--gutter) 150px; align-items: end; }
  .hero h1 { font-size: clamp(40px, 13vw, 60px); }
  .hero-lead { font-size: 15.5px; margin-bottom: 32px; }
  .hero-actions { width: 100%; }
  .hero-actions .button { width: 100%; }
  .hero-note { position: static; max-width: none; margin-top: 34px; }
  .hero-art .sun { bottom: 24%; width: min(220px, 62vw); }
  .tree-one { width: 42vw; height: 30vw; left: -4%; }
  .tree-two { width: 30vw; height: 22vw; right: -2%; }
  .elephant { width: 24vw; height: 17vw; }

  .destination-card { min-height: 250px; gap: 36px; padding: 24px; }
  .round-arrow { top: 20px; right: 20px; width: 36px; height: 36px; }

  .tour-card { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 24px 22px; }
  .tour-number { font-size: 32px; }
  .tour-meta { gap: 8px 18px; }

  .experience-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .results-bar { gap: 12px; }
  .sort-label { width: 100%; justify-content: space-between; }

  .detail-hero { min-height: 260px; padding: 28px 24px; }
  .detail-block { margin-bottom: 38px; }
  .itinerary-item { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-bottom: 30px; }
  .itinerary-item::before { display: none; }
  .itinerary-day { padding-left: 24px; }

  .selection-panel { width: 100vw; }
  dialog form { padding: 24px 22px; }
  .dialog-header h2 { font-size: 25px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }

  .toast { left: 16px; right: 16px; bottom: 20px; transform: translateY(120%); justify-content: center; text-align: center; }
  .toast.is-visible { transform: translateY(0); }
}

/* Pantallas muy estrechas */
@media (max-width: 380px) {
  .hero h1 { font-size: 36px; }
  .destination-content b { font-size: 25px; }
  .interest-options label { padding: 7px 12px; font-size: 12px; }
}

/* Pantallas grandes: más aire, no más ancho */
@media (min-width: 1600px) {
  .hero h1 { font-size: 130px; }
  .experience-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}

/* Impresión */
@media print {
  .site-header, .selection-panel, .drawer-backdrop, .toast, .filters, .card-add { display: none !important; }
  body { background: #fff; color: #000; }
  body::before { display: none; }
}

/* ============================================================
   21. FOTOGRAFÍAS INTEGRADAS
   19 fotos de origen distinto tienden a verse como un collage.
   Se unifican en cuatro capas sobre la misma imagen:
     1. corrección de color  → misma temperatura para todas
     2. veladura de color    → tiñe con el verde/ámbar del sitio
     3. degradado al fondo   → la foto se funde con la tarjeta
     4. grano compartido     → misma textura que el resto de la página
   ============================================================ */

.card-visual { height: 200px; background: var(--surface); }

/* --- Capa 1: la foto, normalizada --- */
.card-photo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Baja la saturación cruda del stock y la reconduce a la paleta:
     el sepia aporta el poso cálido común, el hue-rotate lo lleva al verde */
  filter: brightness(.82) contrast(1.12) saturate(.72) sepia(.22) hue-rotate(-8deg);
  transform: scale(1.03);
  transition: transform 1.4s var(--ease), filter .7s var(--ease);
}

/* --- Capa 2: veladura de color (tiñe la foto con la paleta) --- */
.card-visual::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(145deg, rgba(27,68,58,.55) 0%, rgba(10,31,26,.25) 45%, rgba(240,180,94,.16) 100%);
  mix-blend-mode: color;
  opacity: .85;
  background-size: auto;
  transition: opacity .6s var(--ease);
}

/* --- Capa 3: la foto se funde con el cuerpo de la tarjeta --- */
.card-visual::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(180deg,
      rgba(10,31,26,.30) 0%,
      rgba(10,31,26,.05) 32%,
      rgba(20,53,44,.55) 76%,
      var(--surface) 100%);
}

/* --- Capa 4: grano, el mismo que el resto de la página --- */
.card-visual .grain {
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
  opacity: .14;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Controles siempre por encima de las cuatro capas de imagen */
.card-visual .card-badge { z-index: 5; }
.card-visual .card-add   { z-index: 6; }

/* Al pasar el ratón la foto despierta: recupera color y se acerca */
.experience-card:hover .card-photo {
  transform: scale(1.1);
  filter: brightness(.95) contrast(1.06) saturate(1) sepia(.06) hue-rotate(-3deg);
}
.experience-card:hover .card-visual::before { opacity: .5; }

/* --- Hero de detalle: misma receta, más suave para no tapar el texto --- */
.detail-hero { background: var(--surface); }
.detail-photo {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.74) contrast(1.1) saturate(.78) sepia(.18) hue-rotate(-8deg);
}
.detail-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(145deg, rgba(27,68,58,.5) 0%, rgba(10,31,26,.3) 50%, rgba(240,180,94,.14) 100%);
  mix-blend-mode: color;
}
.detail-hero::after {
  background: linear-gradient(180deg, rgba(6,21,17,.25) 0%, rgba(6,21,17,.55) 55%, rgba(6,21,17,.92) 100%);
}

/* --- Miniatura de la cesta --- */
.selection-visual { overflow: hidden; padding: 0; position: relative; }
.selection-visual img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.8) saturate(.75) sepia(.2) hue-rotate(-8deg);
}
.selection-visual::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(145deg, rgba(27,68,58,.45), rgba(240,180,94,.12));
  mix-blend-mode: color;
}

/* --- Miniatura del tour, con el número encima --- */
.tour-thumb { position: relative; display: grid; place-items: center; width: 94px; height: 94px; border-radius: 16px; overflow: hidden; flex-shrink: 0; }
.tour-thumb img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.5) contrast(1.1) saturate(.6) sepia(.25) hue-rotate(-8deg);
  transition: transform 1.2s var(--ease), filter .6s var(--ease);
}
.tour-thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(145deg, rgba(27,68,58,.5), rgba(10,31,26,.3));
  mix-blend-mode: color;
}
.tour-thumb em {
  position: relative; z-index: 1;
  font-family: var(--serif); font-style: normal;
  font-size: 30px; line-height: 1; color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,.75);
}
.tour-card:hover .tour-thumb img { transform: scale(1.14); filter: brightness(.66) contrast(1.06) saturate(.85) sepia(.1) hue-rotate(-4deg); }

/* --- Responsive --- */
@media (max-width: 900px) {
  .tour-card { grid-template-columns: 76px minmax(0, 1fr); }
  .tour-thumb { width: 76px; height: 76px; }
  .tour-thumb em { font-size: 24px; }
}
@media (max-width: 680px) {
  .card-visual { height: 215px; }
  .tour-card { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: start; }
  .tour-thumb { width: 64px; height: 64px; border-radius: 13px; }
  .tour-thumb em { font-size: 21px; }
}

/* Navegadores sin mix-blend-mode: la veladura se aplica en plano */
@supports not (mix-blend-mode: color) {
  .card-visual::before, .detail-hero::before, .tour-thumb::after, .selection-visual::after { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
  .card-photo, .tour-thumb img { transition: none; }
  .experience-card:hover .card-photo, .tour-card:hover .tour-thumb img { transform: none; }
}

/* ============================================================
   22. QUIÉNES SOMOS
   Fotos propias, no de archivo: se tratan con más respeto que
   las de las tarjetas (menos veladura, más color real).
   ============================================================ */
.about {
  background:
    radial-gradient(90% 70% at 15% 0%, rgba(27,68,58,.5) 0%, transparent 60%),
    var(--night);
}

.about-layout {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

/* --- Mosaico de fotos --- */
.about-gallery { position: relative; padding-bottom: 54px; padding-right: 48px; }
.about-photo { margin: 0; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface); }
.about-photo img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  /* Apenas se tocan: son fotos vuestras, no stock que unificar */
  filter: saturate(1.02) contrast(1.02);
  transition: transform 1.2s var(--ease);
}
.about-photo-main {
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line-soft);
  box-shadow: var(--lift-lg);
}
.about-photo-side {
  position: absolute;
  right: 0; bottom: 0;
  width: 46%;
  aspect-ratio: 4 / 3;
  border: 3px solid var(--night);
  box-shadow: var(--lift);
}
.about-gallery:hover .about-photo img { transform: scale(1.04); }

/* Sello circular, como un matasellos de viaje */
.about-stamp {
  position: absolute;
  top: 18px; right: 10px;
  display: grid; place-content: center; justify-items: center;
  gap: 1px;
  width: 92px; height: 92px;
  border: 1px solid var(--sand-deep);
  border-radius: 50%;
  background: rgba(10,31,26,.72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  text-align: center;
  font-size: 8.5px; font-weight: 700; letter-spacing: .16em;
  color: var(--sand);
  transform: rotate(-9deg);
}
.about-stamp em { font-family: var(--serif); font-style: italic; font-size: 13px; letter-spacing: 0; color: var(--sun); }

/* --- Fichas de cada persona --- */
.about-people { display: flex; flex-direction: column; gap: 30px; }

.person { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 20px; align-items: start; }
.person-mark {
  display: grid; place-items: center;
  width: 54px; height: 54px;
  border: 1px solid var(--sand-deep);
  border-radius: 50%;
  font: italic 26px/1 var(--serif);
  color: var(--sand);
  background: rgba(232,213,169,.05);
  transition: background .45s var(--ease), color .45s var(--ease), transform .45s var(--ease);
}
.person:hover .person-mark { background: var(--sand); color: var(--night); transform: rotate(-8deg); }
.person-role { margin: 4px 0 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .18em; color: var(--sand-deep); }
.person h3 { font-size: clamp(27px, 3.4vw, 36px); line-height: 1.05; margin-bottom: 12px; }
.person-text { margin: 0; font-size: 14.5px; line-height: 1.72; color: var(--text-soft); }

.about-footer {
  margin: 6px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--serif);
  font-size: clamp(16px, 1.9vw, 19px);
  font-style: italic;
  line-height: 1.6;
  color: var(--sand);
}

@media (max-width: 900px) {
  .about-layout { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .about-gallery { max-width: 460px; margin-inline: auto; width: 100%; }
}
@media (max-width: 680px) {
  .about-gallery { padding-right: 32px; padding-bottom: 42px; }
  .about-photo-side { width: 52%; }
  .about-stamp { width: 74px; height: 74px; font-size: 7.5px; top: 12px; right: 4px; }
  .about-stamp em { font-size: 11px; }
  .person { grid-template-columns: 44px minmax(0, 1fr); gap: 15px; }
  .person-mark { width: 44px; height: 44px; font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .about-photo img { transition: none; }
  .about-gallery:hover .about-photo img { transform: none; }
}

/* ============================================================
   23. MENÚ MÓVIL
   En escritorio la navegación es horizontal; por debajo de
   680px se recoge en un botón de tres barras.
   ============================================================ */

/* Oculto en escritorio */
.menu-toggle { display: none; }
.mobile-menu { display: none; }
.menu-backdrop { display: none; }

/* --- Botón de tres barras --- */
.menu-toggle {
  width: 42px; height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--glass);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  place-items: center;
  flex-shrink: 0;
  transition: background .35s var(--ease), border-color .35s var(--ease);
}
.menu-toggle:hover { background: var(--glass-hi); border-color: var(--sand-deep); }

.menu-bars { display: grid; gap: 4.5px; width: 17px; }
.menu-bars i {
  display: block; height: 1.5px; width: 100%;
  background: var(--text);
  border-radius: 2px;
  transition: transform .45s var(--ease), opacity .3s var(--ease);
}
/* Las tres barras se convierten en una X */
.menu-toggle[aria-expanded="true"] .menu-bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-bars i:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --- Panel desplegable --- */
.mobile-menu {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 95;
  flex-direction: column;
  gap: 2px;
  padding: calc(72px + env(safe-area-inset-top, 0px)) 20px 24px;
  background: rgba(10, 31, 26, .97);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border-bottom: 1px solid var(--line-soft);
  box-shadow: var(--lift-lg);
  transform: translateY(-100%);
  transition: transform .55s var(--ease);
}
.mobile-menu.is-open { transform: none; }

.mobile-menu a {
  padding: 15px 14px;
  border-radius: 13px;
  font-family: var(--serif);
  font-size: 23px;
  color: var(--text);
  border-bottom: 1px solid var(--line-soft);
  transition: background .3s var(--ease), padding-left .3s var(--ease), color .3s var(--ease);
}
.mobile-menu a:last-of-type { border-bottom: 0; }
.mobile-menu a:active, .mobile-menu a:hover { background: var(--glass-hi); padding-left: 20px; color: var(--sun); }

.mobile-menu-cart {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 15px 20px;
  border-radius: 100px;
  background: var(--sand);
  color: var(--night-deep);
  font-size: 15px; font-weight: 600;
}
.mobile-cart-count {
  display: grid; place-items: center;
  min-width: 24px; height: 24px; padding: 0 8px;
  border-radius: 100px;
  background: var(--night-deep); color: var(--sand);
  font-size: 12px; font-weight: 700;
}

.menu-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(4,12,10,.6);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  animation: fadeIn .4s var(--ease) forwards;
}

/* --- Activación en móvil --- */
@media (max-width: 680px) {
  .menu-toggle { display: grid; }
  .mobile-menu { display: flex; }
  .menu-backdrop { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu { transition: none; }
  .menu-bars i { transition: none; }
}

/* ============================================================
   24. TARJETAS DE PAÍS CON FOTO Y BANDERA
   El degradado de .destination-* queda debajo como respaldo.
   Las banderas van en SVG dentro del CSS: nítidas a cualquier
   tamaño y sin peticiones extra.
   ============================================================ */

.destination-photo {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Mismo tratamiento que las demás fotos, para que el conjunto respire igual */
  filter: brightness(.72) contrast(1.1) saturate(.78) sepia(.18) hue-rotate(-8deg);
  transform: scale(1.02);
  transition: transform 1.4s var(--ease), filter .7s var(--ease);
}
.destination-card:hover .destination-photo {
  transform: scale(1.1);
  filter: brightness(.86) contrast(1.05) saturate(.95) sepia(.06) hue-rotate(-3deg);
}

/* La veladura de color se apoya en el ::before, que ya existía */
.destination-card::before { opacity: .55; mix-blend-mode: color; transition: opacity .6s var(--ease), transform 1.1s var(--ease); }
.destination-card:hover::before { opacity: .32; }

/* Velo inferior: asegura que el texto se lea sobre cualquier foto */
.destination-card::after {
  background: linear-gradient(180deg, rgba(6,21,17,.25) 0%, rgba(6,21,17,.55) 48%, rgba(6,21,17,.93) 100%);
}

/* --- Bandera en la esquina --- */
.destination-flag {
  position: absolute;
  top: 26px; left: 30px;
  z-index: 2;
  width: 38px; height: 26px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.3);
  box-shadow: 0 3px 12px rgba(0,0,0,.45);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.destination-card:hover .destination-flag { transform: translateY(-2px) scale(1.06); box-shadow: 0 6px 18px rgba(0,0,0,.55); }

/* El número se aparta para dejar sitio a la bandera */
.destination-number { margin-left: 50px; }

/* Botsuana: azul celeste con franja blanca-negra-blanca */
.flag-bw {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 24'%3E%3Crect width='36' height='24' fill='%2375AADB'/%3E%3Crect y='8.4' width='36' height='7.2' fill='%23fff'/%3E%3Crect y='9.6' width='36' height='4.8' fill='%23000'/%3E%3C/svg%3E");
}
/* Zimbabue: siete franjas, triángulo blanco con estrella y ave */
.flag-zw {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 24'%3E%3Crect width='36' height='24' fill='%23319208'/%3E%3Crect y='3.43' width='36' height='3.43' fill='%23FFD200'/%3E%3Crect y='6.86' width='36' height='3.43' fill='%23DE2010'/%3E%3Crect y='10.29' width='36' height='3.42' fill='%23000'/%3E%3Crect y='13.71' width='36' height='3.43' fill='%23DE2010'/%3E%3Crect y='17.14' width='36' height='3.43' fill='%23FFD200'/%3E%3Cpath d='M0 0 L13 12 L0 24Z' fill='%23fff'/%3E%3Cpath d='M0 0 L10.5 12 L0 24Z' fill='%23000' opacity='.0'/%3E%3Cpath d='M4.6 8.2 L5.5 10.7 L8.1 10.7 L6 12.3 L6.8 14.8 L4.6 13.2 L2.4 14.8 L3.2 12.3 L1.1 10.7 L3.7 10.7Z' fill='%23DE2010'/%3E%3C/svg%3E");
}
/* Zambia: verde con franjas rojo-negro-naranja y águila */
.flag-zm {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 24'%3E%3Crect width='36' height='24' fill='%23198A00'/%3E%3Crect x='21' y='10' width='5' height='14' fill='%23DE2010'/%3E%3Crect x='26' y='10' width='5' height='14' fill='%23000'/%3E%3Crect x='31' y='10' width='5' height='14' fill='%23EF7D00'/%3E%3Cpath d='M27.5 3.2 Q29.5 1.4 31.5 3 Q30.4 3.4 29.6 4.4 Q31.4 4 32.4 5.4 Q30.6 5.4 29.4 6.4 L28.2 6.4 Q27.2 5 25.8 4.8 Q26.6 3.8 27.5 3.2Z' fill='%23EF7D00'/%3E%3C/svg%3E");
}

@media (max-width: 680px) {
  .destination-flag { top: 20px; left: 24px; width: 34px; height: 23px; }
  .destination-number { margin-left: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .destination-photo { transition: none; }
  .destination-card:hover .destination-photo { transform: none; }
}