/* =========================================================
   MERIDIANO — Identidad: fresca, clara, verde predominante
   Paleta: blanco, verde menta/bosque, azul como acento secundario
   Tipografía: Lora (display) + Inter (cuerpo) + IBM Plex Mono (datos)
   ========================================================= */

:root{
  --forest-900: #123328;
  --forest-800: #17402f;
  --forest-700: #1f5039;

  --surface: #ffffff;
  --surface-soft: #eef8f1;
  --surface-soft-2: #e0f1e6;

  --green: #2f9e5c;
  --green-bright: #3fbf72;
  --green-pale: #d8f3e2;
  --green-text: #1f8248;   /* verde con contraste AA para texto/enlaces sobre blanco */

  --blue: #2f7fb8;
  --blue-dim: #1f5f8f;

  --text: #16261f;
  --text-soft: #55665c;
  --white: #ffffff;

  --font-display: "Lora", serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  --radius-card: 6px;
  --max-width: 1180px;
  --edge: clamp(1.25rem, 4vw, 4rem);
}

*, *::before, *::after{ box-sizing: border-box; }

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

html{ scroll-behavior: smooth; }
body{ overflow-x: clip; }          /* atrapa cualquier desborde lateral */

body{
  margin: 0;
  position: relative;   /* ancla la .route-line a la altura real de la página */
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }
button{ font-family: inherit; cursor: pointer; }
:focus-visible{ outline: 2px solid var(--blue); outline-offset: 3px; }

h1, h2, h3{
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  color: var(--forest-900);
  letter-spacing: -0.01em;
}

em{
  font-style: italic;
  font-weight: 500;
}

.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-text);
  margin: 0 0 0.75rem;
}

/* ---------- línea de ruta decorativa (firma visual) ---------- */
.route-line{
  display: none;   /* retirada: cruzaba el contenido en pantallas angostas */
  position: absolute;
  top: 0; left: 50%;
  height: 100%;
  width: 4px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.3;
}
.route-line line{ stroke: var(--blue); stroke-width: 2; }

/* ---------- header ---------- */
.site-header{
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(47, 158, 92, 0.18);
}
.header-inner{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.9rem var(--edge);
  display: flex; align-items: center; justify-content: space-between;
}
.brand{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--forest-900);
  display: flex; align-items: center; gap: 0.5rem;
}
.brand-mark{ color: var(--green); }
.main-nav{ display: none; align-items: center; gap: 2rem; }
@media (min-width: 861px){
  .main-nav{ display: flex; }
}
.main-nav a{
  color: var(--text-soft);
  font-size: 0.92rem;
  font-weight: 500;
  transition: color 0.2s ease;
}
.main-nav a:hover{ color: var(--green); }
.nav-cta{
  background: var(--green);
  color: var(--white) !important;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  font-weight: 600 !important;
}
.nav-cta:hover{ background: var(--green-bright); }

.nav-toggle{
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 0.4rem;
}
.nav-toggle span{ width: 22px; height: 2px; background: var(--forest-900); }

/* ---------- hero ---------- */
.hero{
  position: relative;
  min-height: 88vh;
  min-height: 88svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--surface-soft);
}
.hero-carousel{
  position: absolute; inset: 0;
}
.hero-slide{
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) brightness(0.92);
  transform: scale(1.03);
  opacity: 0;
  transition: opacity 1.6s ease;
}
.hero-slide.is-active{ opacity: 1; }
.hero-overlay{
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(18,51,40,0.88) 0%, rgba(18,51,40,0.38) 50%, rgba(18,51,40,0.15) 100%);
}
.hero-content{
  position: relative;
  z-index: 2;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--edge) 5rem;
  width: 100%;
}
.hero h1{
  color: var(--white);
  font-size: clamp(2.2rem, 5.4vw, 4rem);
  line-height: 1.08;
  max-width: 16ch;
}
.hero-sub{
  color: var(--surface-soft-2);
  max-width: 46ch;
  font-size: 1.05rem;
  margin: 1.4rem 0 2.1rem;
}
.hero-actions{ display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-coords{
  position: absolute;
  top: 1.75rem; right: var(--edge);
  z-index: 2;
  font-family: var(--font-mono);
  color: var(--surface-soft-2);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.hero-dots{
  position: absolute;
  z-index: 2;
  right: var(--edge);
  bottom: 2.4rem;
  display: flex;
  gap: 0.5rem;
}
.hero-dots button{
  width: 22px; height: 3px;
  background: rgba(255,255,255,0.35);
  border: none;
  border-radius: 2px;
  padding: 0;
  transition: background 0.25s ease;
}
.hero-dots button.is-active{ background: var(--green-bright); }

.btn{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: var(--green); color: var(--white); }
.btn-primary:hover{ background: var(--green-bright); }
.btn-wide{ width: 100%; }

/* ---------- sections ---------- */
.section{
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 6rem var(--edge);
}
.section-dark{
  max-width: none;
  background: var(--surface-soft);
  color: var(--text);
}
.section-dark .section-head{ max-width: var(--max-width); margin: 0 auto 3rem; padding: 0; }
.section-dark > *:not(.section-head){ max-width: var(--max-width); margin-left: auto; margin-right: auto; }
.section-dark h2{ color: var(--forest-900); }
.section-dark .section-sub{ color: var(--text-soft); }

.section-head{ max-width: 62ch; margin-bottom: 3rem; }
.section-head h2{ font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.section-sub{ color: var(--text-soft); margin-top: 0.9rem; font-size: 1rem; }

/* ---------- filtros ---------- */
.filters{ display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2.5rem; }
.filter-chip{
  background: var(--surface);
  border: 1px solid rgba(22,38,31,0.15);
  color: var(--text);
  padding: 0.45rem 1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-family: var(--font-mono);
  transition: all 0.2s ease;
}
.filter-chip:hover{ border-color: var(--green); }
.filter-chip.is-active{ background: var(--green); border-color: var(--green); color: var(--white); }

/* ---------- tarjetas "boarding pass" (firma visual) ---------- */
.tickets-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(370px, 100%), 1fr));
  gap: 2.25rem;
}

.ticket{
  background: var(--white);
  border: 1px solid rgba(22,38,31,0.08);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(18,51,40,0.06), 0 12px 24px -18px rgba(18,51,40,0.25);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}
.ticket:hover{
  box-shadow: 0 1px 2px rgba(18,51,40,0.08), 0 20px 34px -18px rgba(18,51,40,0.32);
  border-color: rgba(47,158,92,0.35);
}
.ticket.is-visible{ opacity: 1; transform: translateY(0); }

.ticket-photo{
  height: 250px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.ticket-spots{
  position: absolute; top: 0.85rem; left: 0.85rem;
  background: rgba(18,51,40,0.82);
  color: var(--green-pale);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  letter-spacing: 0.04em;
}

.ticket-body{ padding: 1.75rem 1.75rem 0; }
.ticket-dest{ font-size: 1.5rem; margin-bottom: 0.25rem; }
.ticket-region{ font-family: var(--font-mono); font-size: 0.76rem; color: var(--blue-dim); text-transform: uppercase; letter-spacing: 0.08em; }
.ticket-desc{ font-size: 0.98rem; color: var(--text-soft); margin: 1rem 0 0; }
.ticket-view{
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--green-text);
  font-weight: 500;
}
.ticket:hover .ticket-view{ color: var(--green-bright); }

.ticket-stub{
  margin-top: 1.6rem;
  border-top: 2px dashed rgba(22,38,31,0.16);
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem 1.2rem;
  padding: 1.3rem 1.75rem 1.75rem;
  background: var(--surface-soft);
  font-family: var(--font-mono);
  font-size: 0.84rem;
}
.ticket-stub::before, .ticket-stub::after{
  content: "";
  position: absolute;
  top: -9px;
  width: 18px; height: 18px;
  background: var(--surface);
  border-radius: 50%;
}
.ticket-stub::before{ left: -9px; }
.ticket-stub::after{ right: -9px; }
.ticket-photo, .ticket-body{ background: var(--white); }

.stub-item span{ display: block; color: var(--text-soft); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.15rem; }
.stub-item strong{ color: var(--text); font-weight: 500; }

.ticket-cta{
  grid-column: 1 / -1;
  margin-top: 0.4rem;
  background: var(--green);
  color: var(--white);
  border: none;
  border-radius: 999px;
  padding: 0.65rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.88rem;
  transition: background 0.2s ease;
}
.ticket-cta:hover{ background: var(--green-bright); }

/* ---------- galería ---------- */
.gallery{
  columns: 4 220px;
  column-gap: 1rem;
}
.gallery-item{
  break-inside: avoid;
  margin-bottom: 1rem;
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  cursor: pointer;
}
.gallery-item img{ width: 100%; transition: transform 0.5s ease; }
.gallery-item:hover img{ transform: scale(1.06); }
.gallery-caption{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0.9rem 1rem 0.7rem;
  background: linear-gradient(0deg, rgba(18,51,40,0.82), transparent);
  color: var(--white);
  font-size: 0.82rem;
  font-family: var(--font-mono);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.gallery-item:hover .gallery-caption{ opacity: 1; transform: translateY(0); }

/* ---------- reseñas / postales ---------- */
.postcards{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 1.5rem;
}
.postcard{
  background: var(--white);
  border: 1px solid rgba(22,38,31,0.1);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  position: relative;
}
.postcard-stamp{
  position: absolute; top: 1rem; right: 1rem;
  width: 42px; height: 52px;
  border: 2px dashed var(--green);
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--green);
  text-align: center;
  line-height: 1.1;
  transform: rotate(6deg);
}
.postcard-stars{ color: var(--green); font-size: 0.95rem; letter-spacing: 0.12em; margin-bottom: 0.7rem; }
.postcard-quote{ font-size: 0.95rem; color: var(--text); margin: 0 0 1.1rem; }
.postcard-author{ font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-soft); }
.postcard-author strong{ color: var(--text); font-family: var(--font-body); font-weight: 600; }

/* ---------- reserva: boleto de dos paneles ---------- */
.booking-ticket{
  max-width: 960px;
  margin: 0 auto;
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 50px -25px rgba(18,51,40,0.35);
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
}

.booking-aside{
  position: relative;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  color: var(--surface-soft-2);
  overflow: hidden;
  border-right: 2px dashed rgba(255,255,255,0.3);
}
.booking-aside-bg{
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) brightness(0.55);
}
.booking-aside-overlay{
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(18,51,40,0.9), rgba(18,51,40,0.72));
}
.booking-aside::before, .booking-aside::after{
  content: "";
  position: absolute;
  right: -12px;
  width: 24px; height: 24px;
  background: var(--surface-soft);
  border-radius: 50%;
  z-index: 2;
}
.booking-aside::before{ top: -12px; }
.booking-aside::after{ bottom: -12px; }

.booking-aside-content{ position: relative; z-index: 1; }
.booking-aside-content .eyebrow{ color: var(--green-bright); }
.booking-aside-content h3{
  color: var(--white);
  font-size: 1.5rem;
  line-height: 1.25;
  margin-bottom: 0.9rem;
}
.booking-aside-content p{ font-size: 0.92rem; line-height: 1.6; margin: 0 0 1.3rem; }
.booking-includes{
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.booking-includes li{ padding-left: 1.2rem; position: relative; }
.booking-includes li::before{
  content: "✦";
  position: absolute; left: 0;
  color: var(--green-bright);
  font-size: 0.7rem;
}
.booking-coords{
  position: relative; z-index: 1;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(224,241,230,0.6);
  margin: 0;
}

.booking-form{
  background: var(--white);
  padding: clamp(1.75rem, 4vw, 2.75rem);
}
.form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.field{ margin-bottom: 1.3rem; display: flex; flex-direction: column; gap: 0.45rem; }
.field label{ font-size: 0.78rem; color: var(--text-soft); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; }
.field input, .field select, .field textarea{
  background: transparent;
  border: none;
  border-bottom: 1.5px solid rgba(22,38,31,0.18);
  color: var(--text);
  padding: 0.55rem 0.1rem;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 1rem;                 /* 16px: por debajo, iOS hace zoom al enfocar */
  max-width: 100%;
  transition: border-color 0.2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--green);
}
.field textarea{ resize: vertical; border: 1.5px solid rgba(22,38,31,0.18); border-radius: 6px; padding: 0.6rem 0.75rem; }
.field textarea:focus{ border-color: var(--green); }
.field-error{ font-size: 0.78rem; color: #c1553a; min-height: 1em; }
.booking-form .btn-wide{ margin-top: 0.5rem; }

.boarding-confirm{
  max-width: 960px;
  margin: 2rem auto 0;
  background: var(--green-pale);
  color: var(--text);
  border-radius: var(--radius-card);
  padding: 1.5rem 1.8rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  border-left: 4px solid var(--green);
}
.boarding-confirm strong{ display: block; font-family: var(--font-display); font-size: 1.15rem; margin-bottom: 0.4rem; color: var(--forest-900); }

/* ---------- footer ---------- */
.site-footer{ background: var(--forest-900); color: var(--surface-soft-2); padding: 4rem var(--edge) 2rem; }
.footer-inner{
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex; justify-content: space-between; gap: 3rem; flex-wrap: wrap;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-brand{ font-family: var(--font-display); font-size: 1.2rem; color: var(--white); max-width: 26ch; }
.footer-brand p{ font-family: var(--font-body); font-size: 0.85rem; color: var(--surface-soft-2); margin-top: 0.6rem; }
.footer-cols{ display: flex; gap: 3.5rem; flex-wrap: wrap; }
.footer-cols h3{ font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--green-bright); margin-bottom: 0.9rem; }
.footer-cols a{ display: block; font-size: 0.88rem; margin-bottom: 0.55rem; color: var(--surface-soft-2); }
.footer-cols a:hover{ color: var(--green-bright); }
.footer-legal{ max-width: var(--max-width); margin: 1.5rem auto 0; font-size: 0.78rem; color: rgba(224,241,230,0.55); text-align: center; }

/* ---------- modal de itinerario ---------- */
.itinerary-modal{
  position: fixed; inset: 0; z-index: 110;
  background: rgba(18,51,40,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.itinerary-modal[hidden]{ display: none; }

.itinerary-panel{
  position: relative;
  background: var(--white);
  width: min(640px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  border-radius: 10px;
  box-shadow: 0 30px 60px -20px rgba(18,51,40,0.45);
  padding: 0 0 2rem;
}
.itinerary-close{
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(18,51,40,0.55);
  border: none; color: var(--white); font-size: 0.95rem;
}
.itinerary-header{
  height: 200px;
  background-size: cover;
  background-position: center;
  border-radius: 10px 10px 0 0;
  position: relative;
  display: flex; align-items: flex-end;
  padding: 1.5rem;
}
.itinerary-header::before{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(18,51,40,0.9), rgba(18,51,40,0.05));
  border-radius: 10px 10px 0 0;
}
.itinerary-header-text{ position: relative; z-index: 1; }
.itinerary-header-text .eyebrow{ color: var(--green-pale); }
.itinerary-header-text h3{ color: var(--white); font-size: 1.5rem; }
.itinerary-meta{
  display: flex; gap: 1.4rem; flex-wrap: wrap;
  margin: 1.4rem 1.75rem 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-soft);
}
.itinerary-meta strong{ display: block; color: var(--text); font-family: var(--font-body); font-size: 0.92rem; }

.itinerary-days{
  list-style: none;
  margin: 1.75rem 1.75rem 0;
  padding: 0;
}
.itinerary-day{ display: flex; gap: 1rem; }
.itinerary-day-marker{
  flex: none; width: 22px;
  display: flex; flex-direction: column; align-items: center;
}
.itinerary-day-dot{
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--blue);
  border: 2px solid var(--surface-soft-2);
  flex: none;
}
.itinerary-day-line{
  flex: 1; width: 2px; margin-top: 2px;
  background: repeating-linear-gradient(to bottom, var(--blue) 0 5px, transparent 5px 10px);
}
.itinerary-day:last-child .itinerary-day-line{ display: none; }
.itinerary-day-content{ padding-bottom: 1.6rem; }
.itinerary-day-content .day-label{
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--blue-dim);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.2rem;
}
.itinerary-day-content h4{ font-family: var(--font-display); font-size: 1.1rem; margin-bottom: 0.3rem; color: var(--forest-900); }
.itinerary-day-content p{ margin: 0; font-size: 0.9rem; color: var(--text-soft); }

.itinerary-book{ margin: 0.5rem 1.75rem 0; width: calc(100% - 3.5rem); }

/* ---------- lightbox ---------- */
.lightbox{
  position: fixed; inset: 0; z-index: 100;
  background: rgba(18,51,40,0.92);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 2rem;
}
.lightbox[hidden]{
  display: none;
}
.lightbox img{ max-height: 78vh; border-radius: 4px; }
.lightbox-caption{ color: var(--surface-soft-2); font-family: var(--font-mono); margin-top: 1rem; }
.lightbox-close{
  position: absolute; top: 1.5rem; right: 1.5rem;
  background: none; border: 1px solid var(--surface-soft-2); color: var(--white);
  width: 40px; height: 40px; border-radius: 50%; font-size: 1rem;
}

/* ---------- responsive ---------- */

/* ─── Tabletas y móviles ─── */
@media (max-width: 860px){
  .nav-toggle{ display: flex; }
  .form-row{ grid-template-columns: 1fr; }
  .gallery{ columns: 2 160px; }
  .booking-ticket{ grid-template-columns: 1fr; }
  .booking-form, .booking-aside{ min-width: 0; }   /* que encojan a la columna en vez de desbordar */
  .booking-aside{
    border-right: none;
    border-bottom: 2px dashed rgba(255,255,255,0.3);
  }
  .booking-aside::before, .booking-aside::after{
    right: auto; bottom: -12px;
  }
  .booking-aside::before{ left: -12px; top: auto; }
  .booking-aside::after{ right: -12px; }

  .main-nav.is-open{
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--surface);
    flex-direction: column;
    padding: 1.5rem var(--edge);
    gap: 1.2rem;
    border-bottom: 1px solid rgba(47,158,92,0.2);
  }

  /* Menos aire vertical: 6rem entre secciones es de escritorio */
  .section{ padding: 4rem var(--edge); }
  .section-head{ margin-bottom: 2.25rem; }
  .tickets-grid{ gap: 1.75rem; }
}

/* ─── Móviles ─── */
@media (max-width: 620px){
  .hero{ min-height: 82svh; }
  .hero-content{ padding-bottom: 3.5rem; }
  .hero h1{ max-width: 100%; }
  .hero-sub{ font-size: 1rem; margin: 1.1rem 0 1.7rem; }
  .hero-actions .btn{ width: 100%; text-align: center; }

  .section{ padding: 3.25rem var(--edge); }
  .booking-aside{ padding: 1.75rem; }
  .booking-aside-content h3{ font-size: 1.3rem; }

  .ticket-photo{ height: 200px; }
  .ticket-body{ padding: 1.35rem 1.35rem 0; }
  .ticket-stub{ padding: 1.1rem 1.35rem 1.35rem; }

  /* El modal necesita sus márgenes internos más chicos o no cabe el texto */
  .itinerary-modal{ padding: 0.75rem; }
  .itinerary-header{ height: 150px; padding: 1.1rem; }
  .itinerary-meta{ margin: 1.2rem 1.25rem 0; gap: 1rem; }
  .itinerary-days{ margin: 1.4rem 1.25rem 0; }
  .itinerary-book{ margin: 0.5rem 1.25rem 0; width: calc(100% - 2.5rem); }

  .lightbox{ padding: 1.25rem; }
  .lightbox img{ max-height: 70svh; }

  .footer-cols{ gap: 2rem 2.5rem; }
}

/* ─── Pantallas angostas ─── */
@media (max-width: 520px){
  .gallery{ columns: 1; }
  .hero-coords{ display: none; }
  .ticket-stub{ grid-template-columns: 1fr; gap: 0.9rem; }
  .filters{ margin-bottom: 1.75rem; }
}