/* ============================================================================
   GLOW & BRUNCH — PÁGINAS INTERNAS DE CIUDAD (Chillán / Los Ángeles)
   Se carga JUNTO A style.css y home.css (no los reemplaza): reutiliza las
   variables de color/tipografía y los componentes --gb- ya existentes
   (header, botones, contenedor) para mantener exactamente la misma
   identidad visual que la Home. Todo lo nuevo de aquí usa el prefijo
   "gb-city-" para no chocar con nada existente.

   v4 — historia paso a paso, más corta: hero (con lugar + galería) → qué
   vivirás → cta → formulario → pago → whatsapp. La fecha/hora/duración/
   precio y los cupos viven dentro del hero, en pequeño. "El lugar" (nombre,
   dirección, descripción, Maps/Instagram) ya no es una sección aparte más
   abajo: vive ARRIBA de la galería, en la misma columna derecha del hero,
   para que se entienda de inmediato que esas fotos son del lugar — y todo
   queda alineado a la izquierda junto al resto del hero, en vez de
   centrado. Pocas tarjetas (solo galería, formulario y pago); el resto se
   resuelve con tipografía, espacio en blanco y separadores finos.
============================================================================ */

.gb-city-page { background: var(--gb-cream); }

/* ---------- Breadcrumb ---------- */
.gb-city-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 16px 20px 0;
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: var(--gb-taupe);
}
@media (min-width: 1024px) { .gb-city-breadcrumb { padding: 20px 48px 0; } }
.gb-city-breadcrumb a { color: var(--gb-taupe); transition: color .2s ease; }
.gb-city-breadcrumb a:hover { color: var(--gb-rose-deep); }
.gb-city-breadcrumb .is-current { color: var(--gb-rose-deep); font-weight: 500; }
.gb-city-breadcrumb-sep { color: rgba(139,74,84,0.35); }

.gb-city-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 20px 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--gb-rose-deep);
}
@media (min-width: 1024px) { .gb-city-back { margin: 6px 48px 0; } }
.gb-city-back svg { width: 15px; height: 15px; }

/* ---------- Kicker reutilizable ("✦ El lugar ✦" / eyebrows) ---------- */
.gb-city-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gb-rose);
}

/* ---------- Indicador de pasos (aparece al salir del hero) ----------
   Barra chica y fija bajo el header, para orientarse en la página ahora
   que tiene varios tramos. Se queda oculta mientras se ve el hero (ahí es
   obvio dónde estás) y aparece con un fade suave apenas se avanza. El
   punto activo se actualiza solo, según qué sección está en pantalla. */
.gb-city-steps {
  position: fixed;
  top: var(--gb-header-h, 74px);
  left: 0;
  right: 0;
  z-index: 55;
  display: flex;
  justify-content: center;
  gap: 22px;
  padding: 10px 20px;
  background: rgba(251, 243, 238, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(139, 74, 84, 0.08);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.gb-city-steps.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.gb-city-steps-item {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gb-taupe);
  padding: 3px 1px 5px;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.gb-city-steps-item.is-active { color: var(--gb-rose-deep); border-color: var(--gb-rose-deep); }
.gb-city-steps-item:hover { color: var(--gb-rose-deep); }
@media (max-width: 380px) {
  .gb-city-steps { gap: 14px; padding: 9px 12px; }
  .gb-city-steps-item { font-size: 10.5px; letter-spacing: 0.05em; }
}

/* Deja que el scroll a estas secciones no las esconda detrás del header +
   la barra de pasos cuando se hace click en un paso. */
#lugar, #experiencia, #reservar { scroll-margin-top: calc(var(--gb-header-h, 74px) + 46px); }

/* =============================================================================
   1. HERO — solo lo esencial: badge, título, lede, 2 indicadores y el CTA.
   La galería va al lado (desktop) / justo debajo (mobile). Sin métodos de
   pago ni fichas técnicas todavía.
============================================================================= */
.gb-city-hero { padding: 20px 20px 8px; }
@media (min-width: 1024px) { .gb-city-hero { padding: 26px 48px 12px; } }

/* El hero ya no comparte fila con "El lugar" (esa sección ahora vive más
   abajo, después de "La experiencia"), así que solo necesita un ancho
   máximo cómodo para no estirarse de borde a borde en pantallas grandes. */
.gb-city-hero-content { max-width: 640px; }
@media (min-width: 1024px) {
  .gb-city-hero-content { max-width: 720px; margin: 0 auto; }
}

/* Aviso de cambio de fecha — mismo lenguaje visual de alerta que ya se usa
   para "últimos cupos" (fondo rosado fuerte + texto rojizo), para que se
   note de inmediato apenas se abre la página. */
.gb-date-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px 16px;
  border-radius: var(--gb-radius-md);
  background: #f7d9d3;
  color: #a6373f;
}
.gb-date-alert-icon { flex-shrink: 0; margin-top: 1px; }
.gb-date-alert-icon svg { width: 18px; height: 18px; }
.gb-date-alert-text { font-size: 13.5px; line-height: 1.5; }
.gb-date-alert-text strong { font-weight: 700; }

/* Aviso de preventa — banda destacada (tono dorado/cálido, no de alerta)
   que aparece sola mientras la ciudad tenga "preventaPrice" +
   "preventaDeadlineISO" en data.js y hoy no haya pasado esa fecha. Se
   arma y se muestra/oculta automáticamente desde main.js. */
.gb-preventa-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px 16px;
  border-radius: var(--gb-radius-md);
  background: linear-gradient(135deg, #fff2d9, #fce4c9);
  color: var(--gb-gold);
  border: 1px solid rgba(139, 111, 71, 0.25);
}
.gb-preventa-alert-icon { flex-shrink: 0; font-size: 16px; line-height: 1.4; }
.gb-preventa-alert-text { font-size: 13.5px; line-height: 1.5; font-weight: 600; }
.gb-preventa-alert-text strong { font-weight: 700; color: var(--gb-rose-darker); }

/* Precio tachado (precio oficial) junto al precio de preventa, en el chip
   de precio del hero y en el panel de confirmación de pago. */
.gb-price-strike {
  text-decoration: line-through;
  opacity: 0.6;
  margin-right: 5px;
  font-weight: 400;
}

.gb-city-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--gb-radius-pill);
  background: var(--gb-blush);
  color: var(--gb-rose-darker);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.gb-city-badge svg { width: 15px; height: 15px; flex-shrink: 0; }

.gb-city-title {
  margin-top: 16px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(32px, 6.5vw, 50px);
  line-height: 1.08;
  color: var(--gb-ink);
}
.gb-city-title .accent { color: var(--gb-rose-deep); }

.gb-city-lede {
  margin-top: 12px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--gb-taupe);
  max-width: 42ch;
}

/* Datos rápidos del evento (fecha ya está en el badge de arriba) */
.gb-city-hero-facts {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  row-gap: 8px;
  column-gap: 18px;
}
.gb-city-hero-fact {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  color: var(--gb-rose-darker);
  font-weight: 500;
}
.gb-city-hero-fact svg { width: 16px; height: 16px; color: var(--gb-rose-deep); flex-shrink: 0; }

/* Cupos — versión chica para vivir dentro del hero (el detalle grande ya
   no existe como sección aparte, para no alargar la página). */
.gb-city-hero-capacity {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: var(--gb-radius-pill);
  background: var(--gb-blush);
  color: var(--gb-rose-darker);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.gb-city-hero-capacity svg { width: 14px; height: 14px; color: var(--gb-rose-deep); flex-shrink: 0; }
.gb-city-hero-capacity.is-low { background: #f7d9d3; color: #a6373f; }
.gb-city-hero-capacity.is-sold-out { background: rgba(139,74,84,0.1); color: var(--gb-taupe); }

.gb-city-hero-cta {
  margin-top: 24px;
  width: 100%;
}
@media (min-width: 560px) { .gb-city-hero-cta { width: auto; } }

/* ---------- Galería (placeholders) ---------- */
.gb-city-gallery {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 140px;
  gap: 10px;
}
@media (min-width: 480px) {
  .gb-city-gallery { grid-auto-rows: 180px; }
}
@media (min-width: 1024px) {
  .gb-city-gallery { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 150px; gap: 12px; }
}
.gb-city-gallery-photo {
  grid-column: span 1;
  border-radius: var(--gb-radius-md);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  background:
    radial-gradient(120% 140% at 15% 10%, rgba(255,255,255,0.55), transparent 55%),
    linear-gradient(150deg, var(--gb-blush) 0%, var(--gb-rose-gold-light) 55%, var(--gb-cream-deep) 100%);
  border: 1px solid rgba(139,74,84,0.14);
}
.gb-city-gallery-photo.is-wide { grid-column: span 2; }
@media (min-width: 1024px) {
  .gb-city-gallery-photo.is-wide { grid-column: span 3; }
  .gb-city-gallery-photo:not(.is-wide) { grid-column: span 2; }
}
/* Cuando la foto ya es real (<img>) en vez del placeholder rosado */
.gb-city-gallery-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gb-city-gallery-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--gb-rose-deep);
  background: rgba(255,255,255,0.55);
}
.gb-city-gallery-icon svg { width: 17px; height: 17px; }
.gb-city-gallery-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gb-rose-deep);
  font-weight: 600;
}

/* =============================================================================
   2. EL LUGAR — ahora es su propia sección, después de "La experiencia".
   Reutiliza los mismos textos/botones de siempre (título, dirección,
   descripción, Maps/Instagram), pero centrados como el resto de las
   secciones de la página, con la galería de fotos justo debajo.
============================================================================= */
.gb-city-place { padding: 46px 20px 8px; }
@media (min-width: 1024px) { .gb-city-place { padding: 46px 48px 8px; } }
.gb-city-place-body {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.gb-city-place-body .gb-city-hero-place-copy { margin-left: auto; margin-right: auto; }
.gb-city-place-body .gb-city-hero-place-actions { justify-content: center; }
.gb-city-place .gb-city-gallery { max-width: 1040px; margin: 30px auto 0; }

.gb-city-kicker-left { justify-content: flex-start; }
.gb-city-hero-place-title {
  margin-top: 10px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(21px, 2.6vw, 27px);
  color: var(--gb-ink);
  line-height: 1.3;
}
.gb-city-hero-place-title .accent { color: var(--gb-rose-deep); }
.gb-city-hero-place-address {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  color: var(--gb-rose-darker);
  font-weight: 500;
}
.gb-city-hero-place-address svg { width: 15px; height: 15px; flex-shrink: 0; }
.gb-city-hero-place-copy {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--gb-taupe);
  max-width: 48ch;
}
.gb-city-hero-place-actions {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.gb-city-location-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: var(--gb-radius-pill);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.gb-city-location-btn svg { width: 16px; height: 16px; }
.gb-city-location-btn.is-outline { border: 1.5px solid var(--gb-rose-deep); color: var(--gb-rose-deep); }
.gb-city-location-btn.is-solid { background: linear-gradient(135deg, var(--gb-rose-deep), var(--gb-rose-darker)); color: var(--gb-white); }
.gb-city-location-btn[disabled] { opacity: 0.5; pointer-events: none; }

/* =============================================================================
   3. ¿QUÉ VIVIRÁS? — 7 experiencias compactas, 4 arriba + 3 abajo en desktop
   (grid de 4 columnas deja las 3 últimas centradas en la segunda fila).
============================================================================= */
.gb-city-experience { padding: 46px 0 8px; }
.gb-city-section-head { text-align: center; padding: 0 20px 30px; }
.gb-city-section-title {
  margin-top: 8px;
  font-family: var(--font-serif);
  font-size: clamp(22px, 4.5vw, 30px);
  color: var(--gb-rose-darker);
}
.gb-city-exp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 16px;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 640px) {
  .gb-city-exp-grid { grid-template-columns: repeat(4, 1fr); gap: 28px 20px; }
}
@media (min-width: 1024px) {
  .gb-city-exp-grid { padding: 0 48px; }
}
.gb-city-exp-item { text-align: center; }
.gb-city-exp-icon {
  width: 42px; height: 42px;
  margin: 0 auto 9px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--gb-rose-deep);
  background: var(--gb-blush);
}
.gb-city-exp-icon svg { width: 20px; height: 20px; }
.gb-city-exp-title {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gb-rose-darker);
  line-height: 1.3;
  margin-bottom: 4px;
}
.gb-city-exp-text { font-size: 12px; color: var(--gb-taupe); line-height: 1.45; }
.gb-city-experience-close {
  text-align: center;
  margin: 34px auto 0;
  padding: 0 20px;
  font-family: var(--font-serif);
  font-size: 16.5px;
  color: var(--gb-rose-deep);
}

/* =============================================================================
   4. CTA DE TRANSICIÓN — puente breve antes del formulario.
   (El resumen del evento y los cupos ahora viven arriba, dentro del hero,
   para que la página no se alargue innecesariamente.)
============================================================================= */
.gb-city-cta-transition {
  padding: 40px 20px 46px;
  text-align: center;
}
.gb-city-cta-title {
  font-family: var(--font-serif);
  font-size: clamp(21px, 4vw, 27px);
  color: var(--gb-ink);
}
.gb-city-cta-sub {
  margin-top: 8px;
  font-size: 14px;
  color: var(--gb-taupe);
}
.gb-city-cta-arrow {
  margin-top: 20px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gb-rose-deep);
}
.gb-city-cta-arrow svg { width: 20px; height: 20px; animation: gb-bounce 1.8s ease-in-out infinite; }
@keyframes gb-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* =============================================================================
   5 / 6 / 7 — FORMULARIO, PAGO Y WHATSAPP.
   Una sola columna central en desktop: el formulario primero; el pago y el
   paso de WhatsApp aparecen recién después de enviar, dentro del mismo
   bloque angosto (nada compite con el formulario mientras se completa).
============================================================================= */
.gb-city-register { padding: 10px 0 60px; }
.gb-city-register-narrow {
  max-width: 620px;
  margin: 0 auto;
}
.gb-city-panel {
  background: var(--gb-white);
  border-radius: var(--gb-radius-lg);
  box-shadow: 0 10px 30px -16px rgba(139,74,84,0.28);
  padding: 30px 24px 30px;
}
@media (min-width: 640px) { .gb-city-panel { padding: 38px 44px 40px; } }
.gb-city-panel-title {
  font-family: var(--font-serif);
  font-size: 21px;
  color: var(--gb-rose-darker);
  margin-bottom: 20px;
  text-align: center;
}

.gb-city-field {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid rgba(139,74,84,0.18);
  border-radius: var(--gb-radius-md);
  padding: 0 14px;
  margin-bottom: 12px;
  background: var(--gb-cream);
  transition: border-color .2s ease;
}
.gb-city-field:focus-within { border-color: var(--gb-rose-deep); }
.gb-city-field svg { width: 17px; height: 17px; color: var(--gb-rose-deep); flex-shrink: 0; }
.gb-city-field input,
.gb-city-field select {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 14.5px;
  color: var(--gb-ink);
  padding: 14px 0;
  appearance: none;
}
.gb-city-field select { cursor: pointer; }
.gb-city-field input:focus, .gb-city-field select:focus { outline: none; }
.gb-city-field-row { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 480px) {
  .gb-city-field-row.is-split { grid-template-columns: 1fr 1fr; gap: 0 10px; }
}

.gb-city-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 6px 2px 20px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--gb-taupe);
}
.gb-city-checkbox input {
  margin-top: 3px;
  width: 16px; height: 16px;
  accent-color: var(--gb-rose-deep);
  flex-shrink: 0;
}

.gb-city-form-error {
  font-size: 13px;
  color: #a6373f;
  margin: -6px 0 14px;
}
.gb-city-form-note {
  margin-top: 12px;
  text-align: center;
  font-size: 12px;
  color: var(--gb-taupe);
}

.gb-city-form-submit { width: 100%; }
.gb-city-form-submit[disabled],
.gb-city-location-btn[disabled],
[data-sold-out-disable][disabled],
[data-sold-out-disable].is-disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

/* ---------- Panel de confirmación (pago + WhatsApp, post-envío) ---------- */
.gb-city-confirm-panel {
  margin-top: 20px;
  border-radius: var(--gb-radius-lg);
  background: linear-gradient(160deg, var(--gb-blush), var(--gb-rose-gold-light));
  padding: 28px 24px 30px;
  text-align: center;
}
@media (min-width: 640px) { .gb-city-confirm-panel { padding: 34px 40px 36px; } }
.gb-city-confirm-panel[hidden] { display: none; }
.gb-city-confirm-title { font-family: var(--font-serif); font-size: 22px; color: var(--gb-rose-darker); }
.gb-city-confirm-sub { margin-top: 6px; font-size: 14px; color: var(--gb-rose-darker); }
.gb-city-confirm-warning {
  margin-top: 10px;
  font-size: 12.5px;
  font-style: italic;
  color: var(--gb-taupe);
}

.gb-city-confirm-method {
  margin-top: 24px;
  background: var(--gb-white);
  border-radius: var(--gb-radius-md);
  padding: 22px 20px;
  text-align: center;
}
.gb-city-confirm-method[hidden] { display: none; }
.gb-city-confirm-method h4 {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gb-rose);
}
.gb-city-confirm-price { margin-top: 6px; font-family: var(--font-serif); font-size: 26px; color: var(--gb-rose-deep); }
.gb-city-confirm-price .gb-city-confirm-note { display: block; margin-top: 2px; font-family: var(--font-sans); font-size: 12px; color: var(--gb-taupe); }
.gb-city-confirm-price .gb-price-strike { font-size: 16px; }
.gb-city-bank-details {
  margin-top: 16px;
  text-align: left;
  border-top: 1px solid rgba(139,74,84,0.1);
}
.gb-city-confirm-method .gb-btn,
.gb-city-confirm-method .gb-btn-ghost { margin-top: 16px; width: 100%; }

.gb-city-confirm-step {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid rgba(139,74,84,0.18);
}
.gb-city-confirm-step-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gb-rose);
}
.gb-city-confirm-step-title {
  margin-top: 4px;
  font-family: var(--font-serif);
  font-size: 19px;
  color: var(--gb-rose-darker);
}
.gb-city-confirm-step p.gb-city-confirm-step-text {
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--gb-rose-darker);
  line-height: 1.6;
}
.gb-city-confirm-step .gb-btn { margin-top: 16px; width: 100%; }

/* =============================================================================
   3.5 "ASÍ SE VIVIÓ" — carrusel deslizable de fotos reales del evento.
   Fotos verticales (estilo historias) que se deslizan de lado como un
   carrete — con el dedo en el celular, o con las flechas / puntos en
   desktop. Pensado para reutilizarse igual en Los Ángeles más adelante
   (misma estructura ".gb-city-moments", solo cambian las fotos y la fecha).
============================================================================= */
.gb-city-moments { padding: 40px 0 12px; }
.gb-city-section-title .accent { color: var(--gb-rose-deep); }
.gb-city-moments-sub {
  max-width: 420px;
  margin: 0 auto;
  font-size: 13.5px;
  color: var(--gb-taupe);
  line-height: 1.6;
}

.gb-city-moments-carousel {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
}

.gb-city-moments-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 20px;
  padding: 6px 20px 14px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gb-city-moments-track::-webkit-scrollbar { display: none; }
.gb-city-moments-track:focus-visible {
  outline: 2px solid var(--gb-rose-deep);
  outline-offset: 4px;
  border-radius: var(--gb-radius-md);
}

.gb-city-moments-slide {
  flex: 0 0 auto;
  width: 62vw;
  max-width: 240px;
  aspect-ratio: 9 / 16;
  border-radius: var(--gb-radius-md);
  overflow: hidden;
  box-shadow: var(--gb-shadow);
  scroll-snap-align: center;
  background: var(--gb-cream-deep);
}
.gb-city-moments-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (min-width: 640px) {
  .gb-city-moments-slide { width: 220px; scroll-snap-align: start; }
  .gb-city-moments-track { scroll-padding-left: 48px; padding: 6px 48px 16px; justify-content: flex-start; }
}
@media (min-width: 1024px) {
  .gb-city-moments-track { padding: 6px 8px 16px; }
}

/* Flechas SIEMPRE visibles (celular, tablet y desktop) — antes solo
   aparecían desde los 1024px y en pantallas más chicas solo quedaban los
   puntos, que no se notaban como para avanzar. Van superpuestas encima de
   las fotos (como en Instagram) para que quepan a cualquier ancho. */
.gb-city-moments-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: var(--gb-rose-deep);
  box-shadow: var(--gb-shadow);
  z-index: 3;
  transition: background .2s ease, transform .2s ease, opacity .2s ease;
}
.gb-city-moments-arrow svg { width: 16px; height: 16px; }
.gb-city-moments-arrow.is-prev { left: 6px; }
.gb-city-moments-arrow.is-next { right: 6px; }
.gb-city-moments-arrow:hover { background: var(--gb-white); transform: translateY(-50%) scale(1.06); }
.gb-city-moments-arrow:disabled { opacity: 0.4; pointer-events: none; }
@media (min-width: 1024px) {
  .gb-city-moments-arrow { width: 44px; height: 44px; left: auto; right: auto; }
  .gb-city-moments-arrow svg { width: 18px; height: 18px; }
  .gb-city-moments-arrow.is-prev { left: -14px; }
  .gb-city-moments-arrow.is-next { right: -14px; }
}

.gb-city-moments-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 4px;
}
.gb-city-moments-dots button {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(168, 93, 104, 0.28);
  transition: background .2s ease, transform .2s ease;
}
.gb-city-moments-dots button.is-active {
  background: var(--gb-rose-deep);
  transform: scale(1.25);
}
/* Botón de reserva justo debajo del carrusel (página "Nuestros eventos") —
   más pegado que el espacio por defecto de .gb-about-cta. */
.gb-city-moments-cta { margin-top: 22px; }