:root{
    /* Colombia flag */
    --col-yellow: #FCD116;
    --col-blue:   #003893;
    --col-red:    #CE1126;

    /* Neutrals */
    --bg: #0b1220;
    --surface: rgba(255,255,255,0.06);
    --surface-2: rgba(255,255,255,0.10);
    --text: rgba(255,255,255,0.92);
    --muted: rgba(255,255,255,0.72);
    --border: rgba(255,255,255,0.14);

    --max: 1100px;
    --radius: 14px;
    --shadow: 0 14px 40px rgba(0,0,0,0.35);
  }


  /*
  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    line-height: 1.6;
    color: var(--text);
    background-repeat: no-repeat;
    background-size: cover;
    background:
      radial-gradient(1200px 600px at 10% -10%, rgba(252,209,22,0.22), transparent 55%),
      radial-gradient(900px 500px at 90% 0%, rgba(0,56,147,0.22), transparent 55%),
      radial-gradient(900px 500px at 85% 70%, rgba(206,17,38,0.20), transparent 60%),
      linear-gradient(180deg, #070b14 0%, #0b1220 55%, #070b14 100%);
  }
      */

      body {
        margin: 0;
        font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
        line-height: 1.6;
        color: var(--text);
        background: #070b14; /* fallback */
        position: relative;
      }

      body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        background:
          radial-gradient(1200px 600px at 10% -10%, rgba(252,209,22,0.22), transparent 55%),
          radial-gradient(900px 500px at 90% 0%, rgba(0,56,147,0.22), transparent 55%),
          radial-gradient(900px 500px at 85% 70%, rgba(206,17,38,0.20), transparent 60%),
          linear-gradient(180deg, #070b14 0%, #0b1220 55%, #070b14 100%);
        transform: translateZ(0);
        will-change: transform;
      }
      

  a { color: inherit; }

  /* Top color stripe = Colombia */
  .flagbar{
    height: 8px;
    background: linear-gradient(90deg, var(--col-yellow) 0 50%, var(--col-blue) 50% 75%, var(--col-red) 75% 100%);
  }

  header{
    position: relative;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(10px);
    background: rgba(7,11,20,0.72);
    border-bottom: 1px solid var(--border);
    overflow: visible;
  }

  .wrap{
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 1.25rem;
  }

  .navrow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 1rem;
  
    height: 72px;        /* fixed, so links feel right */
    padding: 0;          /* keep it tight */
  }
  
  

  .brand{
    position: relative;
    display:flex;
    align-items:center;
    height: 72px;         /* match navrow height */
    text-decoration:none;
  
    /* Reserve space to the right of the absolutely-positioned logo */
    padding-left: 112px;  /* logo width-ish; tweak 100–130 */
  }
  
  

  .logo{
    width: 38px;
    height: 38px;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.25);
    background:
      linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06)),
      linear-gradient(90deg, var(--col-yellow) 0 50%, var(--col-blue) 50% 75%, var(--col-red) 75% 100%);
    border: 1px solid rgba(255,255,255,0.18);
  }

  .site-logo{
    height: 100px;
    width: auto;
    display:block;
  
    position: absolute;      /* removes it from layout */
    left: 0;
    top: 50%;
    transform: translateY(-30%); /* centers relative to navrow */
  
    z-index: 60;
    filter: drop-shadow(0 12px 28px rgba(0,0,0,0.55));

  }
  
  

  .brandname{
    display: flex;
    flex-direction: column;
    line-height: 1.1;
  }
  .brandname strong{
    font-size: 1.02rem;
    letter-spacing: 0.2px;
  }
  .brandname span{
    font-size: 0.84rem;
    color: var(--muted);
  }

  nav{
    display: flex;
    align-items: center;
    gap: 0.35rem;
  }

  .navlink{
    text-decoration: none;
    font-weight: 600;
    color: rgba(255,255,255,0.86);
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
  }
  .navlink:hover{
    background: var(--surface);
    border-color: var(--border);
    transform: translateY(-1px);
  }

  .cta{
    text-decoration: none;
    font-weight: 700;
    padding: 0.6rem 0.9rem;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.16);
    background:
      linear-gradient(135deg, rgba(252,209,22,0.95), rgba(252,209,22,0.75));
    color: #1a1a1a;
    box-shadow: 0 14px 32px rgba(252,209,22,0.12);
    transition: transform .15s ease, filter .15s ease;
    white-space: nowrap;
  }
  .cta:hover{
    transform: translateY(-1px);
    filter: brightness(1.03);
  }

  main{
    max-width: var(--max);
    margin: 0 auto;
    padding: 2.2rem 1.25rem 3rem;
    min-height: calc(100vh - 120px);
  }

  /* Nice default content container you can use on pages */
  .card{
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.4rem;
  }
  

  /* Footer */
  footer{
    border-top: 1px solid var(--border);
    background: rgba(7,11,20,0.75);
    padding: 1.2rem 0;
    color: var(--muted);
    font-size: 0.92rem;
  }
  .footerrow{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .footerlinks{
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
  .footerlinks a{
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px dashed transparent;
  }
  .footerlinks a:hover{
    color: rgba(255,255,255,0.85);
    border-bottom-color: rgba(255,255,255,0.35);
  }
  .footerlinks-divider{
    color: var(--muted);
    opacity: 0.4;
  }

  /* Mobile tweaks */
  @media (max-width: 640px){
    .brandname span { display:none; }
    .cta { padding: 0.55rem 0.75rem; }
  }


.hero{
  position: relative;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.hero-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 3.2rem 1.25rem 2.4rem;
  display: grid;
  gap: 1.25rem;
}

.hero-bg{
  position: absolute;
  inset: 0;
  background-image: var(--hero-image, none);
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  filter: saturate(1.05) contrast(1.05);
}

/* Overlay ensures readability on any photo */
.hero-overlay{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 500px at 20% 10%, rgba(252,209,22,0.18), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(0,56,147,0.18), transparent 60%),
    radial-gradient(900px 500px at 90% 80%, rgba(206,17,38,0.16), transparent 60%),
    linear-gradient(180deg, rgba(7,11,20,0.55) 0%, rgba(7,11,20,0.78) 55%, rgba(7,11,20,0.92) 100%);
}

.hero-content{
  position: relative;
  z-index: 2;
  max-width: 760px;
}

.hero-kicker{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  color: var(--muted);
  font-weight: 650;
  font-size: .9rem;
}

.hero h1{
  margin: .75rem 0 .5rem;
  font-size: clamp(2.0rem, 3.4vw, 3.0rem);
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.hero p{
  margin: 0.2rem 0 1.2rem;
  color: rgba(255,255,255,0.82);
  font-size: 1.05rem;
  max-width: 62ch;
}

.hero-actions{
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  align-items: center;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 0.72rem 1.0rem;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 750;
  font-size: inherit;
  font-family: inherit;
  line-height: 1.5;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.16);
  transition: transform .15s ease, filter .15s ease, background .15s ease, border-color .15s ease;
  white-space: nowrap;
}

.btn-primary{
  background: linear-gradient(135deg, rgba(252,209,22,0.95), rgba(252,209,22,0.78));
  color: #1a1a1a;
  box-shadow: 0 14px 32px rgba(252,209,22,0.12);
}

.btn-secondary{
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.92);
  border-color: rgba(255,255,255,0.18);
}

.btn-danger{
  background: linear-gradient(135deg, rgba(220,53,69,0.95), rgba(220,53,69,0.78));
  color: #fff;
  box-shadow: 0 14px 32px rgba(220,53,69,0.12);
}

.btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}


@media (max-width: 640px){
  .hero-inner{ padding: 2.4rem 1.25rem 1.8rem; }
}





/* Backoffice */

/* Backoffice */
.section { padding: 32px 0; }

.bo-title { margin: 0; font-size: 28px; }
.bo-subtitle { margin: 6px 0 0; color: var(--muted); }



.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.form-grid .field{
  display: flex;
  flex-direction: column;
  gap: 6px;      
  min-width: 0;  
}

.form-grid .label{
  margin: 0;
  font-weight: 600;
  line-height: 1.2;
}

.form-grid .help,
.form-grid .error{
  margin: 0;
  font-size: 13px;
}

.form-grid .help{ opacity: 0.75; }
.form-grid .error{ color: #ffb4b4; }

.form-grid input[type="text"],
.form-grid input[type="email"],
.form-grid input[type="url"],
.form-grid input[type="number"],
.form-grid input[type="tel"],
.form-grid input[type="datetime-local"],
.form-grid input[type="date"],
.form-grid input[type="time"],
.form-grid select,
.form-grid textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.18);
  color: inherit;
  outline: none;
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

.form-grid input:not([type="checkbox"]),
.form-grid select {
  height: 42px;
  line-height: 1.2;
}
.form-grid textarea{
  height: auto;
  min-height: 110px;
  line-height: 1.4;
}



@media (min-width: 860px) {
  .form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .field.full { grid-column: 1 / -1; }
}

.label { display:block; margin: 0 0 6px; font-weight: 600; }
.req { margin-left: 6px; opacity: 0.8; }

/* Form controls do NOT inherit the page font by default — browsers render them
   at ~13px Arial, which looks unnaturally small inside our 40–42px fields.
   Make every text-entry control use the app font at a size that fills the field. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="datetime-local"],
input[type="date"],
input[type="time"],
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.18);
  color: inherit;
  outline: none;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  appearance: none;
  -webkit-appearance: none;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.8;
}



textarea { resize: vertical; }

.help { margin-top: 6px; font-size: 13px; opacity: 0.75; }
.error { margin-top: 6px; font-size: 13px; color: #ffb4b4; }

.alert-error {
  margin-bottom: 20px;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid rgba(206,17,38,0.35);
  background: rgba(206,17,38,0.10);
  color: rgba(255,180,180,0.95);
  font-size: 0.88rem;
  line-height: 1.5;
}

.form-actions {
  display:flex;
  gap: 10px;
  margin-top: 16px;
  align-items:center;
}


.bo-grid {
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 16px;
}

@media (min-width: 860px) {
  .bo-grid { grid-template-columns: 1fr 1fr; }
}


/* Backoffice tables */
.bo-header {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
  margin: 10px 0 16px;
}
.bo-actions { display:flex; gap:10px; }


.tablewrap { overflow-x:auto; }
.table { width:100%; border-collapse: collapse; }
.table th, .table td { text-align:left; padding: 12px 10px; vertical-align: top; }
.table thead th { border-bottom: 1px solid rgba(255,255,255,0.14); font-size: 13px; letter-spacing: .02em; opacity: .85; }
.table tbody tr + tr td { border-top: 1px solid rgba(255,255,255,0.10); }

.muted { opacity: .75; }
code { opacity:.9; }

.badge {
  display:inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,0.14);
}
.badge-good { background: rgba(46, 204, 113, 0.12); }
.badge-bad  { background: rgba(231, 76, 60, 0.14); }
.badge-muted{ background: rgba(255,255,255,0.06); }

.btn-sm { padding: 8px 10px; font-size: 13px; }

/* Styled Checkboxes */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.25);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

input[type="checkbox"]:hover {
  border-color: rgba(255,255,255,0.25);
}

input[type="checkbox"]:checked {
  background: var(--col-yellow);
  border-color: var(--col-yellow);
  box-shadow: 0 0 0 2px rgba(252,209,22,0.25);
}

input[type="checkbox"]::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transition: transform 0.12s ease-in-out;
  background: #1a1a1a;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}



/* Home CTA */
.home-intro { padding: 18px 0 6px; }

.home-cta{
  position: relative;
  overflow: hidden;
  padding: 1.6rem;
}

.home-cta::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(700px 240px at 20% 20%, rgba(252,209,22,0.20), transparent 60%),
    radial-gradient(700px 240px at 80% 30%, rgba(0,56,147,0.18), transparent 60%),
    radial-gradient(700px 240px at 70% 85%, rgba(206,17,38,0.16), transparent 60%);
  pointer-events:none;
}

.home-cta::after{
  content:"";
  position:absolute;
  inset:0;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius);
  pointer-events:none;
}

.home-cta__text{
  position: relative;
  z-index: 2;
  max-width: 72ch;
}

.home-cta__title{
  margin: 0 0 0.55rem;
  font-size: clamp(1.6rem, 2.4vw, 2.15rem);
  line-height: 1.15;
  letter-spacing: -0.3px;
}

.home-cta__lead{
  margin: 0 0 0.9rem;
  color: rgba(255,255,255,0.82);
  font-size: 1.05rem;
}

.home-cta__pill{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .65rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  color: var(--muted);
  font-weight: 700;
  font-size: .92rem;
  margin: 0 0 1.05rem;
}

.home-cta__actions{
  display:flex;
  gap: .75rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: .9rem;
}

/* optional: bigger buttons just on the homepage */
.btn-lg{
  padding: 0.85rem 1.15rem;
  border-radius: 14px;
  font-size: 1.02rem;
}

.home-cta__trust{
  display:flex;
  gap: .85rem;
  flex-wrap: wrap;
  color: rgba(255,255,255,0.72);
  font-size: .92rem;
}

.trust-item{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .25rem .5rem;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  background: rgba(0,0,0,0.18);
}



/* Final Bottom CTA */

.final-cta {
  padding: 60px 0 80px;
}

.final-cta__card {
  position: relative;
  padding: 2.5rem 2rem;
  text-align: center;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Colombia glow effect */
.final-cta__card::before {
  content: "";
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(600px 200px at 20% 20%, rgba(252,209,22,0.25), transparent 60%),
    radial-gradient(600px 200px at 80% 30%, rgba(0,56,147,0.22), transparent 60%),
    radial-gradient(600px 200px at 50% 90%, rgba(206,17,38,0.22), transparent 60%);
  pointer-events: none;
}

.final-cta__card h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  letter-spacing: -0.4px;
}

.final-cta__card p {
  margin: 0 0 1.6rem;
  color: rgba(255,255,255,0.82);
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

.final-cta__actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.final-cta__sub {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.65);
}


.iconlist{
  margin: 0;
  padding-left: 1.2rem;
}

.iconlist li{
  margin: 0.55rem 0;
  color: rgba(255,255,255,0.85);
}


/* Contact */
.contact-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 860px){
  .contact-grid{
    grid-template-columns: 1.2fr 0.8fr;
    align-items: start;
  }
}

.contact-items{
  margin-top: 1rem;
  display: grid;
  gap: 12px;
}

.contact-item{
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.16);
}

.contact-label{
  font-size: 0.85rem;
  color: rgba(255,255,255,0.70);
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.contact-value{
  font-size: 1.05rem;
  margin-top: 2px;
}

.contact-note{
  font-size: 0.9rem;
  margin-top: 4px;
}

.contact-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.contact-subhead{
  margin: 1.2rem 0 0.4rem;
}

.timeline {
  margin: 0.75rem 0 0;
  padding-left: 1.4rem;
}

.timeline li {
  margin: 0.6rem 0;
}


/* Responsive nav */
.nav{
  position: relative;
  display: flex;
  align-items: center;
}

.nav-menu{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;          /* never overflow — wrap if the row runs out of space */
  gap: 0.35rem;
}

/* ---- Dropdown groups (Tours / Discover) ---- */
.nav-group{ position: relative; display: inline-flex; }
.nav-group__toggle{
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.nav-caret{ font-size: 0.7em; transition: transform .15s ease; }
.nav-group.open .nav-caret,
.nav-group:hover .nav-caret,
.nav-group:focus-within .nav-caret{ transform: rotate(180deg); }
.nav-dropdown{
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 60;
  min-width: 210px;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(7,11,20,0.96);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}
.nav-group:hover .nav-dropdown,
.nav-group:focus-within .nav-dropdown,
.nav-group.open .nav-dropdown{ display: flex; }
/* invisible bridge over the gap so the pointer keeps hover on the way to the menu */
.nav-dropdown::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}
.nav-dropdown .navlink{ white-space: nowrap; }

/* Hamburger hidden on desktop */
.nav-toggle{
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  cursor: pointer;
  padding: 0;

  /* Important */
  display: none;
  flex-direction: column;       /* stack bars vertically */
  justify-content: center;      /* center vertically */
  align-items: center;          /* center horizontally */
  gap: 4px;                     /* spacing between bars */
}

.nav-toggle:hover{
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.22);
}

.nav-toggle__bar{
  width: 20px;
  height: 2px;
  background: rgba(255,255,255,0.9);
  border-radius: 2px;
}

/* Switch to hamburger at narrow widths */
@media (max-width: 860px){
  .nav-toggle{ display: inline-flex; }

  /* hide horizontal nav */
  .nav-menu{
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    min-width: 220px;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: rgba(7,11,20,0.92);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow);
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    z-index: 80;
  }

  /* when open */
  .nav-menu[data-open="true"]{
    display: flex;
  }

  .navlink{
    width: 100%;
    padding: 0.7rem 0.85rem;
  }

  .cta{
    width: 100%;
    text-align: center;
  }

  /* In the hamburger menu, groups show as headers with their items listed flat */
  .nav-group{ flex-direction: column; align-items: stretch; width: 100%; }
  .nav-caret{ display: none; }
  .nav-group__toggle{ opacity: 0.65; text-transform: uppercase; font-size: 0.8rem; letter-spacing: .04em; cursor: default; }
  .nav-dropdown{
    display: flex;
    position: static;
    min-width: 0;
    padding: 0 0 4px 12px;
    border: none;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
  }
  .nav-dropdown::before{ display: none; }   /* no hover bridge in the mobile menu */
}

/* Backoffice always uses hamburger — too many nav links for horizontal layout */
body.backoffice .nav-toggle{ display: inline-flex; }

body.backoffice .nav-menu{
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 220px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(7,11,20,0.92);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  z-index: 80;
}

body.backoffice .nav-menu[data-open="true"]{
  display: flex;
}

body.backoffice .navlink,
body.backoffice .cta{
  width: 100%;
}
}


.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;

  padding: 0;
  margin: 0;

  border: none !important;
  background: none !important;

  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

/* Colombian palette */
.icon-btn-edit {
  color: var(--col-yellow);   /* Colombian blue */
}

.icon-btn-delete {
  color: var(--col-red);   /* Colombian red */
}

.icon-btn-cancel {
  color: #4da6ff;
}

/* Hover effects */
.icon-btn:hover {
  transform: scale(1.1);
  transition: 0.1s ease;
}

.icon-btn-edit:hover {
  color: var(--col-yellow);   /* brighter yellow */
}

.icon-btn-delete:hover {
  color: var(--col-red);   /* brighter red */
}

.icon-btn-cancel:hover {
  color: #80c1ff;
}



.actions-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.actions-form {
  display: inline;
  margin: 0;
}


/* Base card style */
.tour-card {
  background: #111;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  transition: 
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}

/* Hover effect */
.tour-card:hover {
  transform: scale(1.02);
  border-color: rgba(0, 255, 140, 0.9);
  box-shadow: 
    0 0 12px rgba(0,255,140,0.6),
    0 10px 24px rgba(0,0,0,0.5);
  cursor: pointer;
}

/* Selected state */
.tour-card.selected {
  border-color: rgba(0, 255, 140, 0.9);
  box-shadow: 
    0 0 12px rgba(0,255,140,0.6),
    0 10px 24px rgba(0,0,0,0.5);
}


/* (Booking-options page styles moved to the body.site design system, below.) */

/* ---- Star rating meter (accessible; fill reflects --rating out of 5) ---- */
.stars{
  display: inline-block;
  font-size: 1.1rem;
  line-height: 1;
  letter-spacing: 2px;
}
.stars::before{
  content: "★★★★★";
  background: linear-gradient(90deg,
    var(--col-yellow) calc(var(--rating, 5) / 5 * 100%),
    rgba(255,255,255,0.22) calc(var(--rating, 5) / 5 * 100%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- Reviews page ---- */
.reviews-summary{
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}
.reviews-summary__score{
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  color: var(--col-yellow);
}
.reviews-summary__meta{
  display: grid;
  gap: 6px;
}
.reviews-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 720px){
  .reviews-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px){
  .reviews-grid{ grid-template-columns: repeat(3, 1fr); }
}
.review-card{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}
.review-text{
  margin: 0;
  border: 0;
  padding: 0;
  font-size: 0.98rem;
  color: var(--text);
}
.review-meta{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
  font-size: 0.9rem;
}
.review-name{ font-weight: 700; }
.review-source{
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.2);
  font-size: 0.78rem;
  color: var(--muted);
}

/* ---- FAQ accordion (native <details>) ---- */
.faq-list{
  margin-top: 1rem;
  display: grid;
  gap: 10px;
}
.faq-item{
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(0,0,0,0.16);
  padding: 12px 14px;
}
.faq-item summary{
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{
  content: "+";
  color: var(--muted);
  font-weight: 700;
}
.faq-item[open] summary::after{ content: "–"; }
.faq-item p{
  margin: 10px 0 0;
  color: var(--muted);
}

/* ---- Groups: feature grid ---- */
.feature-grid{
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 720px){
  .feature-grid{ grid-template-columns: repeat(2, 1fr); }
}
.feature{
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(0,0,0,0.16);
}

/* ---- Meet the Guides ---- */
.guides-grid{
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px){
  .guides-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px){
  .guides-grid{ grid-template-columns: repeat(3, 1fr); }
}
.guide-card{
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.guide-photo{
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
}
.guide-photo--initial{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--text);
  background: var(--surface-2);
}
.guide-meta{ display: grid; gap: 6px; }
.guide-name{ font-weight: 700; font-size: 1.1rem; }
.guide-bio{ margin: 0; font-size: 0.95rem; }

/* ---- Language switcher (EN / ES) ---- */
.lang-switch{ display: inline-flex; gap: 6px; align-items: center; margin-left: 4px; }
.lang-switch__active{ font-weight: 700; color: var(--col-yellow); font-size: 0.85rem; }
.lang-switch__link{ font-size: 0.85rem; opacity: 0.75; }
.lang-switch__link:hover{ opacity: 1; }

/* ---- Photo gallery (masonry via CSS columns; handles mixed portrait/landscape) ---- */
.gallery{
  columns: 1;
  column-gap: 14px;
}
@media (min-width: 640px){ .gallery{ columns: 2; } }
@media (min-width: 980px){ .gallery{ columns: 3; } }
.gallery-item{
  display: block;
  margin: 0 0 14px;
  break-inside: avoid;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.gallery-item img{
  display: block;
  width: 100%;
  height: auto;
  transition: opacity .15s ease;
}
.gallery-item:hover img{ opacity: 0.9; }

/* Gallery pagination */
.pagination{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
}
.pagination__status{ font-size: 0.95rem; }
.pagination__disabled{ opacity: 0.4; pointer-events: none; }

/* ── Backoffice: secondary filter bar (tour dates etc.) ─────────────────── */
.filter-bar{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.filter-bar__field{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 140px;
}
.filter-bar__label{
  font-size: 12px;
  letter-spacing: .03em;
  opacity: .7;
}
.filter-bar select,
.filter-bar input[type="search"],
.filter-bar input[type="date"]{
  height: 40px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.18);
  color: inherit;
  outline: none;
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
}
.filter-bar__actions{
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}
@media (max-width: 640px){
  .filter-bar{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px; }
  .filter-bar__field--wide{ grid-column: 1 / -1; }
  .filter-bar__actions{ grid-column: 1 / -1; display: flex; }
  .filter-bar__actions .btn{ flex: 1; text-align: center; }
}

/* ── Backoffice: tables become cards on phones ──────────────────────────── */
@media (max-width: 720px){
  .table--cards thead{ display: none; }
  .table--cards tbody tr{
    display: block;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    margin-bottom: 12px;
    padding: 6px 14px;
  }
  .table--cards tbody tr + tr td{ border-top: none; }
  .table--cards tbody td{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 7px 0;
    border: none;
  }
  .table--cards tbody td + td{ border-top: 1px dashed rgba(255,255,255,0.08); }
  .table--cards tbody td::before{
    content: attr(data-label);
    flex: 0 0 38%;
    font-size: 12px;
    letter-spacing: .03em;
    opacity: .6;
  }
  .table--cards tbody td[data-label=""]::before,
  .table--cards tbody td.text-end::before{ content: none; }
  .table--cards tbody td.text-end{ justify-content: flex-end; padding-top: 10px; }
  .table--cards tbody td.muted{ display: block; }
}

/* ── Backoffice: detail rows (stack on phones) ──────────────────────────── */
.detail-row{
  display: flex;
  gap: 24px;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.detail-row__label{
  min-width: 200px;
  flex-shrink: 0;
  opacity: 0.6;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding-top: 2px;
}
.detail-row__value{
  margin: 0;
  flex: 1;
  word-break: break-word;
}
@media (max-width: 640px){
  .detail-row{ flex-direction: column; gap: 3px; padding: 10px 16px; }
  .detail-row__label{ min-width: 0; font-size: 12px; }
}

/* ── Public tour pages: gallery grid (/tours/<slug>/) ───────────────────── */
.tourpage-gallery{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.tourpage-gallery img{
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--border);
}
@media (max-width: 640px){
  .tourpage-gallery{ grid-template-columns: repeat(2, 1fr); }
  .tourpage-gallery img{ height: 130px; }
}

/* ── Public direct booking: date rows ───────────────────────────────────── */
.book-date-row{
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  color: inherit;
  text-decoration: none;
}
.book-date-row + .book-date-row{ border-top: 1px solid rgba(255,255,255,0.08); }
.book-date-row:hover{ background: rgba(255,255,255,0.05); }
.book-date-row__when{ flex: 0 0 110px; line-height: 1.3; }
.book-date-row__when .muted{ display: block; font-size: .85em; }
.book-date-row__what{ flex: 1; min-width: 0; line-height: 1.35; }
.book-date-row__price{ flex: 0 0 auto; text-align: right; font-weight: 700; }
@media (max-width: 560px){
  .book-date-row{ flex-wrap: wrap; gap: 6px 14px; }
  .book-date-row__when{ flex-basis: 100%; display: flex; gap: 8px; }
}


/* ════════════════════════════════════════════════════════════════════════
   PUBLIC SITE DESIGN SYSTEM (2026-07 makeover)
   All rules scoped to `body.site` so the backoffice (which also loads this
   file) is untouched. Concept: warm near-black, yellow accent, heavy
   uppercase display type, clean bordered cards. See docs/seo.md / public-site.md.
   ════════════════════════════════════════════════════════════════════════ */

body.site{
  --site-bg:      #0a0a0f;
  --site-bg-2:    #0d0d14;
  --panel:        #131319;
  --panel-2:      #17171f;
  --panel-line:   rgba(255,255,255,0.09);
  --panel-line-2: rgba(255,255,255,0.14);
  --ink:          rgba(255,255,255,0.95);
  --ink-soft:     rgba(255,255,255,0.66);
  --ink-faint:    rgba(255,255,255,0.45);
  --accent:       #FCD116;
  --accent-ink:   #17130a;
  --violet:       #6d3bf5;
  --violet-2:     #3a1f8f;

  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1100px 640px at 82% -8%, rgba(109,59,245,0.10), transparent 60%),
    radial-gradient(900px 560px at 4% 2%, rgba(252,209,22,0.06), transparent 55%),
    var(--site-bg);
  -webkit-font-smoothing: antialiased;
}

/* ── Display type ───────────────────────────────────────────────────────── */
body.site h1, body.site h2, body.site h3,
body.site .display{
  font-family: "Montserrat", "Inter", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.06;
}
body.site h2{ font-size: clamp(1.7rem, 3vw, 2.5rem); }
body.site h3{ font-size: 1.15rem; letter-spacing: -0.005em; }
body.site .u-accent{ color: var(--accent); }
body.site p{ color: var(--ink-soft); line-height: 1.65; }
body.site a{ color: inherit; }

/* Sections own their own width (.wrap) + vertical rhythm (.section); let main
   be a full-bleed passthrough so the hero and cards can breathe. */
body.site main{ max-width: none; margin: 0; padding: 0; min-height: 0; }

/* Kicker label above a section title */
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: "Inter", sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before{
  content: "";
  width: 22px; height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

/* Section wrapper + centered head */
body.site .section{ padding: 66px 0; }
.section-head{ max-width: 640px; margin: 0 0 34px; }
.section-head--center{ margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2{ margin: 12px 0 10px; }
.section-head p{ margin: 0; font-size: 1.05rem; }

/* ── Header (public) ────────────────────────────────────────────────────── */
body.site header{
  position: sticky;
  top: 0;
  background: rgba(10,10,15,0.72);
  border-bottom: 1px solid var(--panel-line);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
}
body.site .navlink{ color: var(--ink-soft); font-weight: 600; }
body.site .navlink:hover{ color: var(--ink); background: rgba(255,255,255,0.06); border-color: transparent; }
body.site .cta{
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  box-shadow: 0 10px 26px rgba(252,209,22,0.22);
}

/* ── Buttons (public tuning) ────────────────────────────────────────────── */
body.site .btn{ font-family: "Inter", sans-serif; font-weight: 700; border-radius: 12px; }
body.site .btn-primary{
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  box-shadow: 0 12px 30px rgba(252,209,22,0.2);
}
body.site .btn-primary:hover{ filter: brightness(1.05); }
body.site .btn-secondary{
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--panel-line-2);
  color: var(--ink);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
body.site .btn-ghost{
  background: transparent;
  border: 1px solid var(--panel-line-2);
  color: var(--ink);
}
body.site .btn-lg{ padding: 0.95rem 1.5rem; font-size: 1.02rem; border-radius: 13px; }

/* ── Cards ──────────────────────────────────────────────────────────────── */
body.site .card{
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}

/* ════════════ HERO ════════════ */
body.site .hero{ border-bottom: 1px solid var(--panel-line); }
body.site .hero-inner{
  max-width: var(--max);
  padding: clamp(3.4rem, 8vw, 6.4rem) 1.25rem clamp(2.6rem, 5vw, 4rem);
}
body.site .hero-overlay{
  background:
    radial-gradient(1000px 520px at 88% 12%, rgba(109,59,245,0.22), transparent 58%),
    linear-gradient(180deg, rgba(10,10,15,0.35) 0%, rgba(10,10,15,0.72) 62%, rgba(10,10,15,0.96) 100%);
}
body.site .hero-bg{ filter: saturate(1.08) contrast(1.04) brightness(0.92); }
body.site .hero-content{ max-width: 720px; }
body.site .hero-kicker{
  background: rgba(252,209,22,0.10);
  border: 1px solid rgba(252,209,22,0.32);
  color: var(--accent);
  font-weight: 700;
  letter-spacing: .04em;
}
body.site .hero h1{
  font-size: clamp(2.5rem, 6vw, 4.6rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.98;
  margin: 1.1rem 0 0;
  text-shadow: 0 6px 40px rgba(0,0,0,0.5);
}
body.site .hero p{
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  color: rgba(255,255,255,0.82);
  margin: 1.2rem 0 1.7rem;
  max-width: 54ch;
}
body.site .hero-actions{ gap: .8rem; }

/* Hero trust strip + rating */
.hero-trust{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 1.9rem;
}
.trust-chip{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .9rem;
  border-radius: 12px;
  border: 1px solid var(--panel-line-2);
  background: rgba(255,255,255,0.04);
  font-size: .9rem;
  font-weight: 600;
  color: rgba(255,255,255,0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.trust-chip i{ color: var(--accent); font-size: .95rem; }
.hero-rating{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: 1.4rem;
  font-size: .95rem;
  color: var(--ink-soft);
}
.hero-rating__stars{ color: var(--accent); letter-spacing: 1px; }
.hero-rating strong{ color: var(--ink); }

/* ════════════ FEATURE CARDS ════════════ */
.featuregrid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.featurecard{
  padding: 26px 22px;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.featurecard:hover{
  transform: translateY(-4px);
  border-color: rgba(252,209,22,0.35);
  background: var(--panel-2);
}
.featurecard__icon{
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  margin-bottom: 16px;
  background: rgba(252,209,22,0.12);
  color: var(--accent);
  border: 1px solid rgba(252,209,22,0.22);
}
.featurecard h3{ margin: 0 0 8px; }
.featurecard p{ margin: 0; font-size: .95rem; }

/* ════════════ FEATURED TOUR CARD ════════════ */
.tourfeature{
  display: grid;
  grid-template-columns: 1.05fr 1.35fr;
  gap: 0;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--panel-line);
  background: var(--panel);
}
.tourfeature__media{
  position: relative;
  min-height: 340px;
  background-size: cover;
  background-position: center;
}
.tourfeature__media::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 55%, var(--panel) 99%);
}
.tourfeature__badge{
  position: absolute;
  top: 16px; left: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .8rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tourfeature__body{
  padding: 34px 32px;
  display: flex;
  flex-direction: column;
}
.tourfeature__body h3{ font-size: 1.7rem; margin: 0 0 8px; }
.tourfeature__desc{ margin: 0 0 18px; font-size: .98rem; }
.checklist{ list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 11px; }
.checklist li{ display: flex; align-items: flex-start; gap: 11px; color: rgba(255,255,255,0.86); font-size: .96rem; }
.checklist li i{ color: var(--accent); margin-top: 3px; }
.tourfeature__facts{ margin: 0 0 20px; }
.tourfeature__foot{
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--panel-line);
}
.tourprice{ line-height: 1.1; }
.tourprice small{ display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); margin-bottom: 4px; }
.tourprice strong{ font-family: "Montserrat", sans-serif; font-size: 1.7rem; font-weight: 800; }
.tourprice span{ font-size: .82rem; color: var(--ink-soft); }
@media (max-width: 760px){
  .tourfeature{ grid-template-columns: 1fr; }
  .tourfeature__media{ min-height: 220px; }
  .tourfeature__media::after{ background: linear-gradient(180deg, transparent 55%, var(--panel) 99%); }
}

/* ════════════ STAT ROW ════════════ */
.statrow{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
}
.statpub{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  border-radius: 16px;
  border: 1px solid var(--panel-line);
  background: var(--panel);
}
.statpub__icon{
  width: 46px; height: 46px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-size: 1.2rem;
  background: rgba(252,209,22,0.12);
  color: var(--accent);
  flex-shrink: 0;
}
.statpub__num{ font-family: "Montserrat", sans-serif; font-size: 1.9rem; font-weight: 800; line-height: 1; }
.statpub__label{ font-size: .9rem; color: var(--ink-soft); margin-top: 4px; }

/* ════════════ CONTENT / PROSE SECTIONS ════════════ */
body.site .prose-card{ padding: clamp(1.6rem, 3vw, 2.4rem); }
body.site .iconlist{ list-style: none; padding: 0; display: grid; gap: 12px; }
body.site .iconlist li{
  display: flex; align-items: flex-start; gap: 12px;
  color: rgba(255,255,255,0.85);
}
body.site .iconlist li::before{
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--accent);
  font-size: .85rem;
  margin-top: 3px;
}

/* ════════════ CTA BANNER (violet) ════════════ */
.cta-banner{
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: clamp(2.2rem, 4vw, 3.4rem);
  text-align: center;
  background:
    radial-gradient(700px 300px at 15% 0%, rgba(252,209,22,0.14), transparent 60%),
    linear-gradient(120deg, var(--violet-2), var(--violet));
  border: 1px solid rgba(255,255,255,0.14);
}
.cta-banner h2{ margin: 0 0 .7rem; color: #fff; }
.cta-banner p{ margin: 0 auto 1.6rem; color: rgba(255,255,255,0.85); max-width: 52ch; }

/* ════════════ FOOTER (public) ════════════ */
body.site footer{
  border-top: 1px solid var(--panel-line);
  background: var(--site-bg-2);
  padding: 56px 0 28px;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 34px;
}
.footer-brand__logo{ height: 54px; width: auto; margin-bottom: 14px; }
.footer-brand p{ font-size: .92rem; max-width: 34ch; margin: 0 0 16px; }
.footer-social{ display: flex; gap: 10px; }
.footer-social a{
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid; place-items: center;
  border: 1px solid var(--panel-line-2);
  background: rgba(255,255,255,0.04);
  color: var(--ink-soft);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.footer-social a:hover{ color: var(--accent); border-color: rgba(252,209,22,0.4); background: rgba(252,209,22,0.08); }
.footer-col h4{
  font-family: "Inter", sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 6px 0 16px;
}
.footer-col a{
  display: block;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: .94rem;
  padding: 6px 0;
}
.footer-col a:hover{ color: var(--accent); }
.footer-base{
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--panel-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: .88rem;
  color: var(--ink-faint);
}
.footer-base__links{ display: flex; gap: 18px; flex-wrap: wrap; }
.footer-base__links a{ color: var(--ink-faint); text-decoration: none; }
.footer-base__links a:hover{ color: var(--ink-soft); }
@media (max-width: 780px){
  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 26px; }
  .footer-brand{ grid-column: 1 / -1; }
}
@media (max-width: 480px){
  .footer-grid{ grid-template-columns: 1fr; }
}

/* ════════════ HOME: photo mosaic band ════════════ */
.photomosaic{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 150px;
  gap: 12px;
}
.photomosaic a{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--panel-line);
  background: var(--panel);
}
.photomosaic img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.photomosaic a:hover img{ transform: scale(1.06); }
.photomosaic a::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10,10,15,0.4));
  opacity: 0; transition: opacity .3s ease;
}
.photomosaic a:hover::after{ opacity: 1; }
.photomosaic .m-tall{ grid-row: span 2; }
.photomosaic .m-wide{ grid-column: span 2; }
@media (max-width: 720px){
  .photomosaic{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
  .photomosaic .m-wide{ grid-column: span 2; }
}

/* ════════════════════════════════════════════════════════════════════════
   PUBLIC SITE — shared page components (About / Tours / FAQ …)
   Scoped to body.site. Reuses the tokens from the design-system block above.
   ════════════════════════════════════════════════════════════════════════ */

/* Two-column text + media split */
.split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.split--media-left .split__media{ order: -1; }
.split__body h2{ margin: 12px 0 14px; }
.split__body > p{ margin: 0 0 14px; font-size: 1.02rem; }
.split__actions{ margin-top: 22px; display: flex; gap: .8rem; flex-wrap: wrap; }
.media-frame{
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--panel-line);
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
  position: relative;
}
.media-frame img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.media-frame--tall img{ aspect-ratio: 4 / 5; }
.media-frame--wide img{ aspect-ratio: 3 / 2; }
@media (max-width: 800px){
  .split{ grid-template-columns: 1fr; gap: 26px; }
  .split--media-left .split__media{ order: 0; }
}

/* Standalone trust band */
.trustband{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 26px;
  border-radius: 18px;
  border: 1px solid var(--panel-line);
  background: var(--panel);
}
.trustband .trust-chip{ font-size: .95rem; padding: .65rem 1.1rem; }

/* Vertical timeline (Tours: the flow of the night) */
body.site .timeline{
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
body.site .timeline li{
  position: relative;
  margin: 0;
  padding: 0 0 26px 40px;
}
body.site .timeline li::before{
  content: "";
  position: absolute;
  left: 9px; top: 22px; bottom: -4px;
  width: 2px;
  background: var(--panel-line-2);
}
body.site .timeline li:last-child::before{ display: none; }
body.site .timeline li::after{
  content: "";
  position: absolute;
  left: 0; top: 4px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent);
  border: 4px solid var(--site-bg);
  box-shadow: 0 0 0 1px rgba(252,209,22,0.4);
}
body.site .timeline li strong{ display: block; font-size: 1.05rem; margin-bottom: 2px; color: var(--ink); }
body.site .timeline li span{ color: var(--ink-soft); }

/* FAQ — two-column layout + polished accordion */
.faq-layout{
  display: grid;
  grid-template-columns: 1.4fr 0.9fr;
  gap: 34px;
  align-items: start;
}
.faq-aside{ position: sticky; top: 96px; }
@media (max-width: 860px){
  .faq-layout{ grid-template-columns: 1fr; }
  .faq-aside{ display: none; }
}
body.site .faq-list{ margin: 0; gap: 12px; }
body.site .faq-item{
  border: 1px solid var(--panel-line);
  border-radius: 14px;
  background: var(--panel);
  padding: 4px 18px;
  transition: border-color .18s ease, background .18s ease;
}
body.site .faq-item[open]{ border-color: rgba(252,209,22,0.32); background: var(--panel-2); }
body.site .faq-item summary{
  padding: 16px 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink);
  align-items: center;
}
body.site .faq-item summary::after{
  content: "\f067"; /* fa plus */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: .8rem;
  color: var(--accent);
  transition: transform .2s ease;
}
body.site .faq-item[open] summary::after{ content: "\f068"; /* fa minus */ }
body.site .faq-item p{ margin: 0 0 16px; color: var(--ink-soft); line-height: 1.6; }

/* Info stat/detail chips (Tours overview) */
.infochips{ display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 0; }
.infochip{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1.05rem;
  border-radius: 12px;
  border: 1px solid var(--panel-line-2);
  background: rgba(255,255,255,0.04);
  font-size: .95rem;
  font-weight: 600;
}
.infochip i{ color: var(--accent); }

/* ════════════════════════════════════════════════════════════════════════
   PUBLIC SITE — remaining marketing pages (Reviews / Guides / Gallery /
   Contact / Groups / Nightlife guide). Upgrades the legacy component classes
   to the new design language. Scoped to body.site.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Reviews ───────────────────────────────────────────────────────────── */
body.site .stars{ font-size: 1.15rem; letter-spacing: 3px; }
body.site .reviews-summary{
  align-items: center;
  gap: 22px;
  margin: 0 0 26px;
  padding: 24px 28px;
  border-radius: 18px;
  border: 1px solid var(--panel-line);
  background:
    radial-gradient(500px 200px at 0% 0%, rgba(252,209,22,0.08), transparent 60%),
    var(--panel);
}
body.site .reviews-summary__score{
  font-family: "Montserrat", sans-serif;
  font-size: 3.4rem;
  color: var(--accent);
}
body.site .reviews-grid{ gap: 18px; }
body.site .review-card{
  padding: 24px 22px;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  transition: transform .18s ease, border-color .18s ease;
}
body.site .review-card:hover{ transform: translateY(-3px); border-color: rgba(252,209,22,0.28); }
body.site .review-text{
  font-size: 1.0rem;
  line-height: 1.6;
  color: var(--ink);
  position: relative;
}
body.site .review-text::before{
  content: "\201C";
  font-family: "Montserrat", serif;
  font-size: 2.6rem;
  line-height: 0;
  color: var(--accent);
  opacity: .5;
  margin-right: 4px;
  vertical-align: -0.35em;
}
body.site .review-source{
  background: rgba(252,209,22,0.1);
  border-color: rgba(252,209,22,0.3);
  color: var(--accent);
  font-weight: 700;
}

/* ── Guides ────────────────────────────────────────────────────────────── */
body.site .guides-grid{ gap: 20px; }
body.site .guide-card{
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  transition: transform .18s ease, border-color .18s ease;
}
body.site .guide-card:hover{ transform: translateY(-4px); border-color: rgba(252,209,22,0.32); }
body.site .guide-photo{
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 0;
  display: block;
}
body.site .guide-photo--initial{
  display: grid;
  place-items: center;
  height: 300px;
  font-family: "Montserrat", sans-serif;
  font-size: 3.4rem;
  font-weight: 800;
  color: var(--accent);
  background: linear-gradient(135deg, rgba(252,209,22,0.14), rgba(109,59,245,0.14));
}
body.site .guide-meta{ padding: 18px 20px 22px; gap: 8px; }
body.site .guide-name{ font-family: "Montserrat", sans-serif; font-size: 1.2rem; font-weight: 700; }
body.site .guide-bio{ font-size: .95rem; color: var(--ink-soft); line-height: 1.55; }

/* ── Gallery ───────────────────────────────────────────────────────────── */
body.site .gallery-item{
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--panel-line);
  position: relative;
}
body.site .gallery-item img{ transition: transform .4s ease; }
body.site .gallery-item:hover img{ transform: scale(1.06); opacity: 1; }
body.site .pagination{ margin-top: 26px; display: flex; align-items: center; gap: 16px; justify-content: center; }

/* ── Contact ───────────────────────────────────────────────────────────── */
body.site .contact-card{ padding: clamp(1.6rem, 3vw, 2.2rem); }
body.site .contact-items{ margin-top: 1.2rem; display: grid; gap: 12px; }
body.site .contact-item{
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--panel-line);
  background: var(--panel-2);
}
body.site .contact-label{
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
body.site .contact-value{ font-size: 1.05rem; font-weight: 600; }
body.site .contact-value a{ color: var(--ink); text-decoration: none; }
body.site .contact-value a:hover{ color: var(--accent); }
body.site .contact-note{ font-size: .85rem; margin-top: 2px; }
body.site .contact-actions{ margin-top: 1.4rem; display: flex; gap: .8rem; flex-wrap: wrap; }
body.site .contact-subhead{ margin: 1.4rem 0 .6rem; font-size: 1.05rem; }

/* ── Groups: legacy emoji feature grid (fallback polish) ───────────────── */
body.site .feature-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-top: 4px;
}
body.site .feature{
  padding: 20px;
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  display: grid;
  gap: 4px;
  font-size: 1.5rem;
}
body.site .feature strong{ font-family: "Montserrat", sans-serif; font-size: 1.02rem; display: block; margin-top: 6px; }
body.site .feature .muted{ font-size: .92rem; }

/* ════════════ TOUR CARDS (Our Tours grid + booking-options picker) ════════════
   One card component shared by /tours/ (links to the detail page) and the
   /booking-options/ tour picker (.tourcard--pick, the whole card is a link). */
.tourgrid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 26px;
}
/* Capped variant (home "More Ways…" row): cards keep a natural width and center,
   so a lone card doesn't stretch the full width. */
.tourgrid--capped{
  grid-template-columns: repeat(auto-fit, minmax(300px, 380px));
  justify-content: center;
}
.tourcard{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--panel-line);
  background: var(--panel);
  box-shadow: 0 18px 46px rgba(0,0,0,0.34);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tourcard:hover{
  transform: translateY(-5px);
  border-color: rgba(252,209,22,0.42);
  box-shadow: 0 26px 64px rgba(0,0,0,0.46), 0 0 34px rgba(252,209,22,0.10);
}
.tourcard__media{
  display: block;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  position: relative;
}
.tourcard__media::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(10,10,15,0.55));
}
.tourcard__body{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 24px 26px;
  flex: 1;
}
.tourcard__title{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1.15;
  margin: 0;
}
.tourcard__title a{ color: var(--ink); text-decoration: none; }
.tourcard__title a:hover{ color: var(--accent); }
.tourcard__desc{ margin: 0; color: var(--ink-soft); font-size: .95rem; }
.tourcard__meta{ display: flex; flex-wrap: wrap; gap: 8px; }
.tourcard__foot{
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding-top: 6px;
}
.tourcard__foot .btn{ flex: 1; }

/* Picker variant: the whole card is one link, spans act as blocks. */
.tourcard--pick{ text-decoration: none; }
.tourcard--pick .tourcard__title{ color: var(--ink); }
.tourcard--pick:hover .tourcard__title{ color: var(--accent); }
.tourcard__cta{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: auto;
  padding-top: 6px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .82rem;
  color: var(--accent);
}
.tourcard__cta i{ transition: transform .18s ease; }
.tourcard--pick:hover .tourcard__cta i{ transform: translateX(3px); }

/* ════════════ BOOKING OPTIONS PAGE ════════════
   Featured "book direct" panel (our neon logo + benefits) sitting above two
   partner cards, then a reassurance strip. All keyed off the design tokens. */

/* Featured: book direct with us */
.book-direct{
  position: relative;
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(252,209,22,0.38);
  background: var(--panel);
  text-decoration: none;
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.book-direct:hover{
  transform: translateY(-5px);
  border-color: rgba(252,209,22,0.62);
  box-shadow: 0 30px 72px rgba(0,0,0,0.5), 0 0 42px rgba(252,209,22,0.12);
}
.book-direct__ribbon{
  position: absolute;
  top: 18px; right: 18px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  padding: .44rem .92rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 8px 24px rgba(252,209,22,0.28);
}
.book-direct__brand{
  position: relative;
  display: grid;
  place-items: center;
  padding: 40px;
  min-height: 300px;
  border-right: 1px solid var(--panel-line);
  background:
    radial-gradient(430px 300px at 50% 38%, rgba(252,209,22,0.16), transparent 70%),
    radial-gradient(360px 280px at 50% 92%, rgba(109,59,245,0.24), transparent 72%),
    linear-gradient(160deg, #15151d, #0b0b11);
}
.book-direct__logo{
  width: min(230px, 72%);
  height: auto;
  filter: drop-shadow(0 10px 34px rgba(0,0,0,0.6));
}
.book-direct__body{
  padding: 38px 36px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.book-direct__body h3{ font-size: 1.8rem; margin: .55rem 0 .6rem; }
.book-direct__body > p{ margin: 0 0 22px; font-size: 1rem; max-width: 46ch; }
.book-benefits{
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  gap: 12px;
  width: 100%;
}
.book-benefits li{
  display: flex; align-items: center; gap: 12px;
  font-size: .97rem;
  color: rgba(255,255,255,0.88);
}
.book-benefits li i{ color: var(--accent); width: 20px; text-align: center; }
@media (max-width: 780px){
  .book-direct{ grid-template-columns: 1fr; }
  .book-direct__brand{
    min-height: 200px;
    border-right: none;
    border-bottom: 1px solid var(--panel-line);
  }
}

/* "Or book through a partner" divider */
.book-partners{ margin-top: 44px; }
.book-divider{
  position: relative;
  display: block;
  text-align: center;
  margin: 0 auto 26px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.book-divider::before, .book-divider::after{
  content: "";
  position: absolute;
  top: 50%;
  width: min(30%, 240px);
  height: 1px;
  background: var(--panel-line);
}
.book-divider::before{ left: 0; }
.book-divider::after{ right: 0; }

/* Partner cards */
.partner-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 20px;
}
.partner-card{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 30px 28px;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.partner-card:hover{ transform: translateY(-4px); background: var(--panel-2); }
.partner-card__logo{
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 8px 14px;
  margin-bottom: 18px;
  background: #fff;
  border-radius: 12px;
}
.partner-card__logo img{ height: 100%; width: auto; object-fit: contain; }
/* Fallback glyph for OTA platforms without a bundled logo (Viator, Expedia, …). */
.partner-card__glyph{ display: grid; place-items: center; height: 100%; }
.partner-card__glyph i{ font-size: 1.9rem; color: var(--accent); }
.partner-card h3{ margin: 0 0 8px; }
.partner-card p{ margin: 0 0 22px; font-size: .95rem; }
.partner-card__go{
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  font-size: .92rem;
  color: var(--ink);
}
.partner-card__go i{ font-size: .78rem; transition: transform .18s ease; }
.partner-card:hover .partner-card__go i{ transform: translate(2px, -2px); }
.partner-card.airbnb:hover{ border-color: #FF385C; }
.partner-card.airbnb .partner-card__go{ color: #FF5A7A; }
.partner-card.getyourguide:hover{ border-color: #FFCC00; }
.partner-card.getyourguide .partner-card__go{ color: var(--accent); }

/* Reassurance strip */
.book-trust{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.book-trust__item{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
}
.book-trust__item i{ font-size: 1.3rem; color: var(--accent); width: 30px; text-align: center; }
.book-trust__item strong{ display: block; font-size: .98rem; color: var(--ink); }
.book-trust__item span{ font-size: .86rem; color: var(--ink-soft); }

/* ════════════ DIRECT BOOKING FUNNEL (tour → date → time → details → pay) ════
   Multi-step checkout, all keyed off the design tokens. Unique class names, so
   the backoffice (same stylesheet, body.backoffice) is untouched. */

.book-shell{ max-width: 920px; }

/* ── Progress stepper ─────────────────────────────────────────────────── */
.book-steps{
  list-style: none;
  display: flex;
  align-items: flex-start;
  margin: 0 0 32px;
  padding: 0;
}
.book-step{
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.book-step:not(:last-child)::after{
  content: "";
  position: absolute;
  top: 16px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--panel-line-2);
  z-index: 0;
}
.book-step.is-done:not(:last-child)::after{ background: var(--accent); }
.book-step__dot{
  position: relative;
  z-index: 1;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: .9rem;
  background: var(--panel-2);
  border: 1px solid var(--panel-line-2);
  color: var(--ink-faint);
}
.book-step.is-done .book-step__dot{
  background: rgba(252,209,22,0.16);
  color: var(--accent);
  border-color: rgba(252,209,22,0.4);
}
.book-step.is-active .book-step__dot{
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(252,209,22,0.3);
}
.book-step__label{ font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.book-step.is-active .book-step__label{ color: var(--ink); }
@media (max-width: 520px){ .book-step__label{ font-size: .7rem; } }

/* ── Step 1: tour picker ──────────────────────────────────────────────── */
.booktour-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}
.booktour-card{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--panel-line);
  background: var(--panel);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.booktour-card:hover{
  transform: translateY(-5px);
  border-color: rgba(252,209,22,0.35);
  box-shadow: 0 24px 54px rgba(0,0,0,0.42);
}
.booktour-card__media{
  position: relative;
  height: 190px;
  background-size: cover;
  background-position: center;
}
.booktour-card__badge{
  position: absolute;
  top: 14px; left: 14px;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .38rem .8rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.booktour-card__body{
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.booktour-card__body h3{ margin: 0 0 8px; font-size: 1.3rem; }
.booktour-card__desc{ margin: 0 0 16px; font-size: .94rem; color: var(--ink-soft); }
.booktour-card__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: 18px;
  font-size: .88rem;
  color: var(--ink-soft);
}
.booktour-card__meta i{ color: var(--accent); margin-right: 5px; }
.booktour-card__foot{
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--panel-line);
}
.booktour-card__price{ line-height: 1.1; }
.booktour-card__price small{ display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); margin-bottom: 3px; }
.booktour-card__price strong{ font-family: "Montserrat", sans-serif; font-size: 1.25rem; }
.booktour-card__price span{ display: block; font-size: .76rem; color: var(--ink-soft); }

/* ── Chosen-tour / order summary ──────────────────────────────────────── */
.book-summary{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px;
  border-radius: 18px;
  border: 1px solid var(--panel-line);
  background: var(--panel);
  margin-bottom: 20px;
}
.book-summary__main{ min-width: 0; }
.book-summary__main h2{ margin: .4rem 0 .6rem; font-size: 1.4rem; }
.book-summary__facts{ display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .9rem; color: var(--ink-soft); }
.book-summary__facts i{ color: var(--accent); margin-right: 6px; }
.book-summary__change{ flex: 0 0 auto; font-size: .86rem; font-weight: 700; color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.book-summary__change:hover{ color: var(--accent); }
.book-summary__list{ list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: 10px; }
.book-summary__list li{ display: flex; align-items: center; gap: 10px; font-size: .94rem; color: rgba(255,255,255,0.86); }
.book-summary__list li i{ color: var(--accent); width: 18px; text-align: center; }
.book-summary__price{ margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--panel-line); display: flex; flex-direction: column; gap: 4px; font-weight: 700; }
.book-summary__left{ font-weight: 500; font-size: .85rem; }
.book-summary--rail{ margin-bottom: 0; flex-direction: column; }

/* Two-column details/payment layout: summary rail + panel */
.book-columns{ display: grid; grid-template-columns: 1fr 1.4fr; gap: 22px; align-items: start; }
@media (max-width: 760px){ .book-columns{ grid-template-columns: 1fr; } }

/* ── Generic step panel ───────────────────────────────────────────────── */
.book-panel{
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 18px;
  padding: 26px;
}
.book-panel--center{ text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.book-panel--center h2{ margin: .4rem 0 0; }
.book-panel--center .btn{ margin-top: 14px; }

/* ── Party-size stepper ───────────────────────────────────────────────── */
.partysize-panel{ display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px; padding: 20px 24px; flex-wrap: wrap; }
.partysize__label strong{ display: block; font-size: 1rem; }
.partysize__label span{ font-size: .85rem; }
.partysize{ display: inline-flex; align-items: center; gap: 6px; }
.partysize__btn{
  width: 42px; height: 42px;
  border-radius: 12px;
  display: grid; place-items: center;
  border: 1px solid var(--panel-line-2);
  background: rgba(255,255,255,0.05);
  color: var(--ink);
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.partysize__btn:hover{ border-color: var(--accent); color: var(--accent); }
.partysize__btn.is-disabled{ opacity: .35; pointer-events: none; }
.partysize__value{ min-width: 100px; text-align: center; font-weight: 800; font-family: "Montserrat", sans-serif; font-size: 1.15rem; }
.partysize__value small{ display: block; font-family: "Inter", sans-serif; font-weight: 500; font-size: .72rem; color: var(--ink-soft); }

/* ── Step 2: calendar ─────────────────────────────────────────────────── */
/* While an AJAX party/month swap is in flight, dim + lock the region. */
#book-cal-region{ transition: opacity .15s ease; }
#book-cal-region.is-loading{ opacity: .5; pointer-events: none; }
.bookcal__head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.bookcal__month{ font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1.15rem; }
.bookcal__nav{
  width: 40px; height: 40px;
  border-radius: 11px;
  display: grid; place-items: center;
  border: 1px solid var(--panel-line-2);
  background: rgba(255,255,255,0.05);
  color: var(--ink);
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.bookcal__nav:hover{ border-color: var(--accent); color: var(--accent); }
.bookcal__nav.is-disabled{ opacity: .3; pointer-events: none; }
.bookcal__dow{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 8px; }
.bookcal__dow span{ text-align: center; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.bookcal__grid{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.bookcal__cell{
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: .95rem;
}
.bookcal__cell.is-empty{ background: transparent; }
.bookcal__cell.is-closed{ color: var(--ink-faint); background: rgba(255,255,255,0.02); }
.bookcal__cell.is-open{
  background: rgba(252,209,22,0.10);
  border: 1px solid rgba(252,209,22,0.3);
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  transition: transform .12s ease, background .15s ease, color .15s ease;
}
.bookcal__cell.is-open:hover{ background: var(--accent); color: var(--accent-ink); transform: translateY(-2px); }
.bookcal__dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.bookcal__cell.is-open:hover .bookcal__dot{ background: var(--accent-ink); }
.bookcal__legend{ margin-top: 14px; font-size: .82rem; color: var(--ink-soft); display: flex; gap: 8px; align-items: center; }
.bookcal__dot--legend{ display: inline-block; }
@media (max-width: 520px){
  .bookcal__grid, .bookcal__dow{ gap: 5px; }
  .bookcal__cell{ font-size: .82rem; border-radius: 9px; }
}

/* ── Step 3: time picker ──────────────────────────────────────────────── */
.booktime-grid{ display: grid; gap: 14px; }
.booktime-card{
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  border-radius: 16px;
  border: 1px solid var(--panel-line);
  background: var(--panel);
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.booktime-card:hover{ transform: translateY(-3px); border-color: rgba(252,209,22,0.4); background: var(--panel-2); }
.booktime-card__time{ font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1.3rem; flex: 0 0 auto; min-width: 96px; }
.booktime-card__meta{ display: flex; flex-direction: column; gap: 5px; flex: 1; font-size: .9rem; color: var(--ink-soft); }
.booktime-card__meta i{ color: var(--accent); width: 16px; margin-right: 6px; }
.booktime-card__go{ flex: 0 0 auto; color: var(--accent); }

/* ── Step 4: guest details form ───────────────────────────────────────── */
body.site .book-form{ grid-template-columns: 1fr; }
.book-form .field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px){ .book-form .field-row{ grid-template-columns: 1fr; } }
.book-trust-line{ font-size: .82rem; margin: 14px 0 0; text-align: center; }
.book-trust-line i{ color: var(--accent); margin-right: 6px; }
.book-fineprint{ font-size: .85rem; margin-top: 16px; text-align: center; }
.book-fineprint i{ color: var(--accent); }

/* Payment order total */
.book-order__total{ margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--panel-line); display: flex; align-items: center; justify-content: space-between; }
.book-order__total strong{ font-family: "Montserrat", sans-serif; font-size: 1.4rem; }

/* ── Empty / processing / confirmation states ─────────────────────────── */
.book-empty__icon{
  width: 64px; height: 64px;
  border-radius: 18px;
  display: grid; place-items: center;
  font-size: 1.6rem;
  background: rgba(252,209,22,0.12);
  color: var(--accent);
  border: 1px solid rgba(252,209,22,0.25);
  margin-bottom: 6px;
}
.book-empty__icon--warn{ background: rgba(255,120,120,0.12); color: #ff9a9a; border-color: rgba(255,120,120,0.3); }
.book-spinner{
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 3px solid var(--panel-line-2);
  border-top-color: var(--accent);
  animation: book-spin 0.8s linear infinite;
  margin: 6px auto 4px;
}
@keyframes book-spin{ to{ transform: rotate(360deg); } }

.book-confirm{ text-align: center; display: flex; flex-direction: column; align-items: center; }
.book-confirm__check{
  width: 74px; height: 74px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 2rem;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 12px 34px rgba(252,209,22,0.35);
  margin-bottom: 10px;
}
.book-confirm h2{ margin: .2rem 0 1rem; }
.book-confirm__code-label{ margin: 0 0 6px; font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; }
.book-confirm__code{
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 1.8rem;
  letter-spacing: .08em;
  color: var(--accent);
  background: rgba(252,209,22,0.08);
  border: 1px dashed rgba(252,209,22,0.4);
  border-radius: 12px;
  padding: 12px 24px;
  margin-bottom: 22px;
}
.book-confirm__facts{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  width: 100%;
  margin-bottom: 22px;
}
.book-confirm__facts > div{ display: flex; align-items: center; gap: 10px; justify-content: center; font-size: .92rem; color: rgba(255,255,255,0.86); }
.book-confirm__facts i{ color: var(--accent); }