/* ===== Responsive overrides for rise-retreat =====
   Fine-tunes the 960px breakpoint in page.css for narrow phones,
   plus the redesigned editorial footer and per-photo object-position rules.
*/

html, body { overflow-x: hidden; max-width: 100vw; }
img, video { max-width: 100%; height: auto; }

/* Small phones (≤480px): tighten section padding so two-column grids actually fit */
@media (max-width: 480px) {
  .reserva,
  .gancho, .para-ti, .promesa, .viaje, .incluye, .guias, .early,
  .form-rise, .cierre {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .reserva-grid { gap: 0 !important; }
  .rg-item { padding: 28px 14px !important; }
  .rg-num { font-size: 44px !important; }
  .rg-label { font-size: 11px !important; letter-spacing: 0.18em !important; }
  .rg-meta { font-size: 12px !important; }

  .hero-A, .hero-B-content, .hero-C { padding-left: 18px !important; padding-right: 18px !important; }
  .scarcity { padding: 10px 18px !important; font-size: 10px !important; letter-spacing: 0.10em !important; }

  .nav { padding: 14px 18px !important; }
  .nav-cta { padding: 10px 14px !important; font-size: 12px !important; letter-spacing: 0.10em !important; }

  .dest-num-overlay { font-size: 64px !important; top: 10px !important; left: 12px !important; }

  .act-stream-num { font-size: 36px !important; }
  .act-stream-body h4 { font-size: 24px !important; }

  #rise-tweaks {
    right: 8px !important;
    left: 8px !important;
    bottom: 8px !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* Very small phones (≤375px) */
@media (max-width: 380px) {
  .hero-B-title { font-size: clamp(72px, 22vw, 96px) !important; }
  .hero-B-quote { font-size: 14px !important; }
  .section-title { font-size: clamp(28px, 7vw, 36px) !important; }
}

/* =====================================================================
   FOOTER — sacred ribbon + editorial composition
   ===================================================================== */

.footer {
  background:
    radial-gradient(ellipse 1400px 700px at 50% -200px,
      rgba(162, 99, 88, 0.10) 0%,
      rgba(0, 0, 0, 0) 60%),
    var(--black);
  color: var(--misty);
  padding: 0 !important;
  margin-top: 0;
}

/* ---------- Marquee as ceremonial separator ---------- */
.footer-marquee {
  position: relative;
  padding: 52px 0 !important;
  margin: 0 !important;
  overflow: hidden;
  border-top: 1px solid rgba(162, 99, 88, 0.22) !important;
  border-bottom: 1px solid rgba(162, 99, 88, 0.22) !important;
}
.footer-marquee::before,
.footer-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 160px;
  z-index: 2;
  pointer-events: none;
}
.footer-marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--black) 0%, transparent 100%);
}
.footer-marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--black) 0%, transparent 100%);
}
.footer-marquee .marquee-track {
  font-family: 'Playfair Display', serif !important;
  font-style: italic !important;
  font-weight: 400;
  font-size: 34px !important;
  color: var(--misty) !important;
  gap: 44px !important;
  align-items: center !important;
  animation-duration: 48s !important;
}
/* Star markers (every 2nd span = ✦) — tint in rosewood, downsize */
.footer-marquee .marquee-track > span:nth-child(2n) {
  font-family: 'DM Sans', sans-serif !important;
  font-style: normal !important;
  font-size: 16px !important;
  color: var(--rosewood) !important;
  opacity: 0.7;
  letter-spacing: 0;
}

/* ---------- Footer body — centered editorial composition ---------- */
.footer-body {
  max-width: 880px;
  margin: 0 auto;
  padding: 96px 32px 56px;
  text-align: center;
}

.footer-brand {
  display: inline-flex;
  align-items: flex-end;
  gap: 22px;
  margin-bottom: 56px;
}
.footer-mark-symbol {
  font-family: 'Playfair Display', serif;
  font-size: 72px;
  font-weight: 500;
  line-height: 1;
  color: var(--misty);
  letter-spacing: -0.02em;
}
.footer-mark-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 0.34em;
  line-height: 1.65;
  color: var(--misty);
  opacity: 0.75;
  text-align: left;
  padding-bottom: 14px;
  font-weight: 500;
}

/* Hairline divider with rosewood ✦ centerpiece */
.footer-divider {
  position: relative;
  margin: 0 auto 56px;
  width: 90%;
  max-width: 520px;
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(162, 99, 88, 0.45) 25%,
    rgba(162, 99, 88, 0.45) 75%,
    transparent 100%);
}
.footer-divider-ornament {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--black);
  padding: 0 16px;
  font-size: 13px;
  color: var(--rosewood);
  letter-spacing: 0;
}

/* Three info columns */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  margin-bottom: 64px;
  text-align: center;
}
.footer-col-label {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--rosewood);
  font-weight: 600;
  margin-bottom: 18px;
}
.footer-col-content {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: var(--misty);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-col-content .serif {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 19px;
  color: var(--misty);
  line-height: 1.3;
  letter-spacing: 0.005em;
}
.footer-col-content a {
  color: var(--misty);
  text-decoration: none;
  border-bottom: 1px solid rgba(162, 99, 88, 0.55);
  padding-bottom: 1px;
  align-self: center;
  transition: color 200ms ease, border-color 200ms ease;
}
.footer-col-content a:hover {
  color: var(--rosewood);
  border-color: var(--rosewood);
}
.footer-col-content .muted {
  font-size: 12px;
  letter-spacing: 0.04em;
  opacity: 0.55;
  font-family: 'DM Sans', sans-serif;
}

/* Bottom legal */
.footer-bottom {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 232, 222, 0.42);
  padding-top: 32px;
  border-top: 1px solid rgba(245, 232, 222, 0.06);
}

/* ---------- Made with love by Baliole credit ---------- */
.foot-credit {
  max-width: 880px;
  margin: 0 auto;
  padding: 24px 32px 40px;
  text-align: center;
  border-top: 1px solid rgba(245, 232, 222, 0.04);
  font-family: 'DM Sans', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(245, 232, 222, 0.38);
}
.foot-credit a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color 200ms ease;
}
.foot-credit a:hover { color: var(--rosewood); }
.foot-credit .foot-heart {
  color: var(--rosewood);
  vertical-align: middle;
  flex-shrink: 0;
}

/* ---------- Footer · mobile (≤480px) ---------- */
@media (max-width: 480px) {
  .footer-marquee { padding: 32px 0 !important; }
  .footer-marquee::before,
  .footer-marquee::after { width: 64px; }
  .footer-marquee .marquee-track {
    font-size: 24px !important;
    gap: 28px !important;
  }
  .footer-marquee .marquee-track > span:nth-child(2n) {
    font-size: 13px !important;
  }

  .footer-body { padding: 64px 24px 36px; }

  .footer-brand { gap: 16px; margin-bottom: 40px; }
  .footer-mark-symbol { font-size: 56px; }
  .footer-mark-text {
    font-size: 10px;
    letter-spacing: 0.28em;
    padding-bottom: 11px;
  }

  .footer-divider { margin-bottom: 40px; width: 80%; }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 48px;
  }
  .footer-col { padding: 24px 0; }
  .footer-col + .footer-col {
    border-top: 1px solid rgba(245, 232, 222, 0.06);
  }
  .footer-col-label { margin-bottom: 12px; }
  .footer-col-content .serif { font-size: 17px; }

  .footer-bottom {
    font-size: 10px;
    letter-spacing: 0.18em;
    padding-top: 28px;
  }

  .foot-credit {
    padding: 22px 24px 32px;
    font-size: 10px;
    letter-spacing: 0.18em;
  }
}

/* =====================================================================
   Per-photo object-position tweaks — re-center subjects bundler cropped awkwardly
   ===================================================================== */
img[src*="9d6f621b.jpg"] { object-position: center 80% !important; }
img[src*="0bb75285.jpg"] { object-position: center 75% !important; }
img[src*="97e7abb5.jpg"] { object-position: center 65% !important; }
img[src*="7ab8be83.jpg"] { object-position: center center !important; }
img[src*="17ca0f98.jpg"] { object-position: center 70% !important; }
.guia-photo-sub img[src*="fd5c6171.jpg"] { object-position: center bottom !important; }