/* The Local Way — stylesheet
   Brand: Atlantic Ink / Warm Cream / Basque Moss / Charcoal / Sun Ochre
   Type: Archivo SemiCondensed (direction) + Source Serif 4 (discovery)
   Mobile-first: base rules target small screens; two breakpoints enhance
   upward — 640px (small tablet) and 960px (desktop). */

:root {
  --ink: #173A3D;
  --cream: #F4EFE5;
  --moss: #71806B;
  /* Mismo verde, oscurecido solo para texto chico: el de marca queda en
     3.66:1 sobre crema y no llega al mínimo legible (4.5:1). Se usa en
     etiquetas, notas al pie de tabla y avisos, no en fondos ni adornos. */
  --moss-text: #626F5D;
  --moss-light: #9DAE94;
  --charcoal: #252826;
  --ochre: #D89A45;
  --white: #FFFFFF;
  --ink-12: rgba(23, 58, 61, 0.12);
  --ink-16: rgba(23, 58, 61, 0.16);
  --ink-25: rgba(23, 58, 61, 0.25);

  --font-sans: 'Archivo SemiCondensed', system-ui, -apple-system, sans-serif;
  --font-serif: 'Source Serif 4', Georgia, serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --container: 1280px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
  overflow-x: hidden;
}

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

a { color: var(--ink); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--ochre); }

::selection { background: var(--ochre); color: var(--ink); }

a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 2px solid var(--ochre);
  outline-offset: 3px;
  border-radius: 1px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Locks page scroll behind an open lightbox (js/main.js -> initGalleryLightbox) */
html.lightbox-locked { overflow: hidden; }

h1, h2, h3, h4 { font-family: var(--font-sans); font-weight: 600; color: var(--ink); margin: 0; }
/* Fluid type: headings used to jump at 640px and then freeze, which left them
   visibly undersized on a 1440px+ monitor. clamp() ramps them continuously
   between phone and large desktop, with the low end matching the old mobile
   sizes so nothing shrinks on small screens. */
h1 { font-size: clamp(28px, 1.5vw + 26px, 50px); line-height: 1.15; }
h2 { font-size: clamp(24px, 1.25vw + 22px, 42px); line-height: 1.2; }
h3 { font-size: clamp(19px, 0.4vw + 17.5px, 24px); line-height: 1.3; }
p { margin: 0; }
@media (min-width: 960px) {
  h1 { font-size: 44px; line-height: 1.12; }
  h2 { font-size: 34px; }
  h3 { font-size: 22px; }
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-4);
}
@media (min-width: 640px) { .container { padding: 0 var(--space-5); } }
@media (min-width: 960px) { .container { padding: 0 var(--space-6); } }

.label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--moss-text);
  margin: 0 0 var(--space-4) 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 24px;
  min-height: 44px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
@media (min-width: 640px) { .btn { padding: 16px 28px; } }
.btn-primary { background: var(--ink); color: var(--cream); }
.btn-primary:hover { background: #0f2729; color: var(--cream); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(23, 58, 61, 0.22); }
.btn-secondary { background: transparent; color: var(--cream); border-color: rgba(244, 239, 229, 0.5); }
.btn-secondary:hover { color: var(--cream); border-color: var(--cream); transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--cream); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(23, 58, 61, 0.16); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn svg { flex-shrink: 0; transition: transform 0.2s ease; }
.btn:hover svg { transform: translateX(2px); }
.btn-full { width: 100%; justify-content: center; }
/* Very narrow phones (iPhone SE and friends): let long button labels wrap
   instead of spilling past the button edge, and give the two hero CTAs the
   full column so they don't end up different widths. The header CTA is the
   exception — it stays on one line and shrinks, because wrapping it there
   doubles the header height and squeezes the logo. */
@media (max-width: 380px) {
  .btn { white-space: normal; text-align: center; }
  .reviews-card .btn { width: 100%; justify-content: center; }
  .site-header .btn { white-space: nowrap; padding: 10px 14px; font-size: 13px; }
  .logo { flex-shrink: 0; }
}

/* Header / nav */
.site-header {
  width: 100%;
  background: var(--cream);
  border-bottom: 1px solid var(--ink-12);
  position: sticky;
  top: 0;
  z-index: 20;
  transition: box-shadow 0.25s ease;
}
.site-header.scrolled { box-shadow: 0 4px 24px rgba(23, 58, 61, 0.1); }
.site-header .container {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 960px) { .site-header .container { height: 80px; } }

.logo {
  display: flex;
  align-items: center;
}
.logo img {
  display: block;
  height: 28px;
  width: auto;
}
@media (min-width: 640px) { .logo img { height: 34px; } }

.nav-right { display: flex; align-items: center; gap: var(--space-3); }
@media (min-width: 960px) { .nav-right { gap: var(--space-8); } }

.nav-links {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  position: absolute;
  top: 64px;
  left: 0;
  right: 0;
  background: var(--cream);
  padding: var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--ink-12);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  z-index: 30;
}
.nav-links.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.nav-links a {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  color: var(--charcoal);
  padding: var(--space-2) 0;
}
.nav-links a.active, .nav-dropdown summary.active { color: var(--ink); font-weight: 600; }
.nav-links a:hover, .nav-dropdown summary:hover { color: var(--ochre); }

.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  margin: 0 calc(-1 * var(--space-2));
}

/* Tours dropdown — native <details>/<summary>, no extra JS needed */
.nav-dropdown { position: relative; }
.nav-dropdown summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  color: var(--charcoal);
  padding: var(--space-2) 0;
}
.nav-dropdown summary::-webkit-details-marker { display: none; }
.nav-dropdown summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -4px;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.nav-dropdown[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.nav-dropdown-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) 0 var(--space-2) var(--space-4);
}
.nav-dropdown-panel a {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--charcoal);
  display: flex;
  align-items: center;
  min-height: 44px;
}
.nav-dropdown-panel a:hover { color: var(--ochre); }

@media (min-width: 960px) {
  .nav-links {
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
    position: static;
    background: none;
    padding: 0;
    border: none;
    max-height: none;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }
  .nav-links > a { padding: 0; font-size: 15px; position: relative; }
  .nav-links > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -2px;
    height: 1.5px;
    background: currentColor;
    transition: right 0.2s ease;
  }
  .nav-links > a:hover::after { right: 0; }
  .nav-toggle { display: none; }
  .nav-dropdown-panel {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--cream);
    border: 1px solid var(--ink-12);
    padding: var(--space-4);
    min-width: 230px;
  }
  .nav-dropdown-panel a { font-size: 15px; padding: 4px 0; min-height: 0; }
}

/* Hero */
.hero-dark { width: 100%; background: var(--ink); }
.hero-dark .container {
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
.hero-dark h1, .hero-dark .label { color: var(--cream); }
.hero-dark p { color: var(--cream); opacity: 0.85; }

.hero-light .container {
  padding-top: var(--space-6);
  padding-bottom: var(--space-5);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 960px) {
  .hero-dark .container {
    padding-top: var(--space-9);
    padding-bottom: var(--space-9);
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-8);
    align-items: center;
  }
  .hero-light .container {
    padding-top: var(--space-8);
    padding-bottom: var(--space-6);
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-8);
    align-items: center;
  }
}

/* Hero with a photo (Home). The copy always sits on top of the photo, at
   every width. Below 960px the photo is shown at its own real aspect ratio
   (via `aspect-ratio`, matched to the mobile crop below) instead of being
   force-cropped to fill an arbitrary tall box — the hero is only as tall as
   the photo actually is, and nothing gets stretched or over-cropped to
   invent extra height. The copy panel is pulled up over the bottom of that
   photo with a negative margin (translucent ink "glass" + blur), so it
   still reads clearly without needing the photo to be any taller than its
   own proportions. From 960px there's room for the older full-bleed
   technique instead: the photo fills the whole section behind the copy,
   with a left-heavy gradient scrim so the text column keeps contrast no
   matter how bright that part of the photo is. */
.hero-photo { position: relative; }
.hero-photo-bg {
  position: relative; z-index: 0;
  width: 100%; aspect-ratio: 765 / 730; overflow: hidden;
}
.hero-photo-bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-photo-fill { display: none; }
.hero-photo-main { object-position: center; }
.hero-photo .hero-scrim {
  display: block; position: absolute; top: 0; left: 0; z-index: 1;
  width: 100%; aspect-ratio: 765 / 730;
  background: linear-gradient(180deg, rgba(15, 39, 41, 0) 0%, rgba(15, 39, 41, 0.04) 55%, rgba(15, 39, 41, 0.4) 85%, rgba(15, 39, 41, 0.58) 100%);
}
.hero-photo .container {
  position: relative; z-index: 2; grid-template-columns: 1fr;
  margin-top: -190px;
  padding-top: 0; padding-bottom: var(--space-6);
}
.hero-photo .hero-copy {
  max-width: 640px;
  background: rgba(15, 39, 41, 0.7);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: var(--space-5) var(--space-4);
}
.hero-photo .hero-copy h1, .hero-photo .hero-copy p.lead { text-shadow: none; }
/* On the ink glass panel, the default btn-primary (ink bg) would be nearly
   invisible — invert it to cream so it reads as the loud CTA it is. */
.hero-photo .hero-actions .btn-primary { background: var(--cream); color: var(--ink); }
.hero-photo .hero-actions .btn-primary:hover { background: var(--white); }

@media (min-width: 960px) {
  .hero-photo { overflow: hidden; min-height: 620px; display: flex; align-items: center; }
  .hero-photo-bg { position: absolute; inset: 0; aspect-ratio: auto; }
  .hero-photo-main { object-fit: cover; object-position: center 35%; }
  .hero-photo .hero-scrim {
    inset: 0; width: auto; aspect-ratio: auto;
    background: linear-gradient(100deg, rgba(15, 39, 41, 0.88) 0%, rgba(15, 39, 41, 0.78) 30%, rgba(15, 39, 41, 0.5) 50%, rgba(15, 39, 41, 0.18) 72%, rgba(15, 39, 41, 0.05) 100%);
  }
  .hero-photo .container {
    margin-top: 0;
    padding-top: var(--space-9); padding-bottom: var(--space-9);
  }
  .hero-photo .hero-copy {
    background: none; padding: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .hero-photo .hero-copy h1, .hero-photo .hero-copy p.lead {
    text-shadow: 0 2px 16px rgba(23, 58, 61, 0.6), 0 1px 4px rgba(0, 0, 0, 0.35);
  }
  .hero-photo .hero-actions .btn-primary { background: var(--ink); color: var(--cream); }
  .hero-photo .hero-actions .btn-primary:hover { background: #0f2729; }
}

.hero-copy p.lead {
  font-family: var(--font-serif);
  font-size: clamp(16px, 0.5vw + 14.4px, 21px);
  line-height: 1.6;
  max-width: 560px;
  margin: var(--space-4) 0 var(--space-5) 0;
}
@media (min-width: 640px) {
  .hero-copy p.lead { margin: var(--space-5) 0 var(--space-6) 0; }
}
.hero-actions { display: flex; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; }
@media (min-width: 640px) { .hero-actions { align-items: center; gap: var(--space-5); } }
@media (min-width: 960px) { .hero-light .hero-actions { margin-top: var(--space-3); } }
.hero-price { font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: var(--charcoal); }
.hero-price strong { color: var(--ink); }

.photo-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--moss);
  display: flex;
  align-items: flex-end;
  position: relative;
  overflow: hidden;
}
.photo-placeholder.tone-ink { background: var(--ink); }
.photo-placeholder.tone-moss-light { background: var(--moss-light); }
.photo-placeholder.square { aspect-ratio: 1 / 1; }
/* Once a real photo replaces the color block: drop the placeholder
   <p class="photo-caption"> entirely and add an <img> as the only child —
   it fills the same aspect-ratio box via object-fit, no other markup change. */
.photo-placeholder img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-caption {
  padding: var(--space-4);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--cream);
  opacity: 0.9;
}

/* Sections */
.section { padding: var(--space-6) 0; }
@media (min-width: 640px) { .section { padding: var(--space-7) 0; } }
@media (min-width: 960px) { .section { padding: var(--space-8) 0; } }

.section-quote { padding: var(--space-6) 0; }
@media (min-width: 640px) { .section-quote { padding: var(--space-7) 0; } }
@media (min-width: 960px) { .section-quote { padding: var(--space-8) 0; } }
.section-quote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(19px, 1.05vw + 12.3px, 30px);
  line-height: 1.5;
  color: var(--ink);
  max-width: 820px;
  margin: 0;
}


.value-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 640px) { .value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); } }
@media (min-width: 960px) { .value-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.value-item svg { margin-bottom: var(--space-4); width: 26px; height: 21px; }
.value-item h4 { font-size: 20px; margin-bottom: var(--space-2); }
.value-item p { font-size: 16px; line-height: 1.6; }

/* Tour cards (home) — flexbox, not grid: a leftover row (fewer than the
   max per row) centers instead of hugging the left, so 5 cards read as
   3 on top + 2 centered below (inverted triangle), not a stray 4th column. */
.tours-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5);
}
.tours-grid .tour-card { flex: 0 1 100%; }
@media (min-width: 640px) {
  .tours-grid { gap: var(--space-6); }
  .tours-grid .tour-card { flex-basis: calc((100% - var(--space-6)) / 2); }
}
@media (min-width: 960px) {
  .tours-grid .tour-card { flex-basis: calc((100% - 2 * var(--space-6)) / 3); }
}

.tag-new {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--ochre);
  padding: 3px 8px;
  margin-left: var(--space-2);
}
.tour-card {
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--ink-12);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.tour-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(23, 58, 61, 0.14);
  border-color: var(--ink-25);
}
.tour-card .photo-placeholder { aspect-ratio: 4 / 3; }
.tour-card .photo-placeholder img { transition: transform 0.5s ease; }
.tour-card:hover .photo-placeholder img { transform: scale(1.06); }
.tour-card-footer a svg { transition: transform 0.2s ease; }
.tour-card:hover .tour-card-footer a svg { transform: translateX(3px); }
.tour-card-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.tour-card-body .label { margin-bottom: 0; }
.tour-card-body h3 { font-size: 20px; }
.tour-card-body .tagline { font-size: 15px; line-height: 1.6; color: var(--charcoal); }
.tour-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--ink-12);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  flex-wrap: wrap;
  gap: var(--space-2);
  color: var(--ink);
}
.tour-card-footer a { display: flex; align-items: center; gap: var(--space-2); color: var(--ink); }
.tour-card-footer span:last-child { display: flex; align-items: center; gap: var(--space-2); }

/* Guide block */
.guide-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 960px) { .guide-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; } }
.guide-quote { font-family: var(--font-serif); font-size: clamp(18px, 0.75vw + 13.2px, 26px); line-height: 1.5; color: var(--ink); margin: 0 0 var(--space-5) 0; }
.lang-badges { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.lang-badge {
  font-family: var(--font-sans); font-weight: 600; font-size: 13px;
  color: var(--cream); background: var(--ink); padding: 6px 12px;
}
.guide-note { font-size: 15px; line-height: 1.7; margin-bottom: var(--space-4); }
.guide-link { font-family: var(--font-sans); font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: var(--space-2); }

.guide-strip {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: center;
  background: var(--white);
  border: 1px solid var(--ink-12);
  padding: var(--space-5);
}
@media (min-width: 640px) { .guide-strip { gap: var(--space-5); padding: var(--space-6); } }
.guide-strip .avatar { width: 64px; height: 64px; background: var(--moss); flex-shrink: 0; }
@media (min-width: 640px) { .guide-strip .avatar { width: 88px; height: 88px; } }
.guide-strip p.quote { font-family: var(--font-serif); font-size: 16px; line-height: 1.5; color: var(--ink); margin: 0 0 var(--space-2) 0; }
@media (min-width: 640px) { .guide-strip p.quote { font-size: 17px; } }
.guide-strip p.name { font-family: var(--font-sans); font-weight: 600; font-size: 14px; margin: 0; }

/* Day bullets (legacy — used only by Larraún, on purpose: "no fixed order") */
.day-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 640px) { .day-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-8); } }
.day-grid p { font-size: 16px; line-height: 1.7; }
@media (min-width: 640px) { .day-grid p { font-size: 17px; } }

/* Itinerary timeline — the route line + points reuse the brand's wayfinding
   language (Sun Ochre = route point, per brand book) */
.itinerary { display: flex; flex-direction: column; max-width: 640px; }
.itinerary-item { display: grid; grid-template-columns: 28px 1fr; column-gap: var(--space-3); position: relative; }
@media (min-width: 640px) { .itinerary-item { column-gap: var(--space-4); } }
.itinerary-item:not(:last-child) { padding-bottom: var(--space-4); }
@media (min-width: 640px) { .itinerary-item:not(:last-child) { padding-bottom: var(--space-5); } }
.itinerary-node-col { position: relative; display: flex; justify-content: center; }
.itinerary-node-col::before {
  content: ""; position: absolute; top: 26px; bottom: -16px; width: 2px;
  background: var(--ink-16);
}
@media (min-width: 640px) { .itinerary-node-col::before { bottom: -20px; } }
.itinerary-item:last-child .itinerary-node-col::before { display: none; }
.itinerary-dot {
  width: 13px; height: 13px; border-radius: 50%; margin-top: 6px;
  background: var(--ochre); border: 2px solid var(--cream); position: relative; z-index: 1;
}
.itinerary-dot.endpoint { background: var(--ink); width: 15px; height: 15px; margin-top: 5px; }
.itinerary-walk {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  color: var(--moss); position: relative; z-index: 1;
}
.itinerary-label {
  font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: var(--ink);
  margin: 0 0 2px 0;
}
.itinerary-text { font-family: var(--font-serif); font-size: 15px; line-height: 1.5; color: var(--charcoal); margin: 0; }
.itinerary-item.walk-row .itinerary-text {
  font-family: var(--font-sans); font-size: 13px; color: var(--moss-text); padding-top: 4px;
}

/* Included / not included */
.included-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 640px) { .included-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }
.included-list { display: flex; flex-direction: column; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.included-list li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: 15px; line-height: 1.5; }
.included-list li svg { flex-shrink: 0; margin-top: 3px; }
.not-included-list li { opacity: 0.8; }

/* Practical info grid */
.practical-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--white);
  border: 1px solid var(--ink-12);
}
@media (min-width: 640px) { .practical-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); padding: var(--space-6); } }
@media (min-width: 960px) { .practical-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.practical-item .label { margin-bottom: 6px; }
.practical-item strong { font-family: var(--font-sans); font-weight: 600; font-size: 16px; color: var(--ink); }

/* Pricing table */
/* No min-width on the 2-column table: "8 people / 200€" fits a 320px phone
   with room to spare, and forcing a sideways swipe on a price list is the
   fastest way to look unfinished. Only the 3-column variant needs the scroll. */
.pricing-table { border: 1px solid var(--ink-16); }
.pricing-table:has(.cols-3) { overflow-x: auto; }
.pricing-row { display: grid; border-top: 1px solid var(--ink-12); }
.pricing-row.cols-3 { min-width: 420px; }
.pricing-row:first-child { border-top: none; background: var(--ink); }
.pricing-row:not(:first-child):nth-child(odd) { background: rgba(255, 255, 255, 0.55); }
.pricing-row.cols-2 { grid-template-columns: 1fr 1fr; }
.pricing-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.pricing-row > div { padding: 12px 16px; }
@media (min-width: 640px) { .pricing-row > div { padding: 14px 20px; } }
.pricing-row:first-child > div { font-family: var(--font-sans); font-weight: 600; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cream); }
.pricing-row:not(:first-child) > div:first-child { font-family: var(--font-serif); font-size: 15px; }
.pricing-row:not(:first-child) > div:not(:first-child) { font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: var(--ink); }
.pricing-note { font-family: var(--font-serif); font-style: italic; font-size: 13px; color: var(--charcoal); opacity: 0.75; margin-top: var(--space-3); }

/* Simple contact card — for experimental tours with no fixed price/calendar yet */
.contact-card {
  background: var(--white);
  border: 1px solid var(--ink-16);
  padding: var(--space-5);
  max-width: 560px;
  text-align: center;
}
@media (min-width: 640px) { .contact-card { padding: var(--space-7); } }
.contact-card p.note {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--charcoal);
  max-width: 440px;
  margin: 0 auto var(--space-5) auto;
}
@media (min-width: 640px) { .contact-card p.note { font-size: 16px; margin-bottom: var(--space-6); } }
.contact-card .btn { margin: 0 auto; }

/* Pill groups — duration, start time, or any other single-choice selector.
   Each .pill-group on a page is independent (see initPillGroups in main.js). */
.pill-group-label { margin-bottom: var(--space-3); }
.pill-group { display: flex; gap: var(--space-3); margin-bottom: var(--space-6); flex-wrap: wrap; }
.pill {
  font-family: var(--font-sans); font-weight: 600; font-size: 14px;
  padding: 10px 18px; min-height: 44px; border: 1px solid var(--ink); color: var(--ink);
  background: transparent; cursor: pointer;
}
.pill.active { background: var(--ink); color: var(--cream); }

/* Booking widget — deliberately minimal: a group-size stepper, a one-line
   price readout, and the real Cal.com calendar, nothing else competing for
   attention. On mobile it stacks (controls above the calendar); from 900px
   the controls move into a narrow column beside the calendar so the whole
   thing reads at a glance. */
.booking-widget { background: var(--white); border: 1px solid var(--ink-16); }
/* From 1120px: controls in a narrow column beside a wide calendar. The
   calendar column is kept generous on purpose — at ~940px+ Cal.com lays
   the month grid and the time slots side by side instead of stacked, which
   is much shorter and fits in one glance. The whole widget is capped and
   centred so it doesn't sprawl across very wide screens. */
@media (min-width: 1120px) {
  .booking-widget {
    display: grid; grid-template-columns: 260px minmax(0, 1fr);
    align-items: stretch; max-width: 1360px; margin-inline: auto;
  }
}
.booking-controls {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3) var(--space-4);
  padding: var(--space-4); border-bottom: 1px solid var(--ink-12);
  font-family: var(--font-sans); font-size: 14px; color: var(--charcoal);
}
@media (min-width: 640px) { .booking-controls { padding: var(--space-5) var(--space-6); } }
@media (min-width: 1120px) {
  .booking-controls {
    flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-5);
    border-bottom: none; border-right: 1px solid var(--ink-12);
    padding: var(--space-7) var(--space-6);
  }
}
.booking-price {
  margin-left: auto; font-weight: 600; font-size: 15px; color: var(--ink);
}
@media (min-width: 1120px) { .booking-price { margin-left: 0; font-size: 17px; } }
.booking-price span { font-weight: 400; color: var(--charcoal); }
@media (min-width: 1120px) { .booking-price span { display: block; margin-top: 2px; } }
.booking-cal { padding: var(--space-4); }
@media (min-width: 640px) { .booking-cal { padding: var(--space-6); } }

/* Real Cal.com inline calendar, dropped into .booking-cal by
   js/main.js -> initCalBooking. Cal.com sizes its own iframe; this just
   gives it room so it doesn't render squashed while it loads. */
.cal-inline-target { min-height: 560px; }
.booking-cal { position: relative; }
/* Aviso mientras Cal.com trae el calendario (js/main.js). Se quita solo en
   cuanto aparece el iframe real. */
.booking-loading {
  position: absolute; inset: var(--space-4);
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3); text-align: center;
  background: var(--white);
}
.booking-cal.is-loading .booking-loading { display: flex; }
.booking-loading::before {
  content: ""; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--ink-16); border-top-color: var(--ink);
  animation: tlw-spin 0.8s linear infinite;
}
@keyframes tlw-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .booking-loading::before { animation: none; } }
.booking-fallback { font-family: var(--font-serif); font-size: 15px; color: var(--charcoal); margin: 0; }
.booking-fallback a { color: var(--ink); text-decoration: underline; }

.group-stepper {
  display: flex; align-items: stretch; flex-shrink: 0;
  border: 1px solid var(--ink);
}
/* 44px es el mínimo cómodo para el pulgar; con 40 se falla y se cambia el
   tamaño del grupo sin querer, que además recarga el calendario. */
.group-stepper button {
  width: 44px; height: 44px; border: none; background: none; color: var(--ink);
  cursor: pointer; font-size: 17px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background-color 0.15s ease;
}
.group-stepper button:hover { background: var(--ink-12); }
.group-stepper button:active { background: var(--ink-16); }
.group-stepper span {
  font-family: var(--font-sans); font-weight: 600; font-size: 15px;
  min-width: 34px; text-align: center; display: flex; align-items: center; justify-content: center;
  border-left: 1px solid var(--ink-16); border-right: 1px solid var(--ink-16);
}

/* Secure-payment reassurance, shown once per booking widget just above the
   Cal.com calendar — addresses the "will my card be safe" hesitation right
   before the visitor reaches the real Stripe payment form. */
.booking-trust {
  display: block; position: relative; flex-basis: 100%; padding-left: 21px;
  font-family: var(--font-sans); font-size: 12.5px; line-height: 1.5; color: var(--moss-text);
}
.booking-trust svg { position: absolute; left: 0; top: 3px; flex-shrink: 0; }
/* Stripe's own brand purple, not the site's ink — a visitor who half-
   recognises the color (or clicks through to stripe.com to check) gets
   more assurance than the word "Stripe" in plain body text ever would. */
.booking-trust a { color: #635BFF; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(99, 91, 255, 0.35); text-underline-offset: 2px; }
.booking-trust a:hover { color: #4b42e0; }
@media (min-width: 1120px) { .booking-trust { flex-basis: auto; max-width: 230px; } }

/* Plan — 3 steps (home) */
.plan-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 640px) { .plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } }
@media (min-width: 960px) { .plan-grid { gap: var(--space-8); } }
.plan-number {
  font-family: var(--font-sans); font-weight: 600; font-size: 34px; line-height: 1;
  color: var(--ochre); margin-bottom: var(--space-3);
}
@media (min-width: 640px) { .plan-number { font-size: 40px; } }
.plan-step h3 { font-size: 18px; margin-bottom: var(--space-2); }
@media (min-width: 640px) { .plan-step h3 { font-size: 19px; } }
.plan-step p { font-size: 15px; line-height: 1.6; }

/* Reviews (home) — real link now, ready for the TripAdvisor widget later */
.reviews-card {
  display: flex; flex-direction: column; gap: var(--space-5);
  background: var(--white); border: 1px solid var(--ink-12);
  padding: var(--space-6);
}
@media (min-width: 640px) {
  .reviews-card { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-6); }
}
.reviews-card-text p.lead-small {
  font-family: var(--font-serif); font-size: 17px; line-height: 1.5; color: var(--ink); margin: 0 0 var(--space-2) 0;
}
.reviews-card-text p.sub { font-size: 14px; color: var(--charcoal); opacity: 0.75; margin: 0; }

/* Testimonials — real TripAdvisor reviews, transcribed by hand.
   CSS columns rather than a flex/grid row: real reviews run from one line to
   three paragraphs, and any row-based layout leaves a crater under the short
   ones. Columns flow each card into the shortest column and balance the
   height automatically, so the wall stays tight whatever lengths come in.
   Trade-off: reading order is down each column, not across, which is fine
   for a set of independent quotes. */
.testimonial-grid { column-count: 1; column-gap: var(--space-4); }
@media (min-width: 640px) { .testimonial-grid { column-count: 2; } }
@media (min-width: 960px) { .testimonial-grid { column-count: 3; } }

.testimonial {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--white); border: 1px solid var(--ink-12);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}
/* A single review (Lourdes) shouldn't stretch to a full-width slab. */
.testimonial-grid.single { column-count: 1; max-width: 560px; }

.testimonial-stars { display: flex; gap: 3px; color: var(--ochre); }
.testimonial-title {
  font-family: var(--font-sans); font-weight: 600; font-size: 17px;
  line-height: 1.3; color: var(--ink); margin: 0;
}
.testimonial-text {
  font-family: var(--font-serif); font-size: 15px; line-height: 1.6;
  color: var(--charcoal); margin: 0;
}
.testimonial-text + .testimonial-text { margin-top: calc(var(--space-2) * -1); }
.testimonial-meta {
  margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--ink-12);
  font-family: var(--font-sans); font-size: 13px; line-height: 1.5;
}
.testimonial-author { font-weight: 600; color: var(--ink); }
.testimonial-origin { color: var(--charcoal); opacity: 0.7; }
.testimonial-note {
  font-family: var(--font-serif); font-style: italic; font-size: 12px;
  color: var(--charcoal); opacity: 0.7; margin: var(--space-1) 0 0 0;
}
.testimonial-source {
  font-family: var(--font-sans); font-size: 13px; color: var(--charcoal);
  opacity: 0.75; margin: 0 0 var(--space-5) 0;
}
.testimonial-source strong { color: var(--ink); opacity: 1; }

/* Gallery (tour pages) — flexbox + justify-content:center rather than a
   fixed-column grid: when the photo count isn't an exact multiple of the
   row size, the leftover tiles in the last row center as a group instead
   of stranding a lone photo or an off-balance gap on one side. Works for
   any number of photos, so a page can grow its gallery without needing a
   layout fix each time. */
.gallery-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3);
}
@media (min-width: 640px) { .gallery-grid { gap: var(--space-4); } }
.gallery-grid .photo-placeholder {
  aspect-ratio: 1 / 1;
  flex: 0 0 calc((100% - var(--space-3)) / 2);
}
@media (min-width: 640px) {
  .gallery-grid .photo-placeholder { flex-basis: calc((100% - 2 * var(--space-4)) / 3); }
}
.gallery-grid .photo-placeholder img { transition: transform 0.6s ease; }
.gallery-grid .photo-placeholder:hover img { transform: scale(1.06); }
.gallery-grid .photo-placeholder { cursor: zoom-in; }

/* Gallery lightbox — built once by js/main.js (initGalleryLightbox) and
   appended to <body>; opens on any gallery photo with infinite prev/next
   looping, a close button, click-on-backdrop-to-close, arrow keys and Esc. */
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(23, 58, 61, 0.94);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-5) var(--space-4);
  opacity: 0; visibility: hidden;
  transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}
.lightbox-overlay.open {
  opacity: 1; visibility: visible;
  transition: opacity 0.28s ease;
}
.lightbox-figure {
  position: relative; z-index: 1; margin: 0;
  max-width: min(100%, 1100px); max-height: 100%;
  display: flex; flex-direction: column; align-items: center;
}
.lightbox-figure img {
  display: block; max-width: 100%; max-height: 72vh; width: auto; height: auto;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  opacity: 0; transform: scale(0.97);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.lightbox-figure img.is-loaded { opacity: 1; transform: scale(1); }
.lightbox-caption {
  margin: var(--space-4) 0 0 0;
  font-family: var(--font-serif); font-style: italic; font-size: 13px;
  color: var(--cream); opacity: 0.8; text-align: center; max-width: 560px;
}
@media (min-width: 640px) { .lightbox-caption { font-size: 14px; } }
/* Dark glass discs (not the site's usual sharp-edged chrome, on purpose —
   these float over an unpredictable photo, so they need to read reliably
   against both light and dark parts of it, the way the hero's glass panel
   does) rather than the faint light-on-light tint that made the arrows
   nearly disappear against a bright photo edge. */
.lightbox-close, .lightbox-nav {
  position: fixed; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(15, 39, 41, 0.6);
  border: 1px solid rgba(244, 239, 229, 0.22);
  color: var(--cream);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(15, 39, 41, 0.8); border-color: rgba(244, 239, 229, 0.4); }
.lightbox-close {
  top: var(--space-3); right: var(--space-3); width: 40px; height: 40px;
}
.lightbox-close:hover { transform: rotate(90deg); }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 44px; height: 44px; }
.lightbox-nav:hover { transform: translateY(-50%) scale(1.06); }
.lightbox-prev { left: var(--space-3); }
.lightbox-next { right: var(--space-3); }
.lightbox-counter {
  position: fixed; z-index: 2; bottom: var(--space-4); left: 50%; transform: translateX(-50%);
  font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.04em; color: var(--cream); opacity: 0.65;
}
@media (min-width: 640px) {
  .lightbox-close { top: var(--space-5); right: var(--space-5); width: 44px; height: 44px; }
  .lightbox-nav { width: 48px; height: 48px; }
  .lightbox-prev { left: var(--space-5); }
  .lightbox-next { right: var(--space-5); }
}
@media (min-width: 960px) {
  .lightbox-figure img { max-height: 78vh; }
  .lightbox-prev { left: var(--space-7); }
  .lightbox-next { right: var(--space-7); }
}

/* FAQ */
.faq-list { display: flex; flex-direction: column; max-width: 760px; }
.faq-item { border-bottom: 1px solid var(--ink-12); }
.faq-item:first-child { border-top: 1px solid var(--ink-12); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: rotate(45deg);
  flex-shrink: 0;
  margin-top: 6px;
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: 10px; }
.faq-q { font-family: var(--font-sans); font-weight: 600; font-size: 16px; color: var(--ink); margin: 0; }
@media (min-width: 640px) { .faq-q { font-size: 17px; } }
.faq-a { font-size: 15px; line-height: 1.6; margin: 0 0 var(--space-4) 0; }

/* Footer */
.site-footer { width: 100%; background: var(--ink); }
.site-footer .container { padding: var(--space-7) var(--space-4) var(--space-5); }
@media (min-width: 640px) { .site-footer .container { padding: var(--space-8) var(--space-5) var(--space-6); } }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); } }
@media (min-width: 960px) { .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.footer-logo { display: flex; align-items: center; margin-bottom: var(--space-4); }
.footer-logo img { display: block; height: 26px; width: auto; }
.footer-tagline { font-family: var(--font-serif); font-style: italic; font-size: 15px; color: var(--cream); opacity: 0.75; }
.footer-col-label { font-family: var(--font-sans); font-weight: 600; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ochre); margin: 0 0 var(--space-4) 0; }
/* Footer links were 27px tall on a phone — technically tappable, but they sit
   in a stack of eleven and a near miss opens the wrong tour. Padding brings
   each one to a 44px target on touch screens and collapses back on desktop,
   where the pointer is precise and the extra height would just pad the page. */
.footer-col a, .footer-col p { display: block; font-family: var(--font-serif); font-size: 15px; line-height: 1.8; color: var(--cream); opacity: 0.85; margin: 0 0 4px 0; transition: color 0.15s ease, opacity 0.15s ease; }
@media (max-width: 959px) {
  .footer-col a { min-height: 44px; display: flex; align-items: center; margin-bottom: 0; }
}
.footer-col a:hover { color: var(--ochre); opacity: 1; }
.footer-bottom {
  margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid rgba(244, 239, 229, 0.16);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3);
}
@media (min-width: 640px) {
  .footer-bottom { margin-top: var(--space-7); flex-direction: row; align-items: center; justify-content: space-between; }
}
.footer-bottom-left { font-family: var(--font-sans); font-size: 12px; color: var(--cream); opacity: 0.6; }
.footer-bottom-right { display: flex; gap: var(--space-5); flex-wrap: wrap; align-items: center; }
.footer-bottom-right a,
/* "Insured & independent guide" is plain text, not a link (it used to be an
   <a href="#"> that went nowhere). Without this it inherits the dark body
   colour and disappears against the ink footer. */
.footer-bottom-right > span { font-family: var(--font-sans); font-size: 12px; opacity: 0.6; color: var(--cream); transition: color 0.15s ease, opacity 0.15s ease; }
/* EN/ES lives down here and is the one control a Spanish speaker on an English
   page needs to hit first — 19px was far too small a target for it. */
.footer-lang { display: inline-flex; align-items: center; gap: var(--space-2); }
.footer-lang a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.footer-lang a[aria-current="true"] { opacity: 1; font-weight: 600; color: var(--ochre); }
.footer-lang span { color: var(--cream); opacity: 0.35; }
.footer-bottom-right a:hover { color: var(--ochre); opacity: 1; }

/* Floating "see tours" shortcut (home only) — hidden while #tours is
   already in view, via IntersectionObserver in main.js */
.floating-cta {
  position: fixed;
  bottom: var(--space-4);
  right: var(--space-4);
  z-index: 25;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--ink);
  color: var(--cream);
  padding: 12px 20px;
  min-height: 44px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  border: none;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.floating-cta:hover { background: #0f2729; color: var(--cream); }
.floating-cta.hidden { opacity: 0; transform: translateY(12px); pointer-events: none; }
@media (min-width: 640px) { .floating-cta { bottom: var(--space-5); right: var(--space-5); } }

/* Floating "book now" card (tour pages) — a discrete card, not an edge-to-
   edge bar. Appears fast, as soon as scrolling starts (pages are short),
   and hides again once the real booking section is on screen, so it never
   sits on top of what it points to. */
.sticky-book-bar {
  position: fixed;
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 25;
  background: var(--white);
  border: 1px solid var(--ink-16);
  transform: translateY(140%);
  transition: transform 0.2s ease;
}
.sticky-book-bar.visible { transform: translateY(0); }
@media (min-width: 640px) {
  .sticky-book-bar { left: auto; right: var(--space-5); bottom: var(--space-5); width: 380px; }
}
.sticky-book-bar-inner {
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
@media (min-width: 640px) { .sticky-book-bar-inner { padding: var(--space-4) var(--space-5); } }
.sticky-book-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sticky-book-name {
  font-family: var(--font-sans); font-weight: 600; font-size: 13px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (min-width: 640px) { .sticky-book-name { font-size: 14px; } }
.sticky-book-price { font-family: var(--font-sans); font-size: 12px; color: var(--charcoal); opacity: 0.8; }
@media (min-width: 640px) { .sticky-book-price { font-size: 13px; } }
.sticky-book-bar .btn { padding: 10px 18px; min-height: 40px; font-size: 13px; flex-shrink: 0; }
@media (min-width: 640px) { .sticky-book-bar .btn { padding: 12px 22px; min-height: 44px; font-size: 14px; } }

/* Skip link */
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--cream);
  padding: var(--space-3) var(--space-4); z-index: 100; font-family: var(--font-sans);
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

/* Scroll reveal — applied only via JS (initScrollReveal), so content is never
   hidden if JS fails to run. See js/main.js. */
.reveal {
  opacity: 0;
  translate: 0 18px;
  transition: opacity 0.6s ease, translate 0.6s ease;
}
.reveal.is-visible { opacity: 1; translate: 0 0; }

/* Legal pages (Aviso legal, Privacidad): plain long-form reading column. */
.legal-page { max-width: 760px; }
.legal-page h1 { margin-bottom: var(--space-5); }
.legal-page h2 { font-size: clamp(20px, 0.6vw + 18px, 26px); margin: var(--space-7) 0 var(--space-3) 0; }
.legal-page p, .legal-page li { font-size: 16px; line-height: 1.7; }
.legal-page p + p { margin-top: var(--space-3); }
.legal-page ul { padding-left: 1.2em; margin: var(--space-3) 0; }
.legal-page a { text-decoration: underline; text-underline-offset: 2px; }
.legal-table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0; font-size: 14px; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 10px 12px; border-top: 1px solid var(--ink-12); }
.legal-table th { font-family: var(--font-sans); font-weight: 600; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--moss-text); border-top: 0; }
@media (max-width: 639px) {
  /* stack the table on phones instead of forcing a sideways scroll */
  .legal-table thead { display: none; }
  .legal-table tr { display: block; border-top: 1px solid var(--ink-16); padding: var(--space-3) 0; }
  .legal-table td { display: block; border: 0; padding: 2px 0; }
  .legal-table td::before { content: attr(data-label) ": "; font-family: var(--font-sans); font-weight: 600; color: var(--moss-text); }
}



/* =========================================================================
   Pase de UI/UX, 19-09-2026. Foco en móvil, que es de donde llega el viajero
   (busca "pintxo tour" en el teléfono, muchas veces ya estando en la ciudad).
   ========================================================================= */

/* Cualquier ancla (#guide, #book, #footer-contact) quedaba tapada por la
   cabecera fija al saltar. Antes solo lo resolvían tres secciones sueltas. */
:target { scroll-margin-top: 88px; }
@media (min-width: 960px) { :target { scroll-margin-top: 104px; } }

/* Titulares: evita que la última palabra caiga sola en su línea. */
h1, h2, h3, .guide-quote, .section-quote p { text-wrap: balance; }

/* --- Hero en móvil ---------------------------------------------------------
   Los dos botones tenían ancho según su texto, así que quedaban escalonados
   y el segundo parecía menos importante de lo que es. Apilados y a todo el
   ancho leen como dos opciones al mismo nivel y son más fáciles de acertar
   con el pulgar. */
@media (max-width: 639px) {
  .hero-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-price { text-align: center; }
  .hero-photo .hero-copy { padding: var(--space-5); }
}

/* --- Barras fijas y el gesto del iPhone ------------------------------------
   En iPhone sin botón físico, la franja inferior se come lo que haya pegado
   al borde. Sin esto, la barra de reserva queda bajo la barra del sistema. */
.sticky-book-bar { bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); }
.floating-cta { bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 640px) {
  .sticky-book-bar { bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); }
  .floating-cta { bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); }
}

/* --- Menú móvil ------------------------------------------------------------
   WhatsApp dentro del menú: es el canal real de contacto de Alex y antes solo
   aparecía en el pie, a toda una página de distancia. */
.nav-wa {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-3); padding: 12px 0;
  font-family: var(--font-sans); font-weight: 600; font-size: 16px; color: var(--ink);
  border-top: 1px solid var(--ink-12);
  min-height: 44px;
}
.nav-wa::before {
  content: ""; width: 18px; height: 18px; flex-shrink: 0;
  background: currentColor;
  -webkit-mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.7 14.9L2 22l5.3-1.4A10 10 0 1 0 12 2Zm5.6 14.2c-.2.7-1.3 1.3-1.8 1.3-.5.1-1 .2-3.4-.7-2.9-1.2-4.7-4.1-4.8-4.3-.1-.2-1.1-1.5-1.1-2.8 0-1.3.7-1.9 1-2.2.2-.2.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.8 2c.1.2.1.4 0 .5l-.3.5-.4.4c-.1.1-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.1 1 2 1.3 2.3 1.4.2.1.4.1.6-.1l.8-1c.2-.2.3-.2.6-.1l2 .9c.2.1.4.2.4.3.1.2.1.8-.1 1.5Z'/%3E%3C/svg%3E");
  mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.7 14.9L2 22l5.3-1.4A10 10 0 1 0 12 2Zm5.6 14.2c-.2.7-1.3 1.3-1.8 1.3-.5.1-1 .2-3.4-.7-2.9-1.2-4.7-4.1-4.8-4.3-.1-.2-1.1-1.5-1.1-2.8 0-1.3.7-1.9 1-2.2.2-.2.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.8 2c.1.2.1.4 0 .5l-.3.5-.4.4c-.1.1-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.1 1 2 1.3 2.3 1.4.2.1.4.1.6-.1l.8-1c.2-.2.3-.2.6-.1l2 .9c.2.1.4.2.4.3.1.2.1.8-.1 1.5Z'/%3E%3C/svg%3E");
}

/* Idioma en la cabecera: antes solo estaba en el pie, así que un hispano-
   hablante que cae en la página en inglés tenía que recorrer toda la página
   para cambiarlo. */
.nav-lang {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-2); padding-top: var(--space-3);
  border-top: 1px solid var(--ink-12);
  font-family: var(--font-sans); font-size: 14px;
}
.nav-lang a {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--charcoal); font-weight: 500;
}
.nav-lang a[aria-current="true"] { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.nav-lang a:hover { color: var(--ochre); }
.nav-lang span { color: var(--ink-25); }

@media (min-width: 960px) {
  .nav-wa { display: none; }            /* en escritorio ya está "Contact" */
  .nav-lang {
    margin: 0; padding: 0; border: 0; gap: 2px; font-size: 13px;
    margin-left: var(--space-2);
  }
  .nav-lang a { min-width: 0; min-height: 0; padding: 4px 6px; }
}

/* --- Reseñas plegadas ------------------------------------------------------
   Tres reseñas largas seguidas son un muro de texto en un teléfono. Se
   muestran las primeras líneas y se despliega el resto a petición; las cortas
   no se tocan (lo decide el JS midiendo cada tarjeta). */
.testimonial-body { position: relative; }
/* Dentro del pliegue los párrafos ya no son hijos del flex de la tarjeta, así
   que recuperan su propia separación. */
.testimonial-body .testimonial-text + .testimonial-text { margin-top: var(--space-3); }
.testimonial-body.is-clamped {
  max-height: 7.8em; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
.testimonial-more {
  align-self: flex-start;
  background: none; border: 0; padding: 6px 0; margin: 0;
  font-family: var(--font-sans); font-weight: 600; font-size: 14px;
  color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px;
}
.testimonial-more:hover { color: var(--ochre); }
.testimonial-more::after {
  content: ""; width: 7px; height: 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); margin-top: -4px;
  transition: transform 0.15s ease;
}
.testimonial-more[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 3px; }

/* --- Detalles táctiles -----------------------------------------------------
   En un teléfono no hay hover: sin respuesta al toque, la tarjeta parece
   muerta mientras carga la página siguiente. */
@media (hover: none) {
  .tour-card:active, .testimonial:active { transform: scale(0.995); }
  .btn:active { opacity: 0.9; }
}
.tour-card, .testimonial { transition: transform 0.15s ease, box-shadow 0.2s ease; }
.gallery-grid .photo-placeholder { cursor: zoom-in; }