.discovery-map {
  background-color: #f7ead3;
  background-image:
    radial-gradient(circle at 20% 18%, #e2358a22 0 3px, transparent 4px),
    radial-gradient(circle at 76% 72%, #7c8c5425 0 4px, transparent 5px);
  background-size: 54px 54px, 71px 71px;
}

.cdmx-shape-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.map-art-cdmx {
  object-fit: contain;
  object-position: center;
  background: #f8f1e9;
}

/* Locked to the 4:3 photo so contain never letterboxes and the hand-placed
   pin percentages below always line up with the same spot on the image. */
.discovery-map {
  aspect-ratio: 4 / 3;
  min-height: 0;
}

.marker-claveria { left: 43%; top: 22%; }
.marker-alameda { left: 56%; top: 29%; }
.marker-tlalpan { left: 44%; top: 57%; }
.marker-feria { left: 49%; top: 39%; }
.marker-cencalli { left: 38%; top: 36%; }

.marker-temporary { z-index: 4; }
.marker-temporary img { border-color: #e2358a; box-shadow: 0 0 0 4px #fff; }
.marker-temporary span { border: 2px solid #e2358a; text-align: center; line-height: 1.15; }
.marker-temporary span small { display: block; margin-top: 3px; font-size: 8px; color: #6f2645; }

.borough {
  stroke: #fff8e9;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  transition: fill .2s ease;
}

.borough:nth-child(5n+1) { fill: #f3c5bf; }
.borough:nth-child(5n+2) { fill: #d8df9a; }
.borough:nth-child(5n+3) { fill: #efcf94; }
.borough:nth-child(5n+4) { fill: #d8b7c8; }
.borough:nth-child(5n) { fill: #bfd2a1; }
.borough:hover { fill: #e2358a55; }

.marker-guide{display:none}

.map-landmark {
  position: absolute;
  z-index: 2;
  display: grid;
  grid-template-columns: 32px auto;
  align-items: center;
  column-gap: 7px;
  max-width: 150px;
  color: #2c1810;
  pointer-events: none;
}

.map-landmark span { grid-row: 1 / 3; font-size: 29px; filter: drop-shadow(0 3px 2px #fff); }
.map-landmark strong { font-size: 11px; line-height: 1.05; }
.map-landmark small { font-size: 9px; color: #6f5b50; }
.landmark-north { left: 13%; top: 15%; }
.landmark-chapultepec { left: 22%; top: 42%; }
.landmark-alameda { left: 42%; top: 31%; }
.landmark-zocalo { left: 59%; top: 39%; }
.landmark-south { left: 47%; top: 72%; }
.landmark-ajusco { right: 12%; bottom: 10%; }

@media (max-width: 700px) {
  .marker-claveria { left: 43%; top: 20%; }
  .marker-alameda { left: 60%; top: 28%; }
  .marker-tlalpan { left: 45%; top: 58%; }
  .marker-feria { left: 51%; top: 42%; }
  .marker-cencalli { left: 34%; top: 37%; }
  .marker-temporary span { max-width: 145px; white-space: normal; }
  .map-landmark { transform: scale(.82); transform-origin: left top; }
  .landmark-chapultepec { left: 12%; top: 47%; }
  .landmark-alameda { left: 35%; top: 28%; }
  .landmark-zocalo { left: 63%; top: 38%; }
  .landmark-ajusco { right: 2%; }
}

.flavour-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.flavour-card {
  overflow: hidden;
}

.flavour-featured {
  grid-column: 1 / -1;
}

.flavour-collage {
  display: grid;
  grid-template-columns: 1.1fr .9fr .9fr;
  gap: 5px;
  width: calc(100% + 48px);
  height: 390px;
  margin: -24px -24px 25px;
  background: #d8a394;
}

.flavour-collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flavour-mango { background: #d7a56e; }
.flavour-mamey { background: #dd7440; color: #fff; }
.flavour-mango p:not(.tag) { color: #2c1810; }
.flavour-mamey p:not(.tag) { color: #fff8ef; }
.flavour-mango .tag, .flavour-mamey .tag { color: #fff; }
.flavour-mango a, .flavour-mamey a { text-decoration: none; border-bottom: 1px solid; }

@media (max-width: 900px) {
  .flavour-grid { grid-template-columns: 1fr; }
  .flavour-featured { grid-column: auto; }
  .flavour-collage { height: 520px; grid-template-columns: 1fr 1fr; }
  .flavour-collage img:first-child { grid-row: 1 / 3; }
}

@media (max-width: 560px) {
  .flavour-collage { height: 420px; }
}

/* Interactive order preview */
.icecream-builder {
  --flavour-one: #f1d49a;
  --flavour-two: #e2358a;
  display: grid;
  grid-template-columns: minmax(230px, .9fr) 1.1fr;
  align-items: center;
  gap: 20px;
  min-height: 300px;
  padding: 18px 25px;
  border: 2px solid #879345;
  border-radius: 26px;
  background: linear-gradient(135deg, #fffdf4cc, #faffdfe8);
  overflow: hidden;
}

.tub-stage { display: grid; place-items: center; min-width: 0; }
.icecream-tub { width: 100%; max-width: 390px; overflow: visible; transition: transform .35s ease; }
.icecream-builder[data-size="half"] .icecream-tub { transform: scale(.78); }
.icecream-builder[data-size="one"] .icecream-tub { transform: scale(.9); }
.icecream-builder[data-size="four"] .icecream-tub { transform: scale(1.08); }
.icecream-builder[data-size="event"] .icecream-tub { opacity: .38; filter: grayscale(.5); }
.tub-shadow { fill: #24100c20; }
.fill-primary, .scoop { fill: var(--flavour-one); transition: fill .35s ease; }
.fill-secondary { fill: var(--flavour-two); opacity: 0; transition: fill .35s ease, opacity .25s ease; }
.split-wave { fill: none; stroke: #fff8; stroke-width: 4; opacity: 0; }
.icecream-builder.is-combined .fill-secondary,
.icecream-builder.is-combined .split-wave { opacity: 1; }
.icecream-builder.is-combined .scoop-2 { fill: var(--flavour-two); }
.icecream-builder.is-combined .scoop-3 { fill: var(--flavour-two); }
.scoop { stroke: #2c1810; stroke-width: 4; filter: drop-shadow(0 7px 5px #24100c29); }
.scoop-1 { transform-origin: 155px 126px; animation: scoop-in .45s ease both; }
.scoop-2 { transform-origin: 230px 105px; animation: scoop-in .45s .05s ease both; }
.scoop-3 { transform-origin: 307px 127px; animation: scoop-in .45s .1s ease both; }
.tub-glass { fill: #fff7; stroke: #2c1810; stroke-width: 6; }
.glass-shine { fill: none; stroke: #fff; stroke-width: 11; stroke-linecap: round; opacity: .72; }
.shine-right { stroke-width: 7; opacity: .45; }
.tub-logo { fill: #2c1810; font: 700 25px "DM Sans", sans-serif; letter-spacing: .12em; }
.tub-size-label { fill: #2c1810; font: 700 16px "DM Sans", sans-serif; }
.builder-caption span, .builder-caption small { display: block; }
.builder-caption span { color: var(--deep); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; }
.builder-caption strong { display: block; margin: 9px 0; font-size: clamp(20px, 2.2vw, 31px); line-height: 1.08; }
.builder-caption small { color: #556028; font-weight: 700; }
.combine-control { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border: 1px solid #879345; border-radius: 15px; background: #faffdf; cursor: pointer; }
.combine-control input { width: 24px; height: 24px; margin: 0; accent-color: var(--pink); flex: 0 0 auto; }
.combine-control span, .combine-control small { display: block; }
.combine-control small { margin-top: 3px; color: #556028; font-weight: 400; }
.second-flavour-field[hidden] { display: none; }

@keyframes scoop-in { from { transform: translateY(18px) scale(.88); opacity: .3; } to { transform: none; opacity: 1; } }

@media (max-width: 560px) {
  .icecream-builder { grid-template-columns: 1fr; gap: 2px; padding: 12px 16px 20px; text-align: center; }
  .icecream-tub { max-width: 310px; }
  .builder-caption { margin-top: -10px; }
}

@media (prefers-reduced-motion: reduce) {
  .icecream-tub, .fill-primary, .fill-secondary, .scoop, .sound-bars i { transition: none; animation: none; }
}

.jingle-toggle { position: absolute; z-index: 2; right: 16px; top: 16px; display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 10px 14px; border: 2px solid #fff; border-radius: 999px; background: #e2358aed; color: #fff; font: 700 12px "DM Sans", sans-serif; box-shadow: 0 9px 25px #24100c55; cursor: pointer; }
.jingle-toggle:hover, .jingle-toggle:focus-visible { background: #24100c; outline: 3px solid var(--lime); outline-offset: 3px; }
.jingle-icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--pink); font-size: 10px; }
.sound-bars { display: flex; align-items: center; gap: 2px; height: 18px; }
.sound-bars i { display: block; width: 3px; height: 5px; border-radius: 4px; background: currentColor; }
.jingle-toggle.is-playing .sound-bars i { animation: sound-wave .65s ease-in-out infinite alternate; }
.jingle-toggle.is-playing .sound-bars i:nth-child(2) { animation-delay: -.3s; }
.jingle-toggle.is-playing .sound-bars i:nth-child(3) { animation-delay: -.5s; }
.jingle-toggle.is-playing .sound-bars i:nth-child(4) { animation-delay: -.15s; }
@keyframes sound-wave { to { height: 18px; } }

.flavour-view-tools { max-width: 440px; }
.flavour-view-tools > p { margin: 0; line-height: 1.7; color: #6f5b50; }
.density-control { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.density-control button { display: grid; place-items: center; width: 43px; height: 43px; border: 2px solid var(--ink); border-radius: 50%; background: var(--white); color: var(--ink); font: 700 24px/1 "DM Sans", sans-serif; cursor: pointer; }
.density-control button:hover:not(:disabled), .density-control button:focus-visible { color: #fff; background: var(--pink); border-color: var(--pink); }
.density-control button:disabled { opacity: .28; cursor: not-allowed; }
.density-control span { min-width: 72px; font-size: 12px; font-weight: 700; text-align: center; }
.diet-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: -22px 0 12px; }
.diet-filters label { cursor: pointer; }
.diet-filters input { position: absolute; opacity: 0; pointer-events: none; }
.diet-filters span, .diet-filters button { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border: 2px solid var(--ink); border-radius: 999px; background: var(--white); color: var(--ink); font: 700 13px "DM Sans", sans-serif; }
.diet-filters input:checked + span { border-color: var(--pink); background: var(--pink); color: #fff; box-shadow: 0 0 0 3px #e2358a25; }
.diet-filters input:focus-visible + span { outline: 3px solid var(--lime); outline-offset: 3px; }
.diet-filters button { border-style: dashed; cursor: pointer; }
.diet-filter-note { margin: 0 0 28px; color: #6f5b50; font-size: 12px; }
.diet-empty { margin: 25px 0; padding: 24px; border-radius: 18px; background: #fff; color: var(--deep); font-weight: 700; }
.flavour-card[hidden] { display: none; }
.order-diet-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 0; padding: 15px; border: 1px solid #d8c4b3; border-radius: 15px; }
.order-diet-filters legend { padding: 0 7px; font-size: 13px; font-weight: 700; }
.order-diet-filters label { cursor: pointer; }
.order-diet-filters input { position: absolute; opacity: 0; pointer-events: none; }
.order-diet-filters span, .order-diet-filters button { display: inline-flex; min-height: 40px; align-items: center; padding: 9px 13px; border: 2px solid #d8c4b3; border-radius: 999px; background: var(--cream); color: var(--ink); font: 700 12px "DM Sans", sans-serif; }
.order-diet-filters input:checked + span { border-color: var(--pink); background: var(--pink); color: #fff; }
.order-diet-filters input:focus-visible + span { outline: 3px solid var(--lime); outline-offset: 2px; }
.order-diet-filters button { border-style: dashed; cursor: pointer; }
.order-diet-filters small { flex-basis: 100%; color: #d8ccc5; font-weight: 400; }
.order-diet-empty { margin: 0; padding: 15px; border-radius: 12px; background: #fff1f6; color: var(--deep); font-weight: 700; }

@media (min-width: 901px) {
  .flavour-world .flavour-grid { grid-template-columns: repeat(var(--flavour-columns, 2), minmax(0, 1fr)); }
  .flavour-world[data-columns="2"] { --flavour-columns: 2; }
  .flavour-world[data-columns="3"] { --flavour-columns: 3; }
  .flavour-world[data-columns="4"] { --flavour-columns: 4; }
  .flavour-world[data-columns="5"] { --flavour-columns: 5; }
  .flavour-world[data-columns="6"] { --flavour-columns: 6; }
  .flavour-world[data-columns="3"] .clean-flavour-image { height: 290px; }
  .flavour-world[data-columns="4"] .clean-flavour-image { height: 220px; }
  .flavour-world[data-columns="5"] .clean-flavour-image { height: 175px; }
  .flavour-world[data-columns="6"] .clean-flavour-image { height: 145px; }
  .flavour-world[data-columns="4"] .flavour-card,
  .flavour-world[data-columns="5"] .flavour-card,
  .flavour-world[data-columns="6"] .flavour-card { padding: 16px; min-height: 0; border-radius: 20px; }
  .flavour-world[data-columns="4"] .clean-flavour-image,
  .flavour-world[data-columns="5"] .clean-flavour-image,
  .flavour-world[data-columns="6"] .clean-flavour-image { width: calc(100% + 32px); margin: -16px -16px 18px; border-radius: 20px 20px 0 0; }
  .flavour-world[data-columns="4"] .flavour-card h3 { font-size: 25px; }
  .flavour-world[data-columns="5"] .flavour-card h3,
  .flavour-world[data-columns="6"] .flavour-card h3 { font-size: 20px; }
  .flavour-world[data-columns="5"] .flavour-card p:not(.tag),
  .flavour-world[data-columns="6"] .flavour-card p:not(.tag) { font-size: 12px; }
}

@media (max-width: 900px) {
  .flavour-view-tools { max-width: none; margin-top: 20px; }
  .density-control { display: none; }
}

/* Cliente frecuente */
.loyalty-section { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 690px; background: #e2358a; color: #fff; overflow: hidden; }
.loyalty-cards { position: relative; min-height: 690px; background: radial-gradient(circle at 35% 34%, #f8f1e955 0 4px, transparent 5px), linear-gradient(145deg, #b93169, #e2358a 55%, #f285b8); background-size: 45px 45px, auto; }
.loyalty-card { position: absolute; width: min(72%, 520px); border-radius: 18px; box-shadow: 0 30px 65px #4a100c58; border: 1px solid #fff7; }
.loyalty-front { left: 9%; top: 14%; transform: rotate(-7deg); }
.loyalty-back { right: 7%; bottom: 12%; transform: rotate(6deg); }
.loyalty-copy { align-self: center; padding: 85px max(34px, calc((100vw - var(--max))/2)); padding-left: 70px; background: var(--ink); }
.loyalty-copy .eyebrow { color: var(--lime); }
.loyalty-copy h2 { margin: 0; font: 700 clamp(42px, 5vw, 68px)/1.01 "DM Sans", sans-serif; letter-spacing: -.045em; }
.membership-offer { margin: 30px 0 38px; padding: 26px; border: 2px solid #e2358a; border-radius: 24px; background: #ffffff10; }
.membership-offer .tag { margin: 0 0 8px; color: var(--lime); }
.membership-offer h3 { margin: 0 0 18px; font: 700 30px/1.05 "DM Sans", sans-serif; }
.membership-offer ul { display: grid; gap: 10px; margin: 0 0 22px; padding-left: 20px; color: #eee1db; }
.membership-offer .button { display: inline-flex; }
.loyalty-steps { display: grid; gap: 16px; margin: 34px 0; }
.loyalty-steps div { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 13px; }
.loyalty-steps strong { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--pink); }
.loyalty-steps p { margin: 0; color: #eee1db; line-height: 1.45; }
.loyalty-copy > small { display: block; margin-top: 15px; color: #bbaea7; }

@media (max-width: 900px) {
  .loyalty-section { grid-template-columns: 1fr; }
  .loyalty-cards { min-height: 590px; }
  .loyalty-copy { padding: 70px 30px; }
}

@media (max-width: 560px) {
  .loyalty-cards { min-height: 430px; }
  .loyalty-card { width: 80%; border-radius: 11px; }
  .loyalty-front { left: 5%; top: 12%; }
  .loyalty-back { right: 4%; bottom: 10%; }
  .loyalty-copy h2 { font-size: 42px; }
}