/* ==========================================================================
   AszT · Mapa de Memórias — design system "vidro & vinho"
   ========================================================================== */

:root {
  /* Tipografia */
  --font-display: "Cormorant Garamond", "Georgia", serif;
  --font-script:  "Parisienne", "Cormorant Garamond", cursive;
  --font-body:    "Inter", system-ui, "Segoe UI", sans-serif;

  /* Noite: do vinho ao azul (crepúsculo) */
  --night-950: #0b0918;
  --night-900: #0d0a1c;
  --wine-900:  #1a0e1c;
  --plum-700:  #3b1b3f;
  --indigo-800: #1c2054;
  --indigo-700: #262a68;

  /* Rosa */
  --magenta:        #b13b7e;
  --magenta-600:    #922f66;
  --magenta-bright: #e05a9c;
  --rose-gold:      #e9b7a6;
  --gold:           #f0c88f;

  /* Azul */
  --blue-700:   #3949ab;
  --blue-600:   #4c6ef5;
  --blue-400:   #7aa2f7;
  --periwinkle: #a9b6f0;
  --ice:        #cfe0ff;

  --cream: #fdeef5;
  --muted: #b6aac9;

  --glass: rgba(255, 255, 255, 0.055);
  --glass-strong: rgba(255, 255, 255, 0.09);
  --glass-border: rgba(255, 255, 255, 0.13);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.75);
  --shadow-md: 0 12px 30px -12px rgba(0, 0, 0, 0.6);

  --radius: 20px;
  --radius-sm: 12px;
  --maxw: 1200px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--cream);
  background: var(--night-950);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Fundo decorativo: crepúsculo rosa -> azul ---------- */
.bg-decor {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(115% 85% at 10% -5%, #4a1d47 0%, transparent 55%),
    radial-gradient(105% 80% at 92% 6%, #24285f 0%, transparent 52%),
    radial-gradient(95% 70% at 55% 105%, #2b1547 0%, transparent 62%),
    linear-gradient(165deg, var(--wine-900) 0%, #150e2a 48%, var(--night-950) 100%);
  overflow: hidden;
}
.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(95px);
  opacity: 0.45;
  animation: float 18s var(--ease) infinite alternate;
}
.glow--1 { width: 480px; height: 480px; top: -120px; left: -80px; background: var(--magenta); }
.glow--2 { width: 440px; height: 440px; top: 18%; right: -130px; background: var(--blue-700); animation-delay: -6s; opacity: 0.5; }
.glow--3 { width: 380px; height: 380px; bottom: -140px; left: 32%; background: #7c4dcc; animation-delay: -11s; opacity: 0.34; }
@keyframes float {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(40px, -30px, 0) scale(1.15); }
}

.hearts { position: absolute; inset: 0; }
.hearts span {
  position: absolute;
  bottom: -30px;
  color: rgba(224, 90, 156, 0.35);
  font-size: 18px;
  animation: rise linear infinite;
}
@keyframes rise {
  to { transform: translateY(-110vh) rotate(180deg); opacity: 0; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  padding: 0 clamp(1rem, 4vw, 3rem);
}
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.4rem 0;
  max-width: var(--maxw);
  width: 100%;
  margin: 0 auto;
}
.monogram {
  font-family: var(--font-script);
  font-size: 1.6rem;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--cream);
  text-decoration: none;
  padding: 0.5rem 1rem;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.topbar__admin {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: all 0.3s var(--ease);
}
.topbar__admin:hover { color: var(--cream); border-color: var(--glass-border); background: var(--glass); }

.hero__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 0;
  animation: fade-up 1s var(--ease) both;
}
.hero__eyebrow {
  color: var(--rose-gold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 600;
  margin: 0 0 0.6rem;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(4rem, 13vw, 9rem);
  line-height: 0.92;
  margin: 0;
  letter-spacing: 0.01em;
  background: linear-gradient(112deg,
    #ffffff 0%, var(--rose-gold) 26%, var(--magenta-bright) 52%,
    #9d7ae0 72%, var(--blue-400) 88%, var(--ice) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 10px 34px rgba(150, 80, 190, 0.45));
}
.hero__tagline {
  font-family: var(--font-display);
  color: #d9cfe8;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  max-width: 32ch;
  margin: 1.2rem auto 0;
  line-height: 1.55;
  font-style: italic;
  font-weight: 400;
}

/* ---------- Selo de aniversário ---------- */
.anniv {
  margin: 1.6rem 0 0;
  padding: 0.55rem 1.4rem;
  border-radius: 999px;
  font-size: 0.9rem;
  color: var(--ice);
  background: linear-gradient(100deg, rgba(177,59,126,0.22), rgba(76,110,245,0.22));
  border: 1px solid rgba(169, 182, 240, 0.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 30px -14px rgba(124, 77, 204, 0.9);
}
.anniv strong { color: #fff; font-weight: 600; }
.anniv__spark { color: var(--rose-gold); }
.anniv--today {
  font-size: 1rem;
  border-color: var(--magenta-bright);
  animation: anniv-pulse 2.4s var(--ease) infinite;
}
@keyframes anniv-pulse {
  0%, 100% { box-shadow: 0 8px 30px -14px rgba(224, 90, 156, 0.8); }
  50%      { box-shadow: 0 8px 44px -8px rgba(224, 90, 156, 1); }
}

/* ---------- Contador vivo do namoro ---------- */
.love-counter {
  margin: 1.2rem 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.love-counter__pre {
  font-family: var(--font-script);
  font-size: 1.5rem;
  color: var(--rose-gold);
  line-height: 1;
}
.love-counter__value {
  font-family: var(--font-body);
  font-size: clamp(0.78rem, 1.7vw, 0.95rem);
  letter-spacing: 0.1em;
  color: var(--ice);
  font-variant-numeric: tabular-nums;
}
.love-counter__value b { color: #fff; font-weight: 600; }
.love-counter__sep { color: var(--periwinkle); opacity: 0.6; margin: 0 0.35em; }

/* ---------- "Neste dia" ---------- */
.today {
  margin: 0 0 1.6rem;
  padding: 1.2rem 1.3rem;
  border-radius: var(--radius);
  border: 1px solid rgba(169, 182, 240, 0.28);
  background: linear-gradient(100deg, rgba(177,59,126,0.14), rgba(76,110,245,0.14));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: fade-up 0.9s var(--ease) both;
}
.today__head { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.today__badge {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--rose-gold);
}
.today__lead {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--cream);
}
.today__items { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.today__item {
  font: inherit;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 1rem 0.5rem 0.5rem;
  border-radius: 999px;
  cursor: pointer;
  color: var(--cream);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  transition: transform 0.28s var(--ease), border-color 0.28s var(--ease);
  text-align: left;
}
.today__item:hover { transform: translateY(-3px); border-color: var(--magenta-bright); }
.today__item img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.today__text { display: flex; flex-direction: column; line-height: 1.25; }
.today__text strong { font-size: 0.78rem; color: var(--rose-gold); letter-spacing: 0.04em; }
.today__title { font-size: 0.95rem; }
.today__text small { color: var(--muted); font-size: 0.75rem; }

/* ---------- Nossa rota ---------- */
.route-panel {
  position: absolute;
  left: 1rem; bottom: 1rem;
  z-index: 500;
  padding: 0.8rem 1.1rem;
  border-radius: 14px;
  background: rgba(16, 12, 34, 0.86);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: 0.15rem;
  min-width: 200px;
  animation: fade-up 0.5s var(--ease);
}
.route-panel[hidden] { display: none; }
.route-panel__km { font-family: var(--font-display); font-size: 1.7rem; line-height: 1; color: #fff; }
.route-panel__km strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.route-panel__km small { font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-left: 0.35rem; }
.route-panel__where { font-size: 0.82rem; color: var(--periwinkle); min-height: 1.2em; }

/* Coração que percorre a rota */
.route-head {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  font-size: 18px; color: #fff;
  filter: drop-shadow(0 0 10px rgba(224, 90, 156, 0.9));
  animation: route-beat 0.9s var(--ease) infinite;
}
@keyframes route-beat { 0%,100%{transform:scale(1)} 50%{transform:scale(1.28)} }

/* ---------- Estatísticas ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 3rem;
  width: 100%;
  max-width: 760px;
}
.stat {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 1.3rem 0.8rem;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
}
.stat:hover { transform: translateY(-6px); border-color: rgba(169, 182, 240, 0.55); }
.stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4.6vw, 2.4rem);
  font-weight: 600;
  color: #fff;
  line-height: 1;
  white-space: nowrap;
}
.stat__suffix { font-size: 0.5em; font-weight: 500; color: var(--rose-gold); margin-left: 0.15em; }
.stat__label {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero__scroll {
  display: flex;
  justify-content: center;
  padding-bottom: 1.5rem;
}
.hero__scroll span {
  width: 26px; height: 42px;
  border: 2px solid var(--glass-border);
  border-radius: 999px;
  position: relative;
}
.hero__scroll span::after {
  content: "";
  position: absolute;
  top: 8px; left: 50%;
  width: 4px; height: 8px;
  margin-left: -2px;
  background: var(--rose-gold);
  border-radius: 999px;
  animation: scroll-dot 1.6s var(--ease) infinite;
}
@keyframes scroll-dot { 0%{opacity:0;transform:translateY(0)} 40%{opacity:1} 80%{opacity:0;transform:translateY(14px)} }

/* ---------- Layout principal ---------- */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem) 3rem;
}

/* ---------- Toolbar / filtros ---------- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.2rem;
}
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  --chip: var(--magenta);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.28s var(--ease);
}
.chip__dot { font-size: 0.95rem; line-height: 1; }
.chip:hover { color: var(--cream); border-color: var(--chip); }
.chip.is-active {
  color: #fff;
  background: color-mix(in srgb, var(--chip) 30%, transparent);
  border-color: var(--chip);
  box-shadow: 0 0 0 1px var(--chip), 0 6px 18px -8px var(--chip);
}
.chip--all { --chip: var(--magenta-bright); }

.actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.btn {
  font: inherit;
  font-weight: 600;
  font-size: 0.88rem;
  border: none;
  border-radius: 999px;
  padding: 0.7rem 1.3rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: transform 0.2s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn--primary {
  color: #fff;
  background: linear-gradient(120deg, var(--magenta-bright) 0%, #8b56d6 52%, var(--blue-600) 100%);
  background-size: 180% 100%;
  background-position: 0% 50%;
  box-shadow: 0 10px 28px -10px rgba(139, 86, 214, 0.9);
  transition: transform 0.2s var(--ease), box-shadow 0.3s var(--ease), background-position 0.6s var(--ease);
}
.btn--primary:hover {
  background-position: 100% 50%;
  box-shadow: 0 14px 34px -8px var(--blue-600);
  transform: translateY(-2px);
}
.btn--ghost {
  color: var(--cream);
  background: var(--glass);
  border: 1px solid var(--glass-border);
}
.btn--ghost:hover { background: var(--glass-strong); border-color: var(--periwinkle); }
.btn--block { width: 100%; justify-content: center; margin-top: 1.4rem; }

/* ---------- Mapa ---------- */
.map-shell { position: relative; }
#map {
  height: min(70vh, 680px);
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg);
  background: #0d0710;
  z-index: 1;
}
.map-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-style: italic;
  pointer-events: none;
}

/* Marcadores em coração */
.pin {
  width: 34px; height: 34px;
  position: relative;
  transform: translateY(-4px);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.45));
}
.pin__heart {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  color: #fff; font-size: 15px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2px solid rgba(255,255,255,0.85);
  box-shadow: inset 0 0 8px rgba(0,0,0,0.25);
}
.pin__heart > * { transform: rotate(45deg); }
.pin::after {
  content: "";
  position: absolute;
  bottom: -3px; left: 50%;
  width: 10px; height: 4px;
  margin-left: -5px;
  background: rgba(0,0,0,0.35);
  border-radius: 50%;
  filter: blur(1px);
}

/* Clusters */
.marker-cluster {
  background: color-mix(in srgb, var(--magenta) 25%, transparent) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.marker-cluster div {
  background: linear-gradient(135deg, var(--magenta-bright), #7b5ad6 60%, var(--blue-600)) !important;
  color: #fff !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  border: 2px solid rgba(255,255,255,0.7);
}

/* Popups do Leaflet reestilizados */
.leaflet-popup-content-wrapper {
  background: rgba(22, 16, 42, 0.93);
  color: var(--cream);
  border: 1px solid var(--glass-border);
  border-radius: 16px !important;
  box-shadow: var(--shadow-md);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.leaflet-popup-content { margin: 0 !important; width: 230px !important; }
.leaflet-popup-tip { background: rgba(22, 16, 42, 0.93); }
.leaflet-popup-close-button { color: var(--muted) !important; padding: 8px 8px 0 0 !important; }
.leaflet-container a.leaflet-popup-close-button:hover { color: #fff !important; }

.pop { overflow: hidden; border-radius: 16px; }
.pop__img {
  width: 100%; height: 140px; object-fit: cover;
  cursor: pointer; display: block;
  transition: transform 0.5s var(--ease);
}
.pop__img:hover { transform: scale(1.05); }
.pop__body { padding: 0.75rem 0.9rem 0.95rem; }
.pop__tag {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em;
  padding: 0.15rem 0.55rem; border-radius: 999px;
  color: #fff; margin-bottom: 0.4rem;
}
.pop__title { font-family: var(--font-display); font-size: 1.05rem; margin: 0.1rem 0; color: #fff; }
.pop__meta { font-size: 0.78rem; color: var(--muted); margin: 0.15rem 0 0; }
.pop__count {
  display: inline-block; margin-top: 0.5rem;
  font-size: 0.72rem; color: var(--rose-gold);
}

/* ---------- Footer ---------- */
.footer { text-align: center; color: var(--muted); padding: 2.5rem 0 0.5rem; font-size: 0.85rem; }
.footer__heart { color: var(--magenta-bright); }

/* ---------- Modais ---------- */
.modal, .lightbox { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; }
.modal[hidden], .lightbox[hidden] { display: none; }
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 5, 9, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: fade 0.35s var(--ease);
}
.modal__card {
  position: relative;
  z-index: 1;
  width: min(92vw, 520px);
  max-height: 88vh;
  overflow: auto;
  background: linear-gradient(160deg, rgba(48,22,56,0.96), rgba(18,14,40,0.97));
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  padding: 2rem;
  box-shadow: var(--shadow-lg);
  animation: pop-in 0.45s var(--ease);
}
.modal__card--wide { width: min(94vw, 940px); }
.modal__card--draw { text-align: center; width: min(92vw, 460px); }
.modal__x {
  position: absolute; top: 1rem; right: 1.1rem;
  background: none; border: none; color: var(--muted);
  font-size: 1.8rem; line-height: 1; cursor: pointer;
  transition: color 0.2s;
}
.modal__x:hover { color: #fff; }
.modal__title { font-family: var(--font-display); font-size: 1.8rem; margin: 0 0 0.3rem; color: #fff; }
.modal__sub { color: var(--muted); margin: 0 0 1.5rem; font-size: 0.9rem; }

/* ---------- Linha do tempo ---------- */
.timeline {
  display: flex;
  gap: 1.1rem;
  overflow-x: auto;
  padding: 0.5rem 0.2rem 1.4rem;
  scroll-snap-type: x mandatory;
}
.timeline::-webkit-scrollbar { height: 8px; }
.timeline::-webkit-scrollbar-thumb { background: var(--magenta-600); border-radius: 999px; }
.tl-item {
  flex: 0 0 210px;
  scroll-snap-align: start;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
}
.tl-item:hover { transform: translateY(-6px); border-color: var(--magenta-bright); }
.tl-item__img { width: 100%; height: 130px; object-fit: cover; }
.tl-item__body { padding: 0.7rem 0.85rem 0.9rem; }
.tl-item__year {
  font-family: var(--font-display); font-weight: 600;
  color: var(--rose-gold); font-size: 0.95rem;
}
.tl-item__title { font-size: 0.9rem; color: #fff; margin: 0.2rem 0 0.1rem; line-height: 1.3; }
.tl-item__loc { font-size: 0.75rem; color: var(--muted); margin: 0; }

/* ---------- Slot / sorteio ---------- */
.slot {
  height: 120px;
  margin: 1.5rem 0 0.5rem;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  background: rgba(0,0,0,0.25);
  display: grid;
  place-items: center;
  position: relative;
}
.slot__item {
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: #fff;
  padding: 0 1rem;
  text-align: center;
}
.slot.is-spinning .slot__item { animation: slot-spin 0.09s linear infinite; }
@keyframes slot-spin { from{transform:translateY(-12px);opacity:.4} to{transform:translateY(12px);opacity:.4} }
.slot.is-done .slot__item { animation: land 0.6s var(--ease); }
@keyframes land { 0%{transform:scale(0.6);opacity:0} 60%{transform:scale(1.12)} 100%{transform:scale(1)} }
.draw__note { color: var(--muted); min-height: 1.4em; margin: 0.8rem 0 0; font-style: italic; }

/* ---------- Lightbox ---------- */
.lightbox { background: rgba(8, 4, 7, 0.94); -webkit-backdrop-filter: blur(8px);
 backdrop-filter: blur(8px); }
.lightbox__backdrop { position: absolute; inset: 0; cursor: zoom-out; }
.lightbox__figure { position: relative; margin: 0; max-width: 92vw; max-height: 86vh; text-align: center; }
.lightbox__figure img {
  max-width: 92vw; max-height: 78vh;
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  animation: pop-in 0.4s var(--ease);
}
.lightbox__figure figcaption { color: var(--muted); margin-top: 0.8rem; font-size: 0.9rem; }
.lightbox__x, .lightbox__nav {
  position: absolute;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  display: grid; place-items: center;
  transition: background 0.2s;
}
.lightbox__x { top: 1.2rem; right: 1.2rem; width: 44px; height: 44px; font-size: 1.6rem; }
.lightbox__nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 2rem; }
.lightbox__prev { left: 1.2rem; }
.lightbox__next { right: 1.2rem; }
.lightbox__x:hover, .lightbox__nav:hover { background: var(--magenta-600); }

/* ==========================================================================
   NOSSO FILME (cinema)
   ========================================================================== */
.cinema {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #05040c;
  overflow: hidden;
  animation: fade 0.6s var(--ease);
}
.cinema[hidden] { display: none; }

.cinema__stage { position: absolute; inset: 0; }
.cinema__layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.3s var(--ease);
  will-change: transform, opacity;
}
.cinema__layer.is-active { opacity: 1; }
.cinema__layer.is-paused { animation-play-state: paused !important; }

/* Ken Burns — direções variadas para não repetir */
.kb-1 { animation: kb1 var(--scene, 5s) linear both; }
.kb-2 { animation: kb2 var(--scene, 5s) linear both; }
.kb-3 { animation: kb3 var(--scene, 5s) linear both; }
.kb-4 { animation: kb4 var(--scene, 5s) linear both; }
@keyframes kb1 { from{transform:scale(1.05) translate(0,0)}      to{transform:scale(1.18) translate(-1.5%,-1.5%)} }
@keyframes kb2 { from{transform:scale(1.18) translate(1.5%,1%)}  to{transform:scale(1.05) translate(0,0)} }
@keyframes kb3 { from{transform:scale(1.06) translate(1.5%,-1%)} to{transform:scale(1.2) translate(-1%,1.5%)} }
@keyframes kb4 { from{transform:scale(1.2) translate(-1.5%,1%)}  to{transform:scale(1.06) translate(1%,-1%)} }

.cinema__vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(5,4,12,0.55) 100%),
    linear-gradient(to top, rgba(5,4,12,0.95) 0%, rgba(5,4,12,0.55) 26%, transparent 55%),
    linear-gradient(to bottom, rgba(5,4,12,0.6) 0%, transparent 22%);
}

/* Legenda: que dia foi e onde foi */
.cinema__caption {
  position: absolute;
  left: clamp(1.2rem, 5vw, 5rem);
  bottom: clamp(5.5rem, 12vh, 8rem);
  max-width: min(46rem, 78vw);
  z-index: 3;
}
.cinema__caption[hidden] { display: none; }
.cinema__caption > * { animation: cap-in 0.9s var(--ease) both; }
.cinema__caption > *:nth-child(2) { animation-delay: 0.1s; }
.cinema__caption > *:nth-child(3) { animation-delay: 0.2s; }
@keyframes cap-in { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }

.cine-date {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ice);
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(169,182,240,0.4);
  background: linear-gradient(100deg, rgba(177,59,126,0.3), rgba(76,110,245,0.3));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.cine-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 6vw, 4.2rem);
  line-height: 1.05;
  margin: 0.7rem 0 0.3rem;
  color: #fff;
  text-shadow: 0 6px 40px rgba(0,0,0,0.8);
}
.cine-place {
  font-size: clamp(0.95rem, 1.7vw, 1.2rem);
  color: #ded6ee;
  margin: 0;
  display: flex; align-items: center; gap: 0.45rem;
  text-shadow: 0 2px 14px rgba(0,0,0,0.9);
}
.cine-pin { filter: drop-shadow(0 2px 6px rgba(0,0,0,0.7)); }

/* Mini-mapa: mostra onde foi */
.cinema__map {
  position: absolute;
  right: clamp(1rem, 4vw, 3rem);
  bottom: clamp(5.5rem, 12vh, 8rem);
  width: 220px; height: 155px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: var(--shadow-lg);
  z-index: 3;
  background: #0d0a1c;
  animation: fade-up 1s var(--ease) both;
}
.cinema__map[hidden] { display: none; }
.cinema__map .leaflet-control-container { display: none; }

/* Barra inferior */
.cinema__bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0 clamp(1rem, 4vw, 3rem) 1.4rem;
  z-index: 4;
}
.cinema__bar[hidden] { display: none; }
.cinema__progress {
  height: 3px;
  background: rgba(255,255,255,0.16);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 1rem;
}
.cinema__progress span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--magenta-bright), var(--blue-400));
  border-radius: 999px;
}
.cinema__controls { display: flex; align-items: center; gap: 0.7rem; }
.cine-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  color: #fff;
  font-size: 1.5rem; line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background 0.25s var(--ease), transform 0.15s var(--ease);
}
.cine-btn:hover { background: rgba(255,255,255,0.16); }
.cine-btn:active { transform: scale(0.94); }
.cine-btn--play { background: linear-gradient(120deg, var(--magenta-bright), var(--blue-600)); border: none; }
.cinema__counter {
  margin-left: auto;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.cinema__x {
  position: absolute; top: 1.2rem; right: 1.2rem; z-index: 5;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--glass); color: #fff;
  font-size: 1.7rem; line-height: 1; cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.cinema__x:hover { background: rgba(255,255,255,0.16); }

.cine-hearts { position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; }

/* Cartelas de abertura e encerramento */
.cine-card {
  position: absolute; inset: 0; z-index: 6;
  display: grid; place-content: center; justify-items: center;
  text-align: center;
  padding: 2rem;
  background:
    radial-gradient(80% 60% at 50% 45%, rgba(76,110,245,0.16), transparent 70%),
    radial-gradient(70% 55% at 50% 55%, rgba(177,59,126,0.18), transparent 70%),
    #06050f;
  animation: fade 1s var(--ease);
}
.cine-card[hidden] { display: none; }
.cine-card__script {
  font-family: var(--font-script);
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  color: var(--rose-gold);
  margin: 0 0 0.4rem;
  animation: cap-in 1.1s var(--ease) both;
}
.cine-card__big {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3.4rem, 14vw, 9rem);
  line-height: 1;
  margin: 0.2rem 0;
  background: linear-gradient(112deg, #fff 0%, var(--rose-gold) 28%, var(--magenta-bright) 55%, var(--blue-400) 85%, var(--ice) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 12px 40px rgba(150, 80, 190, 0.5));
  animation: cap-in 1.2s var(--ease) 0.15s both;
}
.cine-card__sub {
  color: var(--muted);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 2.2vw, 1.45rem);
  margin: 0.6rem 0 0;
  animation: cap-in 1.2s var(--ease) 0.3s both;
}
.cine-card__actions { display: flex; gap: 0.8rem; margin-top: 2.2rem; flex-wrap: wrap; justify-content: center; animation: cap-in 1s var(--ease) 0.5s both; }

@media (max-width: 720px) {
  .cinema__map { width: 130px; height: 96px; bottom: auto; top: 1.2rem; right: 4.6rem; }
  .cinema__caption { bottom: 6.5rem; max-width: 88vw; }
  .cine-title { font-size: clamp(1.5rem, 7vw, 2.2rem); }
}

/* ---------- Animações base ---------- */
@keyframes fade { from{opacity:0} to{opacity:1} }
@keyframes fade-up { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes pop-in { from{opacity:0;transform:scale(0.92)} to{opacity:1;transform:scale(1)} }

/* ---------- Responsivo ---------- */
@media (max-width: 720px) {
  .stats { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .actions { justify-content: stretch; }
  .actions .btn { flex: 1; justify-content: center; }
  #map { height: 62vh; }
  .modal__card { padding: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .glow { animation: none; }
}