.nav .snack-brand {
  display: flex;
  flex: 0 1 158px;
  min-width: 0;
  align-items: center;
}
.snack-brand img { width: 100%; height: auto; }
.ricky-map-open { display: none; }
#ricky-laboratorio, #academy { scroll-margin-top: 90px; }

.ricky-map {
  width: min(100% - 20px, 460px);
  max-height: min(90dvh, 660px);
  margin: auto auto max(10px, env(safe-area-inset-bottom));
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 2px solid #d2ed77;
  border-radius: 24px;
  background: #1d1821;
  color: #fff9ef;
  box-shadow: 0 14px 65px #000a;
}
.ricky-map::backdrop { background: #120f16d9; }
.ricky-map[open] { animation: ricky-map-arrive .23s ease-out both; }
html:has(.ricky-map[open]) { overflow: hidden; }
@keyframes ricky-map-arrive {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.ricky-map-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 18px 16px;
  background: radial-gradient(ellipse at 15% 10%, #3c2943, #1d1821 72%);
}
.ricky-map-top p { margin: 0 0 6px; color: #e1f59e; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.ricky-map-top h2 { margin: 0; font: 800 clamp(25px, 8vw, 36px)/1 'Space Grotesk', sans-serif; letter-spacing: -.055em; }
.ricky-map-close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #fffb;
  background: #29222e;
  color: #fff;
  font-size: 25px;
  line-height: 1;
}
.ricky-map-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding: 0 13px 14px;
}
.ricky-map-card {
  position: relative;
  display: grid;
  gap: 5px;
  align-content: start;
  min-width: 0;
  min-height: 92px;
  padding: 10px 9px;
  border-radius: 14px;
  background: var(--ticket);
  color: #221923;
}
.ricky-map-card:active { transform: scale(.97); }
.ricky-map-card::after { content: '↗'; position: absolute; right: 9px; top: 9px; font-size: 13px; font-weight: 900; }
.ricky-map-icon { font-size: 21px; line-height: 1; }
.ricky-map-card b { font: 800 15px/1.1 'Space Grotesk', sans-serif; padding-right: 3px; }
.ricky-map-card small { font-size: 11px; line-height: 1.25; }
.ricky-map-card:nth-child(1) { --ticket: #d5ef83; }
.ricky-map-card:nth-child(2) { --ticket: #ffc886; }
.ricky-map-card:nth-child(3) { --ticket: #edc6ed; }
.ricky-map-card:nth-child(4) { --ticket: #f6b7a5; }
.ricky-map-card:nth-child(5) { --ticket: #f4dd9a; }
.ricky-map-card:nth-child(6) { --ticket: #c6e2f0; }

@media (max-width: 650px) {
  .nav .navinner { gap: 8px; }
  .nav .snack-brand { flex: 0 1 clamp(105px, 34vw, 154px); }
  .nav .nav-cta { gap: 5px; padding: 10px 9px; min-height: 44px; }
  .ricky-map-open {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 44px;
    padding: 8px 9px;
    border: 1px solid #ebffae;
    border-radius: 12px 12px 12px 4px;
    background: #d2ed77;
    color: #191916;
    font-size: 12px;
    font-weight: 900;
  }
  .ricky-map-open span { font-size: 15px; }
}
