/* Pago en Recepcion — city page prototype */
.city-page { padding-top: 0; }
.city-hero {
  padding: clamp(52px, 8vw, 92px) 0 44px;
  background: linear-gradient(135deg, #eef6fa 0%, #f8fbfc 62%, #fff7eb 100%);
  border-bottom: 1px solid var(--line, #dce5eb);
}
.city-hero .container { max-width: 1080px; }
.city-eyebrow {
  margin: 0 0 12px;
  color: #123f64;
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.city-hero h1 { max-width: 800px; margin: 0; }
.city-hero .lead { max-width: 760px; margin: 20px 0 0; }
.city-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 36px;
  align-items: start;
  padding: 44px 0 22px;
}
.city-main { min-width: 0; }
.city-booking-panel {
  position: sticky;
  top: 94px;
  padding: 26px;
  background: linear-gradient(145deg, #ffffff, #f5fafc);
  border: 1px solid #d6e3ea;
  border-radius: 20px;
  box-shadow: 0 18px 44px rgba(15,45,70,.1);
}
.city-booking-panel h2 { margin: 0 0 10px; font-size: 1.45rem; }
.city-booking-panel p { margin: 0 0 18px; }
.city-booking-panel .btn { display: block; text-align: center; }
.booking-note { margin-top: 13px !important; color: #687684 !important; font-size: .88rem; line-height: 1.5; }
.city-checks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 42px;
}
.city-check {
  padding: 20px;
  background: #fff;
  border: 1px solid #dce5eb;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(15,45,70,.05);
}
.city-check-num {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  margin-bottom: 12px;
  border-radius: 50%;
  background: #123f64;
  color: #fff;
  font-weight: 850;
}
.city-check strong { display: block; margin-bottom: 5px; color: #132238; }
.city-check span:last-child { color: #5e6b7a; font-size: .92rem; }
.city-section { margin: 0 0 46px; }
.city-section h2 { margin-top: 0; }
.zone-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
}
.zone-card {
  padding: 20px;
  background: #fff;
  border: 1px solid #dce5eb;
  border-radius: 16px;
}
.zone-card h3 { margin: 0 0 8px; font-size: 1.05rem; }
.zone-card p { margin: 0; font-size: .95rem; }
.city-note {
  padding: 20px 22px;
  background: #eef5f9;
  border: 1px solid #d6e3ea;
  border-radius: 16px;
}
.city-note strong { color: #123f64; }
.city-secondary-cta {
  margin-top: 44px;
  padding: 28px;
  background: #102f46;
  border-radius: 20px;
  color: #fff;
}
.city-secondary-cta h2,
.city-secondary-cta p { color: #fff; }
.city-secondary-cta h2 { margin-top: 0; }
.city-secondary-cta .btn { background: #fff; color: #102f46; }
.city-link-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: 44px;
}
.city-link-groups h3 { margin-top: 0; }
.city-link-groups ul { margin-bottom: 0; }
@media (max-width: 900px) {
  .city-layout { grid-template-columns: 1fr; }
  .city-booking-panel { position: static; order: -1; }
}
@media (max-width: 700px) {
  .city-checks,
  .zone-grid,
  .city-link-groups { grid-template-columns: 1fr; }
  .city-layout { gap: 26px; padding-top: 30px; }
  .city-booking-panel { padding: 22px 18px; }
  .city-secondary-cta { padding: 24px 19px; }
}