/**
 * Descubrir — Zone recommender page
 * Mirrors search.css layout where possible; adds pin-picker and results-list styles.
 */

/* ─────────────────────────────────────────────
   Global tap feedback for quiz UI (Apple-ish).
   Scale + spring bounce, GPU-only (transform).
   Honors prefers-reduced-motion at the bottom.
   ───────────────────────────────────────────── */
.quiz-opt,
.quiz-next,
.quiz-back,
.quiz-extra-opt,
.pin-skip,
.descubrir-start-btn,
.mtz-interlude-cta,
.zone-card {
  transition:
    transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 180ms ease;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}

.quiz-opt:active,
.quiz-next:active,
.quiz-back:active,
.quiz-extra-opt:active,
.pin-skip:active,
.descubrir-start-btn:active,
.mtz-interlude-cta:active,
.zone-card:active {
  transform: scale(0.97);
}

/* Selected state — subtle lift + glow, feels chosen */
.quiz-opt.selected {
  box-shadow: 0 6px 18px rgba(45, 90, 61, 0.18), 0 0 0 2px #2D5A3D inset;
  transform: translateY(-1px);
}

/* ─────────────────────────────────────────────
   Interlude — chapter-end full-screen moment.
   ───────────────────────────────────────────── */
.mtz-interlude {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* Inline variant — interlude lives inside the quiz panel as one more "screen"
   in the flow. No fixed positioning, no backdrop: the card sits on the panel
   background like any other question. */
.mtz-interlude.mtz-interlude-inline {
  position: relative;
  inset: auto;
  z-index: auto;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}
.mtz-interlude.mtz-interlude-inline .mtz-interlude-card {
  box-shadow:
    0 12px 32px -16px rgba(45, 90, 61, 0.22),
    0 0 0 1px rgba(45, 90, 61, 0.06);
  max-width: 380px;
}

.mtz-interlude-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 25, 20, 0.55);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}

.mtz-interlude-card {
  position: relative;
  max-width: 440px;
  width: 100%;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbf6 100%);
  border-radius: 24px;
  padding: 40px 32px 32px;
  box-shadow:
    0 30px 60px -15px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  text-align: center;
  will-change: transform, opacity;
}

.mtz-interlude-chapter {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  color: #6ab06a;
  background: #eaf5e3;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.mtz-interlude-title {
  font-family: 'Sora', sans-serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  color: #1a2e22;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.mtz-interlude-stat {
  margin: 24px 0 8px;
}

.mtz-interlude-stat-number {
  font-family: 'Sora', sans-serif;
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  color: #2D5A3D;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  min-height: 64px;
}

.mtz-interlude-stat-label {
  font-size: 13px;
  color: #5e6c66;
  margin-top: 8px;
  font-weight: 500;
}

.mtz-interlude-copy {
  font-size: 15px;
  line-height: 1.55;
  color: #3a4a42;
  margin: 12px 0 20px;
}
.mtz-interlude-copy + .mtz-interlude-copy {
  margin-top: -8px;
}

.mtz-interlude-meta {
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #6b7a72;
  margin: 4px 0 12px;
  font-weight: 500;
}

/* Reuse the stage-intro stepper styles but center horizontally inside the
   interlude card (the intro layout relies on flex column centering; the card
   uses text-align which doesn't affect flex children). */
.mtz-interlude-stepper {
  justify-content: center;
  margin: 12px 0 24px;
}

.mtz-interlude-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 8px 0 20px;
}

.mtz-interlude-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 6px 12px;
  background: #f0f7ed;
  color: #2D5A3D;
  border: 1px solid #cfe3c5;
  border-radius: 999px;
  font-weight: 500;
}

.mtz-interlude-cta {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(180deg, #3d7550 0%, #2D5A3D 100%);
  border: none;
  padding: 14px 28px;
  border-radius: 14px;
  cursor: pointer;
  margin-top: 16px;
  min-width: 180px;
  box-shadow: 0 6px 14px -4px rgba(45, 90, 61, 0.5);
  will-change: transform;
}

/* Disjoint-zones recovery — two "+10 min" CTAs stacked, secondary review link.
   Reuses .mtz-interlude-cta styling so the buttons feel native to the flow. */
.mtz-disjoint-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 14px;
}
.mtz-disjoint-actions .mtz-interlude-cta {
  width: 100%;
  margin-top: 0;
  min-width: 0;
}
.mtz-disjoint-review {
  display: block;
  margin: 0 auto;
  background: none;
  border: none;
  color: #5e6c66;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(94, 108, 102, 0.3);
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 6px 8px;
}
.mtz-disjoint-review:hover {
  color: #2D5A3D;
  text-decoration-color: currentColor;
}
.mtz-disjoint-review:disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

/* Busy state — entered the moment the user taps a "+10 min" button, so they
   get immediate feedback while the prefetch + recompute runs in the background.
   Disables both CTAs, fades the secondary link, and flips the clicked button
   to a spinner + "Recalculando…" label. Persists until the caller overwrites
   the container with the next screen. */
.mtz-interlude-card.is-busy .mtz-disjoint-bump {
  pointer-events: none;
}
.mtz-disjoint-bump[disabled] {
  cursor: default;
  opacity: 0.7;
  box-shadow: none;
}
.mtz-disjoint-bump[disabled]:not(.is-loading) {
  background: #cfd8d2;
  color: rgba(255, 255, 255, 0.85);
}
.mtz-disjoint-bump.is-loading {
  opacity: 1;
  position: relative;
  padding-left: 42px;
}
.mtz-disjoint-bump.is-loading::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: mtz-disjoint-spin 700ms linear infinite;
}
@keyframes mtz-disjoint-spin {
  to { transform: rotate(360deg); }
}

/* Emotion variants */
.mtz-interlude-peak .mtz-interlude-card {
  background: linear-gradient(180deg, #ffffff 0%, #f0f7ed 100%);
}
.mtz-interlude-peak .mtz-interlude-stat-number {
  background: linear-gradient(180deg, #2D5A3D 0%, #4a8a5a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mtz-interlude-climax .mtz-interlude-card {
  background: linear-gradient(180deg, #ffffff 0%, #fff9ec 100%);
}

@media (max-width: 480px) {
  .mtz-interlude-card { padding: 32px 20px 24px; }
  .mtz-interlude-title { font-size: 22px; }
  .mtz-interlude-stat-number { font-size: 52px; min-height: 52px; }
}

/* ── Progress dots — 3-stage journey indicator at the top of every interlude.
      Same position + style across all three screens → continuity cue. ── */
.mtz-interlude-progress {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 0 18px;
}
.mtz-interlude-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d7dbd4;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), background 300ms ease;
}
.mtz-interlude-dot-done {
  background: #2D5A3D;
}
.mtz-interlude-dot-active {
  background: #2D5A3D;
  transform: scale(1.35);
  box-shadow: 0 0 0 4px rgba(45, 90, 61, 0.14);
}

/* Transient loading state shown in the quiz panel while the Ch.2 isochrone
   prefetch resolves — usually <200ms because the prefetch fires one or two
   screens earlier. Replaced by the inline MtzInterlude once the count is ready. */
body.descubrir-page .descubrir-reward-analysis {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 40px 20px;
  color: #2f3f38;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
}
.descubrir-reward-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(45, 90, 61, 0.15);
  border-top-color: #2D5A3D;
  border-radius: 50%;
  animation: descubrir-reward-spin 700ms linear infinite;
}
@keyframes descubrir-reward-spin { to { transform: rotate(360deg); } }

/* ── Stage visual — animated SVG above the title. Shared sizing so all three
      stages align vertically as the user moves from 1 → 2 → 3. ── */
.mtz-stage-visual {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 280 / 200;
  margin: 0 auto 16px;
  position: relative;
}
.mtz-stage-visual svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Stage 1 — pin drops. Each pin falls + settles with a bounce, ripple pulses. */
.mtz-stage-pins .mtz-stage-glow {
  opacity: 0;
  animation: mtz-stage-fade-in 600ms ease-out 100ms forwards;
}
.mtz-stage-pins .mtz-stage-spain {
  opacity: 0;
  transform: translateY(8px);
  transform-origin: 140px 110px;
  animation: mtz-stage-fade-in-up 700ms cubic-bezier(0.22, 1, 0.36, 1) 200ms forwards;
}
.mtz-stage-pins .mtz-stage-pin {
  opacity: 0;
  transform: translateY(-60px);
}
.mtz-stage-pins .mtz-stage-pin-1 {
  animation: mtz-pin-drop 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 500ms forwards;
}
.mtz-stage-pins .mtz-stage-pin-2 {
  animation: mtz-pin-drop 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 800ms forwards;
}
.mtz-stage-pins .mtz-stage-pin-3 {
  animation: mtz-pin-drop 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 1100ms forwards;
}
.mtz-stage-pins .mtz-stage-pin-ripple {
  fill: rgba(45, 90, 61, 0.35);
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0;
  animation: mtz-pin-ripple 1600ms ease-out infinite;
}
.mtz-stage-pins .mtz-stage-pin-1 .mtz-stage-pin-ripple { animation-delay: 1300ms; }
.mtz-stage-pins .mtz-stage-pin-2 .mtz-stage-pin-ripple { animation-delay: 1600ms; }
.mtz-stage-pins .mtz-stage-pin-3 .mtz-stage-pin-ripple { animation-delay: 1900ms; }

@keyframes mtz-stage-fade-in {
  to { opacity: 1; }
}
@keyframes mtz-stage-fade-in-up {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes mtz-pin-drop {
  0%   { opacity: 0; transform: translateY(-60px); }
  60%  { opacity: 1; transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes mtz-pin-ripple {
  0%   { opacity: 0.55; transform: scale(0.6); }
  80%  { opacity: 0;    transform: scale(2.2); }
  100% { opacity: 0;    transform: scale(2.2); }
}

/* Stage 2 — isochrone intersection. Each circle scales out from its center,
   the intersection layer reveals last as a confident green fill. */
.mtz-stage-isochrones .mtz-stage-iso {
  opacity: 0;
  transform: scale(0);
  transform-origin: center;
  transform-box: fill-box;
}
.mtz-stage-isochrones .mtz-stage-iso-1 {
  animation: mtz-iso-expand 900ms cubic-bezier(0.22, 1, 0.36, 1) 200ms forwards;
}
.mtz-stage-isochrones .mtz-stage-iso-2 {
  animation: mtz-iso-expand 900ms cubic-bezier(0.22, 1, 0.36, 1) 450ms forwards;
}
.mtz-stage-isochrones .mtz-stage-iso-3 {
  animation: mtz-iso-expand 900ms cubic-bezier(0.22, 1, 0.36, 1) 700ms forwards;
}
.mtz-stage-isochrones .mtz-stage-iso-center {
  opacity: 0;
  animation: mtz-stage-fade-in 500ms ease-out 1500ms forwards;
}
.mtz-stage-isochrones .mtz-stage-iso-center rect {
  opacity: 0.75;
}
.mtz-stage-isochrones .mtz-stage-iso-pins circle {
  opacity: 0;
  animation: mtz-stage-fade-in 300ms ease-out forwards;
}
.mtz-stage-isochrones .mtz-stage-iso-pins circle:nth-child(1) { animation-delay: 250ms; }
.mtz-stage-isochrones .mtz-stage-iso-pins circle:nth-child(2) { animation-delay: 500ms; }
.mtz-stage-isochrones .mtz-stage-iso-pins circle:nth-child(3) { animation-delay: 750ms; }

@keyframes mtz-iso-expand {
  0%   { opacity: 0;    transform: scale(0); }
  40%  { opacity: 0.9;  }
  100% { opacity: 1;    transform: scale(1); }
}

/* Stage 3 — zones grid. Match cells pulse green in sequence, a diagonal
   sweep of light crosses the grid once to give the reveal a "scanning" feel. */
.mtz-stage-zones .mtz-stage-cell {
  fill: #eae4d5;
  opacity: 0;
  animation: mtz-stage-fade-in 220ms ease-out forwards;
}
.mtz-stage-zones .mtz-stage-cell[data-idx="0"]  { animation-delay: 0ms; }
.mtz-stage-zones .mtz-stage-cell[data-idx="1"]  { animation-delay: 30ms; }
.mtz-stage-zones .mtz-stage-cell[data-idx="2"]  { animation-delay: 60ms; }
.mtz-stage-zones .mtz-stage-cell[data-idx="3"]  { animation-delay: 90ms; }
.mtz-stage-zones .mtz-stage-cell[data-idx="4"]  { animation-delay: 120ms; }
.mtz-stage-zones .mtz-stage-cell[data-idx="5"]  { animation-delay: 150ms; }
.mtz-stage-zones .mtz-stage-cell[data-idx="6"]  { animation-delay: 180ms; }
.mtz-stage-zones .mtz-stage-cell[data-idx="7"]  { animation-delay: 210ms; }
.mtz-stage-zones .mtz-stage-cell[data-idx="8"]  { animation-delay: 240ms; }
.mtz-stage-zones .mtz-stage-cell[data-idx="9"]  { animation-delay: 270ms; }
.mtz-stage-zones .mtz-stage-cell[data-idx="10"] { animation-delay: 300ms; }
.mtz-stage-zones .mtz-stage-cell[data-idx="11"] { animation-delay: 330ms; }
.mtz-stage-zones .mtz-stage-cell[data-idx="12"] { animation-delay: 360ms; }
.mtz-stage-zones .mtz-stage-cell[data-idx="13"] { animation-delay: 390ms; }
.mtz-stage-zones .mtz-stage-cell[data-idx="14"] { animation-delay: 420ms; }
.mtz-stage-zones .mtz-stage-cell[data-idx="15"] { animation-delay: 450ms; }
.mtz-stage-zones .mtz-stage-cell[data-idx="16"] { animation-delay: 480ms; }
.mtz-stage-zones .mtz-stage-cell[data-idx="17"] { animation-delay: 510ms; }
.mtz-stage-zones .mtz-stage-cell[data-idx="18"] { animation-delay: 540ms; }
.mtz-stage-zones .mtz-stage-cell[data-idx="19"] { animation-delay: 570ms; }
.mtz-stage-zones .mtz-stage-cell[data-idx="20"] { animation-delay: 600ms; }
.mtz-stage-zones .mtz-stage-cell[data-idx="21"] { animation-delay: 630ms; }
.mtz-stage-zones .mtz-stage-cell[data-idx="22"] { animation-delay: 660ms; }
.mtz-stage-zones .mtz-stage-cell[data-idx="23"] { animation-delay: 690ms; }
.mtz-stage-zones .mtz-stage-cell[data-idx="24"] { animation-delay: 720ms; }
.mtz-stage-zones .mtz-stage-cell[data-idx="25"] { animation-delay: 750ms; }
.mtz-stage-zones .mtz-stage-cell[data-idx="26"] { animation-delay: 780ms; }
.mtz-stage-zones .mtz-stage-cell[data-idx="27"] { animation-delay: 810ms; }
.mtz-stage-zones .mtz-stage-cell[data-idx="28"] { animation-delay: 840ms; }
.mtz-stage-zones .mtz-stage-cell[data-idx="29"] { animation-delay: 870ms; }
.mtz-stage-zones .mtz-stage-cell[data-idx="30"] { animation-delay: 900ms; }
.mtz-stage-zones .mtz-stage-cell[data-idx="31"] { animation-delay: 930ms; }
.mtz-stage-zones .mtz-stage-cell[data-idx="32"] { animation-delay: 960ms; }
.mtz-stage-zones .mtz-stage-cell[data-idx="33"] { animation-delay: 990ms; }
.mtz-stage-zones .mtz-stage-cell[data-idx="34"] { animation-delay: 1020ms; }
.mtz-stage-zones .mtz-stage-cell-match {
  animation: mtz-zone-match 500ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 1200ms;
}
.mtz-stage-zones .mtz-stage-zones-sweep {
  opacity: 0.8;
  animation: mtz-zones-sweep 1400ms cubic-bezier(0.4, 0, 0.2, 1) 1000ms forwards;
}

@keyframes mtz-zone-match {
  0%   { fill: #eae4d5; transform: scale(1); transform-origin: center; transform-box: fill-box; }
  40%  { fill: #2D5A3D; transform: scale(1.1); }
  100% { fill: #2D5A3D; transform: scale(1); }
}
@keyframes mtz-zones-sweep {
  0%   { transform: translateX(-40px); }
  100% { transform: translateX(320px); }
}

/* ── Mobile: interlude goes full-panel. No card cap, edge-to-edge background,
      CTA pinned to the bottom so the reward moment feels like a full screen,
      not a modal centered on a map. ── */
@media (max-width: 900px) {
  .mtz-interlude.mtz-interlude-inline {
    padding: 0;
  }
  .mtz-interlude.mtz-interlude-inline .mtz-interlude-card {
    max-width: none;
    width: 100%;
    height: 100%;
    border-radius: 0;
    padding: 28px 24px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    box-shadow: none;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbf6 60%, #eef5e8 100%);
  }
  .mtz-interlude.mtz-interlude-inline.mtz-interlude-peak .mtz-interlude-card {
    background: linear-gradient(180deg, #ffffff 0%, #f0f7ed 55%, #dfeeda 100%);
  }
  .mtz-interlude.mtz-interlude-inline.mtz-interlude-climax .mtz-interlude-card {
    background: linear-gradient(180deg, #ffffff 0%, #fff4d6 55%, #ffe9ac 100%);
  }
  .mtz-interlude.mtz-interlude-inline .mtz-interlude-progress { margin-top: 8px; }
  .mtz-interlude.mtz-interlude-inline .mtz-stage-visual { margin-top: 12px; }
  .mtz-interlude.mtz-interlude-inline .mtz-interlude-title { font-size: 28px; margin-top: 4px; }
  .mtz-interlude.mtz-interlude-inline .mtz-interlude-copy { max-width: 340px; }
  .mtz-interlude.mtz-interlude-inline .mtz-interlude-badges { max-width: 340px; }
  /* Push the CTA to the bottom of the panel — thumb-reachable, intentional. */
  .mtz-interlude.mtz-interlude-inline .mtz-interlude-cta {
    margin-top: auto;
    width: 100%;
    max-width: 360px;
    padding: 16px 24px;
    font-size: 16px;
    border-radius: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mtz-stage-visual *,
  .mtz-stage-pins *,
  .mtz-stage-isochrones *,
  .mtz-stage-zones * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Pin-drop ripple (used on map-pin suggestion select) */
.pin-drop-ripple {
  position: absolute;
  border: 2px solid #2D5A3D;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}

/* Reduced-motion: strip every motion, keep feel through typography + color */
@media (prefers-reduced-motion: reduce) {
  .quiz-opt, .quiz-next, .quiz-back, .quiz-extra-opt,
  .pin-skip, .descubrir-start-btn,
  .mtz-interlude-cta, .zone-card {
    transition: none !important;
  }
  .quiz-opt:active, .quiz-next:active, .quiz-back:active,
  .quiz-extra-opt:active, .pin-skip:active,
  .descubrir-start-btn:active,
  .mtz-interlude-cta:active, .zone-card:active {
    transform: none !important;
  }
}


/* ── Page shell ───────────────────────────── */
body.descubrir-page {
  overflow: hidden;
}

.descubrir-main {
  display: grid;
  grid-template-columns: 420px 1fr;
  height: calc(100vh - var(--header-height, 52px));
  position: relative;
}

.descubrir-panel {
  background: #FAF7F2;
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* During quiz mode the content is sized to fit the panel, so the panel
   should not expose a scrollbar. Otherwise the transform-based fade on
   every answer briefly overflows and flashes a scrollbar on desktop. */
body.descubrir-quiz-mode .descubrir-panel {
  overflow-y: hidden;
}

/* Cascade height down so screens (intro, results, quiz) fill the panel
   instead of collapsing to their natural height and leaving dead space. */
#descubrir-panel-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative; /* anchor for .descubrir-loading overlay (inset: 0) */
}

.descubrir-map-container {
  position: relative;
  background: #e5e1da;
}

/* ─────────────────────────────────────────────
   Mobile cinematic reveal (Ch.2 → Ch.3 moment).
   The body gets .descubrir-map-cinematic while the pin tour plays;
   the panel collapses to zero so the map fills the viewport, then
   slides back open to reveal the peak card. Transition is in
   .descubrir-panel's base rule inside the mobile media query.
   ───────────────────────────────────────────── */

.mtz-tour-chip {
  position: absolute;
  pointer-events: none;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 82vw;
  padding: 10px 14px 11px;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-radius: 16px;
  box-shadow:
    0 12px 28px -10px rgba(15, 25, 20, 0.28),
    0 0 0 1px rgba(15, 25, 20, 0.06);
  /* Positioned with left/top at the pin's projected pixel; the transform
     lifts the chip so its tail sits just above the pin. */
  transform: translate(-50%, calc(-100% - 16px)) scale(0.88);
  transform-origin: 50% 100%;
  opacity: 0;
  transition:
    opacity 260ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
}
.mtz-tour-chip.is-enter {
  opacity: 1;
  transform: translate(-50%, calc(-100% - 16px)) scale(1);
}
.mtz-tour-chip.is-exit {
  opacity: 0;
  transform: translate(-50%, calc(-100% - 22px)) scale(0.94);
  transition:
    opacity 220ms cubic-bezier(0.4, 0, 1, 1),
    transform 260ms cubic-bezier(0.4, 0, 1, 1);
}
/* Tail — small rotated square so the chip visually points at the pin. */
.mtz-tour-chip::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.96);
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 1px 1px 0 rgba(15, 25, 20, 0.05);
  border-radius: 2px;
}
.mtz-tour-chip-emoji {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.mtz-tour-chip-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mtz-tour-chip-title {
  font-family: 'Sora', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: #1a2e22;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.mtz-tour-chip-meta {
  font-size: 12px;
  color: #5e6c66;
  font-weight: 500;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 62vw;
}

/* Loading chip — tiny white pill at the top of the map, shown while the
   /api/descubrir prefetch is still resolving (Spain view visible underneath). */
.mtz-tour-loading-chip {
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 12px;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-radius: 999px;
  box-shadow:
    0 10px 24px -8px rgba(15, 25, 20, 0.18),
    0 0 0 1px rgba(15, 25, 20, 0.05);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #1a2e22;
  opacity: 0;
  transform: translateX(-50%) translateY(-6px);
  transition:
    opacity 280ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.mtz-tour-loading-chip.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.mtz-tour-loading-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(45, 90, 61, 0.22);
  border-top-color: #2D5A3D;
  border-radius: 50%;
  animation: descubrir-reward-spin 700ms linear infinite;
  flex-shrink: 0;
}

/* Status chip — same pill shape as the loading chip but with a colored
   dot (matching the current anchor's color) in place of the spinner.
   Shown during the radii reveal + intersection bloom at the top of the
   map; the text crossfades in place via `is-swap`. */
.mtz-tour-status-chip {
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px 8px 12px;
  max-width: 88vw;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-radius: 999px;
  box-shadow:
    0 10px 24px -8px rgba(15, 25, 20, 0.18),
    0 0 0 1px rgba(15, 25, 20, 0.05);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #1a2e22;
  opacity: 0;
  transform: translateX(-50%) translateY(-6px);
  transition:
    opacity 280ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.mtz-tour-status-chip.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.mtz-tour-status-chip.is-swap {
  opacity: 0;
  transform: translateX(-50%) translateY(-4px);
  transition:
    opacity 180ms cubic-bezier(0.4, 0, 1, 1),
    transform 200ms cubic-bezier(0.4, 0, 1, 1);
}
.mtz-tour-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2D5A3D;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}
.mtz-tour-status-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70vw;
}

/* Bottom sheet — final reward moment. Rises from below the viewport when
   the tour finishes, holds the rolled count + CTA, slides down on CTA tap. */
.descubrir-reward-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: 22px 20px calc(18px + env(safe-area-inset-bottom));
  background: #ffffff;
  border-radius: 26px 26px 0 0;
  box-shadow:
    0 -24px 60px -16px rgba(15, 25, 20, 0.28),
    0 -1px 0 rgba(15, 25, 20, 0.04) inset;
  transform: translateY(105%);
  transition: transform 580ms cubic-bezier(0.22, 1, 0.36, 1);
  max-height: 72vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.descubrir-reward-sheet.is-open {
  transform: translateY(0);
}
/* Drag-handle hint — purely decorative, the sheet isn't swipeable. */
.descubrir-reward-sheet::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 50%;
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: rgba(15, 25, 20, 0.16);
  transform: translateX(-50%);
}
/* MtzInterlude rendered inside the sheet: strip the card chrome (the sheet
   IS the card) and tighten typography so the title doesn't wrap awkwardly
   on a 375px viewport. */
.descubrir-reward-sheet .mtz-interlude {
  position: relative;
  inset: auto;
  z-index: auto;
  padding: 0;
  height: auto;
  width: 100%;
  display: block;
}
.descubrir-reward-sheet .mtz-interlude.mtz-interlude-inline {
  flex: 0 0 auto;
  padding: 0;
  height: auto;
}
/* Selectors include `.mtz-interlude-inline` to match the specificity (0,3,0)
   of the mobile @media rule at the top of this file — otherwise those rules
   bump the title to 28px inside the sheet, which is way too big for a
   374px-wide bottom sheet. */
.descubrir-reward-sheet .mtz-interlude-inline .mtz-interlude-card,
.descubrir-reward-sheet .mtz-interlude-peak.mtz-interlude-inline .mtz-interlude-card {
  background: transparent !important;
  box-shadow: none !important;
  padding: 8px 2px 0 !important;
  max-width: none;
  text-align: center;
}
.descubrir-reward-sheet .mtz-interlude-inline .mtz-interlude-title {
  font-family: 'Sora', sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.22;
  margin: 0 auto 2px;
  letter-spacing: -0.015em;
  max-width: none;
  padding: 0 6px;
  margin-top: 0;
}
.descubrir-reward-sheet .mtz-interlude-inline .mtz-interlude-stat {
  margin: 12px 0 4px;
}
.descubrir-reward-sheet .mtz-interlude-inline .mtz-interlude-stat-number {
  font-size: 52px;
  min-height: 52px;
  font-weight: 700;
  letter-spacing: -0.035em;
}
.descubrir-reward-sheet .mtz-interlude-inline .mtz-interlude-stat-label {
  font-size: 12.5px;
  margin-top: 4px;
  color: #5e6c66;
  font-weight: 500;
}
.descubrir-reward-sheet .mtz-interlude-inline .mtz-interlude-copy {
  font-size: 14px;
  line-height: 1.5;
  color: #52615a;
  margin: 12px auto 4px;
  max-width: 320px;
}
.descubrir-reward-sheet .mtz-interlude-inline .mtz-interlude-cta {
  display: block;
  width: 100%;
  padding: 16px 24px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  margin: 18px 0 0;
  min-width: 0;
  max-width: none;
}

/* With the sheet open, keep the map visible and interactive but hide the
   chrome (controls + label) so nothing fights with the sheet's focus. The
   cinematic rule already hides them; this keeps them hidden through the
   sheet's slide-up. */
body.descubrir-reward-sheet-open .maplibregl-ctrl,
body.descubrir-reward-sheet-open .descubrir-isochrone-label {
  opacity: 0 !important;
  pointer-events: none;
}

.descubrir-map-container #map {
  width: 100%;
  height: 100%;
}

/* ──────────────────────────────────────────────
   Stage intro — shown before each of the 3 quiz chapters.
   Layout:
     [ hero illustration — top ~55% ]
     [ cream content card pulled up  ]
       · title
       · copy (simple + one technical verb)
       · 1 ── 2 ── 3 stepper
       · full-width green CTA (pinned bottom)
   Each chapter uses the same component — consistency is the point,
   it's what makes the 3 transitions read as one journey.
   ────────────────────────────────────────────── */
.stage-intro {
  flex: 1 1 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: #FAF7F2;
  position: relative;
  overflow: hidden;
}
.stage-intro-hero {
  flex: 0 0 auto;
  position: relative;
  height: 52vh;
  min-height: 260px;
  max-height: 460px;
  overflow: hidden;
}
/* Per-stage fallback gradients — show if the placeholder jpg 404s so the
   layout stays intact while real illustrations are being produced. */
.stage-intro-hero-1 {
  background: linear-gradient(135deg, #f5e6d0 0%, #e8c89a 100%);
}
.stage-intro-hero-2 {
  background: linear-gradient(135deg, #e5eddc 0%, #b0c79a 100%);
}
.stage-intro-hero-3 {
  background: linear-gradient(135deg, #f4e8c9 0%, #d8b56a 100%);
}
/* Reveal hero — same footprint as the image heroes (same height), but holds
   the rolling count + label centered. Soft green gradient to signal "peak"
   celebration without needing confetti to carry the whole moment. */
.stage-intro-hero-reveal {
  background: linear-gradient(180deg, #eaf5e3 0%, #d4e8ca 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.stage-intro-reveal-number {
  text-align: center;
  padding: 16px 20px 40px;
}
.stage-intro-reveal-num {
  font-family: 'Sora', sans-serif;
  font-size: 88px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, #2D5A3D 0%, #4a8a5a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #2D5A3D; /* fallback for browsers without background-clip:text */
}
.stage-intro-reveal-label {
  font-size: 14px;
  color: #2D5A3D;
  margin-top: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
@media (max-width: 480px) {
  .stage-intro-reveal-num { font-size: 72px; }
  .stage-intro-reveal-label { font-size: 13px; }
}
.stage-intro-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Subtle fade at the bottom of the hero so the cream content card blends in
   instead of sitting on a hard edge. */
.stage-intro-hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 40px;
  background: linear-gradient(180deg, rgba(250, 247, 242, 0), #FAF7F2 100%);
  pointer-events: none;
}
.stage-intro-back {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: #1a2e22;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.15);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.stage-intro-back:hover { transform: translateX(-2px); }

.stage-intro-content {
  flex: 1 1 auto;
  background: #FAF7F2;
  border-radius: 24px 24px 0 0;
  margin-top: -24px;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}
.stage-intro-title {
  font-family: 'Sora', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #1a2e22;
  margin: 0 0 12px;
  letter-spacing: -0.015em;
  line-height: 1.18;
}
.stage-intro-copy {
  font-size: 15px;
  line-height: 1.55;
  color: #52615a;
  margin: 0 0 26px;
  max-width: 340px;
}

/* 1 ── 2 ── 3 stepper.
   Steady states:
     · future   = soft cream with brown number
     · current  = solid green + white number + green halo
     · done     = solid green + white checkmark (no halo)
   Entrance animation (plays when moving from stage N-1 → stage N):
     · previous step starts "looking like current" (halo on, number visible),
       then the halo fades → the number fades out → the check pops in
     · the connector between prev and current fills from cream to green
     · the new current step transitions from cream to green with a halo
   The cascade runs left-to-right so the user SEES the baton hand-off. */
.stage-intro-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 6px 0 28px;
  isolation: isolate;
}
.stage-step {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;                    /* num + check share the same grid cell */
  place-items: center;              /* grid-level centering, no inner flex */
  font-family: 'Sora', sans-serif;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  line-height: 1;
}
.stage-step > .stage-step-num,
.stage-step > .stage-step-check {
  grid-area: 1 / 1;                 /* overlap — we crossfade between them */
  pointer-events: none;
}
.stage-step-num { font-variant-numeric: tabular-nums; }
.stage-step-check {
  width: 15px;
  height: 15px;
  display: block;
}

/* ── Steady-state palettes ── */
.stage-step-future {
  background: #efe7d5;
  color: #9b8a62;
  border: 1.5px solid #e1d7bd;
}
.stage-step-current {
  background: #4a9664;
  color: #fff;
  border: 1.5px solid #4a9664;
}
/* Pulsing halo — pseudo-element so it's independent of the `-entering`
   transition animation on the step itself. Sits behind parent bg via
   z-index:-1 + isolation:isolate on .stage-step. */
.stage-step-current::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: rgba(74, 150, 100, 0.22);
  z-index: -1;
  pointer-events: none;
  animation: stage-step-halo-pulse 3400ms cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.stage-step-done {
  background: #2D5A3D;
  color: #fff;
  border: 1.5px solid #2D5A3D;
}
/* In a steady "done" step: number is hidden, checkmark is visible. */
.stage-step-done .stage-step-num { opacity: 0; }
.stage-step-done .stage-step-check { opacity: 1; }
/* In a steady "future"/"current" step with no check rendered, it's simply
   absent from the DOM — the :not case below handles the crossfade on done. */

.stage-step-connector {
  width: 36px;
  height: 2px;
  background: #e1d7bd;
  border-radius: 2px;
}
.stage-step-connector-done { background: #2D5A3D; }

/* ── Entrance animation ── run only on the just-completed step, the
   connector next to it, and the newly-current step. Uses fill-mode: both
   so the 0% state applies during the delay (no flicker at T=0).
   Total runtime ≈ 2.4s — slow enough that the user watches the baton
   hand-off instead of missing it, but still snappy. */

/* The just-completed step starts visually as "current": green bg + halo.
   Then: halo fades, number fades out, check pops in. */
.stage-step-just-done {
  animation: stage-step-done-in 900ms cubic-bezier(0.4, 0, 0.2, 1) 350ms both;
}
.stage-step-just-done .stage-step-num {
  opacity: 1;
  animation: stage-step-num-exit 450ms cubic-bezier(0.4, 0, 0.6, 1) 550ms both;
}
.stage-step-just-done .stage-step-check {
  opacity: 0;
  transform: scale(0.3);
  animation: stage-step-check-in 650ms cubic-bezier(0.34, 1.56, 0.64, 1) 1000ms both;
}

/* The connector next to the just-completed step fills from cream → green. */
.stage-step-connector-filling {
  animation: stage-step-connector-fill 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1150ms both;
}

/* The newly-current step starts cream, then morphs to green with halo. */
.stage-step-entering {
  animation: stage-step-current-in 850ms cubic-bezier(0.22, 1, 0.36, 1) 1600ms both;
}

@keyframes stage-step-done-in {
  0%   { box-shadow: 0 0 0 6px rgba(74, 150, 100, 0.22); }
  100% { box-shadow: 0 0 0 0 rgba(74, 150, 100, 0); }
}
@keyframes stage-step-halo-pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.18); opacity: 0.45; }
}
@keyframes stage-step-num-exit {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.3); }
}
@keyframes stage-step-check-in {
  0%   { opacity: 0; transform: scale(0.3); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes stage-step-connector-fill {
  0%   { background: #e1d7bd; }
  100% { background: #2D5A3D; }
}
@keyframes stage-step-current-in {
  0% {
    background: #efe7d5;
    color: #9b8a62;
    border-color: #e1d7bd;
  }
  100% {
    background: #4a9664;
    color: #fff;
    border-color: #4a9664;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage-step-just-done,
  .stage-step-just-done .stage-step-num,
  .stage-step-just-done .stage-step-check,
  .stage-step-connector-filling,
  .stage-step-entering,
  .stage-step-current::before {
    animation: none !important;
  }
  .stage-step-just-done .stage-step-num { opacity: 0; }
  .stage-step-just-done .stage-step-check { opacity: 1; }
}

.stage-intro-footer {
  margin-top: auto;
  width: 100%;
  padding: 12px 0 14px;
  display: flex;
  justify-content: center;
}
.stage-intro-cta {
  width: 100%;
  max-width: 360px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(180deg, #3d7550 0%, #2D5A3D 100%);
  border: none;
  padding: 16px 26px;
  border-radius: 16px;
  cursor: pointer;
  box-shadow:
    0 10px 24px -8px rgba(45, 90, 61, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 200ms ease;
}
.stage-intro-cta:hover { filter: brightness(1.04); }
.stage-intro-cta:active { transform: scale(0.98); }

/* Desktop: give the hero a bit more room but keep the same vertical rhythm. */
@media (min-width: 901px) {
  .stage-intro-hero { height: 50vh; min-height: 320px; max-height: 520px; }
  .stage-intro-title { font-size: 32px; }
}

/* Very short phones — keep the CTA above the fold. */
@media (max-height: 700px) {
  .stage-intro-hero { height: 42vh; min-height: 220px; }
  .stage-intro-title { font-size: 24px; margin-bottom: 8px; }
  .stage-intro-copy { margin-bottom: 18px; }
  .stage-intro-stepper { margin-bottom: 20px; }
  .stage-step { width: 34px; height: 34px; font-size: 13px; }
  .stage-step-connector { width: 28px; }
}

/* ──────────────────────────────────────────────
   Intro — first screen. Hero + content + bottom CTA.
   Fills the panel, feels like a premium app welcome,
   not a form on an empty canvas.
   ────────────────────────────────────────────── */
.descubrir-intro {
  flex: 1 1 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #FAF7F2 0%, #f3ede2 55%, #e9e1d2 100%);
}

/* Hero — compact. Enough presence to feel premium, small enough that the
   CTA always clears the fold on short phones (iPhone SE, galaxy A-series). */
.descubrir-intro-hero {
  position: relative;
  flex: 0 0 auto;
  height: 24vh;
  min-height: 160px;
  max-height: 220px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: opacity, transform;
}

.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.55;
  will-change: transform;
}
.hero-blob-1 {
  width: 260px; height: 260px;
  background: radial-gradient(closest-side, #8fc89c, transparent 70%);
  top: -40px; left: -60px;
  animation: blob-drift-1 16s ease-in-out infinite alternate;
}
.hero-blob-2 {
  width: 220px; height: 220px;
  background: radial-gradient(closest-side, #f3c98b, transparent 70%);
  bottom: -40px; right: -30px;
  animation: blob-drift-2 20s ease-in-out infinite alternate;
}
.hero-blob-3 {
  width: 180px; height: 180px;
  background: radial-gradient(closest-side, #a7d4a1, transparent 70%);
  top: 40%; left: 55%;
  animation: blob-drift-3 18s ease-in-out infinite alternate;
}

@keyframes blob-drift-1 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(20px, 30px) scale(1.1); }
}
@keyframes blob-drift-2 {
  0%   { transform: translate(0, 0) scale(1.05); }
  100% { transform: translate(-25px, -20px) scale(0.95); }
}
@keyframes blob-drift-3 {
  0%   { transform: translate(0, 0) scale(0.9); }
  100% { transform: translate(15px, -25px) scale(1.1); }
}

.hero-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 55%, rgba(255, 255, 255, 0.45), transparent 60%);
  pointer-events: none;
}

.hero-mark {
  position: relative;
  z-index: 2;
  color: #2D5A3D;
  background: #fff;
  width: 80px;
  height: 80px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 14px 32px -10px rgba(45, 90, 61, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
  animation: mark-breath 4s ease-in-out infinite;
}
.hero-mark svg { width: 44px; height: 44px; }

@keyframes mark-breath {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-4px) scale(1.03); }
}

.hero-ripple {
  position: absolute;
  top: 50%; left: 50%;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  border-radius: 22px;
  border: 2px solid rgba(45, 90, 61, 0.35);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  animation: hero-ripple-out 3.6s ease-out infinite;
}
.hero-ripple-2 { animation-delay: 1.8s; }

@keyframes hero-ripple-out {
  0%   { transform: scale(1);   opacity: 0.55; }
  80%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* Content — title, subtitle, chips. Fills the middle, room to breathe.
   Vertically centered so tall devices don't leave dead space below the chips. */
.descubrir-intro-content {
  flex: 1 1 auto;
  padding: 20px 24px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.descubrir-intro-title {
  font-family: 'Sora', sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: #1a2e22;
  margin: 0;
  max-width: 320px;
}

.descubrir-intro-subtitle {
  font-size: 15px;
  line-height: 1.5;
  color: #52615a;
  margin: 0;
  max-width: 320px;
}

.descubrir-intro-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}

.descubrir-intro-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #2D5A3D;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(45, 90, 61, 0.12);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.descubrir-intro-chip .chip-ic { font-size: 14px; }

/* Footer — CTA + meta. Bottom-anchored so the thumb reaches it naturally. */
.descubrir-intro-footer {
  flex: 0 0 auto;
  padding: 14px 20px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.descubrir-start-btn {
  width: 100%;
  max-width: 360px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(180deg, #3d7550 0%, #2D5A3D 100%);
  border: none;
  padding: 16px 26px;
  border-radius: 16px;
  cursor: pointer;
  box-shadow:
    0 10px 24px -8px rgba(45, 90, 61, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}
.descubrir-start-btn .btn-arrow {
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.descubrir-start-btn:hover { filter: brightness(1.04); }
.descubrir-start-btn:hover .btn-arrow { transform: translateX(3px); }

.descubrir-start-meta {
  font-size: 12px;
  color: #7a857f;
  margin: 0;
  text-align: center;
}

/* Desktop: intro has more room — allow hero + title to grow. */
@media (min-width: 901px) {
  .descubrir-intro-hero { height: 240px; min-height: 200px; max-height: 280px; }
  .descubrir-intro-content { padding: 28px 32px 12px; }
  .descubrir-intro-title { font-size: 34px; }
  .hero-mark { width: 96px; height: 96px; border-radius: 26px; }
  .hero-mark svg { width: 52px; height: 52px; }
  .hero-ripple { width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-blob, .hero-mark, .hero-ripple {
    animation: none !important;
  }
}

/* ── Quiz shell inside the panel ── */
#descubrir-quiz-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#descubrir-quiz-container .quiz-wrap {
  padding: 16px 20px 24px;
}

/* ──────────────────────────────────────────────
   Descubrir quiz polish — scoped overrides that
   give the quiz a premium, generous, Apple-ish
   feel without touching Buscar's quiz CSS.
   ────────────────────────────────────────────── */
body.descubrir-page #descubrir-quiz-host {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

body.descubrir-page #descubrir-quiz-host .quiz-wrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  background: linear-gradient(180deg, #FAF7F2 0%, #f3ede2 100%);
}
/* Without min-height: 0 the content wrapper inherits its children's content
   size as its minimum, so quiz-options never clips (and never scrolls) on
   short viewports — the footer slides off-screen instead. Zero it here so
   the flex chain propagates "shrinkable" down to the options. */
body.descubrir-page #descubrir-quiz-host #quiz-content {
  min-height: 0;
  flex: 1 1 auto;
}

body.descubrir-page #descubrir-quiz-host .quiz-progress {
  height: 6px;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.05);
  margin: 0;
}
body.descubrir-page #descubrir-quiz-host .quiz-progress-fill {
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, #2D5A3D 0%, #6ab06a 100%);
}

body.descubrir-page #descubrir-quiz-host .quiz-header {
  padding: 12px 20px 8px;
}

body.descubrir-page #descubrir-quiz-host .quiz-counter {
  font-size: 12px;
  font-weight: 600;
  color: #6e7a75;
  letter-spacing: 0.02em;
}

body.descubrir-page #descubrir-quiz-host .quiz-back {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Body: title stack pinned to top (never vertically centered), options fill
   the rest. This keeps the question at the same Y position across every
   screen — no bounce as option counts change. */
body.descubrir-page #descubrir-quiz-host .quiz-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 8px 20px 16px;
  min-height: 0;
  gap: 0;
}

/* Title wrapper — reserves a consistent vertical slot for title + hint so
   1-line and 2-line questions feel anchored at the same spot. */
body.descubrir-page #descubrir-quiz-host .quiz-question {
  font-family: 'Sora', sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: #1a2e22;
  margin: 4px 0 20px; /* breathing room before tiles when no hint */
  text-align: left;
}

body.descubrir-page #descubrir-quiz-host .quiz-hint {
  font-size: 15px;
  line-height: 1.45;
  color: #5e6c66;
  /* Negative top-margin pulls the hint up against the question; combined with
     the question's bottom margin (20px) the net gap between the two texts is
     ~6px — tight, but keeps breathing room before the tiles below. */
  margin: -14px 0 16px;
}

/* Options fill the available vertical space so every screen feels balanced,
   regardless of option count. 2-option screens get large tiles (no empty
   bottom), 6-option screens get compact tiles. Grid auto-rows 1fr ensures
   every row divides the space evenly. */
body.descubrir-page #descubrir-quiz-host .quiz-options {
  flex: 1 1 auto;
  min-height: 0;
}
body.descubrir-page #descubrir-quiz-host .quiz-options.quiz-type-tile-single.quiz-grid-2col,
body.descubrir-page #descubrir-quiz-host .quiz-options.quiz-type-chip-multi,
body.descubrir-page #descubrir-quiz-host .quiz-options.quiz-type-grid-multi,
body.descubrir-page #descubrir-quiz-host .quiz-options.quiz-type-rank-grid,
body.descubrir-page #descubrir-quiz-host .quiz-options.quiz-type-map-pin {
  overflow-y: auto;
  scrollbar-width: thin;
  padding-right: 2px;
  /* Bottom padding so the last row doesn't get eaten by the fixed-feel
     footer + safe-area inset on mobile when the content scrolls. */
  padding-bottom: 16px;
}
body.descubrir-page #descubrir-quiz-host .quiz-footer {
  margin-top: auto;
}

/* Sub-question layout — q_community uses picker mode (full-screen sheet)
   so the inline sub container is just a short trigger button. Give the
   main options natural height when any sub-question is visible so the
   user can still see/change their main pick. */
body.descubrir-page #descubrir-quiz-host .quiz-body:has(.quiz-sub:not([style*="none"])) > .quiz-options {
  flex: 0 0 auto;
  overflow-y: visible;
}
body.descubrir-page #descubrir-quiz-host .quiz-sub-picker {
  margin-top: 14px;
}

/* Tile-single 2-col grid (household, timeline, school-decided, visit-freq, vivienda).
   Grid auto-rows: 1fr makes every row share available height evenly, so 4-tile
   and 6-tile screens both fill the panel without awkward empty space. */
body.descubrir-page #descubrir-quiz-host .quiz-type-tile-single.quiz-grid-2col {
  gap: 12px;
  padding-bottom: 6px;
  grid-auto-rows: 1fr;
  align-content: stretch;
}
body.descubrir-page #descubrir-quiz-host .quiz-type-tile-single.quiz-grid-2col .quiz-opt {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px 12px;
  gap: 10px;
  background: #fff;
  border: 1.5px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  min-height: 120px;
  min-width: 0;
  box-sizing: border-box;
  height: 100%;
}
body.descubrir-page #descubrir-quiz-host .quiz-type-tile-single.quiz-grid-2col .quiz-opt-img {
  width: 76px;
  height: 76px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}
/* Label + desc share a column container so they read as title/subtitle inside
   each tile. Mobile tiles (row flex) stack this wrapper to the right of the
   icon; desktop tiles (column flex, centered) stack the wrapper under the icon.
   Unscoped so it also applies in buscar.html's pti-quiz-overlay. */
.quiz-opt-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
body.descubrir-page #descubrir-quiz-host .quiz-type-tile-single.quiz-grid-2col .quiz-opt-label {
  font-size: 14.5px;
  font-weight: 700;
  color: #1a2e22;
  line-height: 1.25;
  letter-spacing: -0.005em;
  overflow-wrap: anywhere;
  max-width: 100%;
}
body.descubrir-page #descubrir-quiz-host .quiz-type-tile-single.quiz-grid-2col .quiz-opt-desc {
  font-size: 12px;
  color: #6e7a75;
  font-weight: 500;
  margin-top: 2px;
}

/* Emoji tiles: give the emoji a soft circular backdrop so it reads as an
   intentional icon, not a loose character floating on a card. */
body.descubrir-page #descubrir-quiz-host .quiz-type-tile-single.quiz-grid-2col .quiz-opt-emoji {
  font-size: 34px;
  line-height: 1;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f2f7ee 0%, #e8f0e3 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(45, 90, 61, 0.08);
  flex-shrink: 0;
}

/* Text-only tile (no image, no emoji — e.g. Híbrido, No trabajo when merged
   into the grid). No dashed "placeholder" look — it's a first-class option
   with a confident, larger label. */
body.descubrir-page #descubrir-quiz-host .quiz-type-tile-single.quiz-grid-2col .quiz-opt:not(:has(.quiz-opt-img)):not(:has(.quiz-opt-emoji)) {
  background: #fff;
  border-style: solid;
}
body.descubrir-page #descubrir-quiz-host .quiz-type-tile-single.quiz-grid-2col .quiz-opt:not(:has(.quiz-opt-img)):not(:has(.quiz-opt-emoji)) .quiz-opt-label {
  font-size: 17px;
  font-weight: 700;
  color: #1a2e22;
  letter-spacing: -0.01em;
}

/* Selected state — confident affirmation: green-tinted background, bold
   border, label flips to primary color. No more "maybe selected" ambiguity. */
body.descubrir-page #descubrir-quiz-host .quiz-opt.selected {
  background: linear-gradient(180deg, #eef7e9 0%, #e4f1dc 100%);
  border-color: #2D5A3D;
  border-width: 2px;
  box-shadow:
    0 10px 24px -8px rgba(45, 90, 61, 0.25),
    0 0 0 4px rgba(45, 90, 61, 0.10);
  transform: translateY(-2px);
}
body.descubrir-page #descubrir-quiz-host .quiz-opt.selected .quiz-opt-label {
  color: #1f4a2c;
}
body.descubrir-page #descubrir-quiz-host .quiz-opt.selected .quiz-opt-emoji {
  background: linear-gradient(180deg, #d9ebd0 0%, #c3dfb6 100%);
  box-shadow: inset 0 0 0 1px rgba(45, 90, 61, 0.18);
}

/* Dim unselected siblings more gently than the default 0.4 so the screen
   still reads as a coherent choice set, not a grey-out. */
body.descubrir-page #descubrir-quiz-host .quiz-options:has(.quiz-opt.selected) .quiz-opt:not(.selected) {
  opacity: 0.58;
}

/* Card-pair (only 2 options: rent/buy, car, pet). Stacked vertically so each
   card is a confident full-width row with image on the left + label beside,
   instead of two narrow columns fighting for horizontal space. */
body.descubrir-page #descubrir-quiz-host .quiz-type-card-pair {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
  padding-bottom: 6px;
  max-width: 440px;
  margin: 0 auto;
  width: 100%;
}
body.descubrir-page #descubrir-quiz-host .quiz-type-card-pair .quiz-opt {
  display: flex;
  flex-direction: row;
  flex: 0 0 auto; /* override search.css `flex: 1` which stretched tiles vertically */
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  padding: 14px 18px;
  gap: 16px;
  background: #fff;
  border: 1.5px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  min-width: 0;
  min-height: 0;
  height: auto;
  box-sizing: border-box;
  width: 100%;
}
body.descubrir-page #descubrir-quiz-host .quiz-type-card-pair .quiz-opt-img {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  max-width: none;
}
body.descubrir-page #descubrir-quiz-host .quiz-type-card-pair .quiz-opt-label {
  font-size: 17px;
  font-weight: 700;
  color: #1a2e22;
  letter-spacing: -0.005em;
  overflow-wrap: anywhere;
}

/* Tile-single with image in a vertical list (timeline without grid, etc.) */
body.descubrir-page #descubrir-quiz-host .quiz-type-tile-single:not(.quiz-grid-2col) .quiz-opt {
  background: #fff;
  border: 1.5px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: 14px 16px;
}

/* Extra option buttons (Híbrido / No trabajo) — less visual weight */
body.descubrir-page #descubrir-quiz-host .quiz-extra-opt {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #52615a;
  margin: 4px 4px 0 0;
}
body.descubrir-page #descubrir-quiz-host .quiz-extra-opt.selected {
  background: #2D5A3D;
  color: #fff;
  border-color: #2D5A3D;
}

/* Next / submit button — visually identical to .stage-intro-cta so the
   quiz flow reads as one continuous journey: same padding, radius, shadow,
   and a matching right-pointing arrow appended via ::after (can't inject
   an SVG into the button markup without changing the shared compatibility.js,
   which would affect buscar.html's quiz). */
body.descubrir-page #descubrir-quiz-host .quiz-footer {
  /* Horizontal padding comes from #quiz-content (20px each side from the
     base search.css rule). Adding our own horizontal padding here double-
     constrained the button so it rendered ~15px narrower than the stage
     CTA, which shares the same max-width. Keep vertical, drop horizontal. */
  padding: 12px 0 20px;
  display: flex;
  justify-content: center;
}
body.descubrir-page #descubrir-quiz-host .quiz-next {
  width: 100%;
  max-width: 360px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(180deg, #3d7550 0%, #2D5A3D 100%);
  border: none;
  padding: 16px 26px;
  border-radius: 16px;
  cursor: pointer;
  box-shadow:
    0 10px 24px -8px rgba(45, 90, 61, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 200ms ease;
}
body.descubrir-page #descubrir-quiz-host .quiz-next:hover { filter: brightness(1.04); }
body.descubrir-page #descubrir-quiz-host .quiz-next:active { transform: scale(0.98); }
body.descubrir-page #descubrir-quiz-host .quiz-next::after {
  content: '';
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>") center / contain no-repeat;
}

/* Short-phone guardrail: household has 6 tiles (3 rows) which is the tallest
   screen. Shrink images below 700px viewport height so the grid clears the
   fold without forcing an awkward scroll on the very first question. */
@media (max-height: 700px) {
  body.descubrir-page #descubrir-quiz-host .quiz-type-tile-single.quiz-grid-2col .quiz-opt-img {
    width: 60px; height: 60px;
  }
  body.descubrir-page #descubrir-quiz-host .quiz-type-tile-single.quiz-grid-2col .quiz-opt-emoji {
    width: 54px; height: 54px;
    font-size: 28px;
  }
  body.descubrir-page #descubrir-quiz-host .quiz-type-tile-single.quiz-grid-2col .quiz-opt {
    padding: 10px 8px;
    min-height: 104px;
    gap: 8px;
  }
  body.descubrir-page #descubrir-quiz-host .quiz-type-card-pair .quiz-opt-img {
    width: 60px; height: 60px;
  }
  body.descubrir-page #descubrir-quiz-host .quiz-type-card-pair .quiz-opt {
    min-height: 80px;
    padding: 12px 16px;
    gap: 14px;
  }
  body.descubrir-page #descubrir-quiz-host .quiz-question {
    font-size: 20px;
    margin: 4px 0 16px;
  }
  body.descubrir-page #descubrir-quiz-host .quiz-hint {
    font-size: 14.5px;
    margin: -12px 0 12px;
  }
}

@media (min-width: 901px) {
  body.descubrir-page #descubrir-quiz-host .quiz-question { font-size: 26px; }
}

/* Very narrow viewports (<360px — old iPhone SE, compact Android). Tighten
   horizontal padding and shrink visuals so 2-col grids don't overflow and
   get clipped by body { overflow: hidden }. */
@media (max-width: 360px) {
  body.descubrir-page #descubrir-quiz-host .quiz-body {
    padding: 8px 14px 14px;
  }
  body.descubrir-page #descubrir-quiz-host .quiz-type-tile-single.quiz-grid-2col {
    gap: 8px;
  }
  body.descubrir-page #descubrir-quiz-host .quiz-type-tile-single.quiz-grid-2col .quiz-opt {
    padding: 10px 8px;
    gap: 8px;
  }
  body.descubrir-page #descubrir-quiz-host .quiz-type-tile-single.quiz-grid-2col .quiz-opt-img {
    width: 62px; height: 62px;
  }
  body.descubrir-page #descubrir-quiz-host .quiz-type-tile-single.quiz-grid-2col .quiz-opt-emoji {
    width: 56px; height: 56px;
    font-size: 28px;
  }
  body.descubrir-page #descubrir-quiz-host .quiz-type-tile-single.quiz-grid-2col .quiz-opt-label {
    font-size: 13px;
  }
  body.descubrir-page #descubrir-quiz-host .quiz-type-card-pair {
    gap: 10px;
  }
  body.descubrir-page #descubrir-quiz-host .quiz-type-card-pair .quiz-opt {
    padding: 12px 14px;
    min-height: 76px;
    gap: 14px;
  }
  body.descubrir-page #descubrir-quiz-host .quiz-type-card-pair .quiz-opt-img {
    width: 56px; height: 56px;
  }
  body.descubrir-page #descubrir-quiz-host .quiz-type-card-pair .quiz-opt-label {
    font-size: 15px;
  }
  body.descubrir-page #descubrir-quiz-host .quiz-question {
    font-size: 19px;
  }
}

/* ── Override the core quiz grid for map-pin screens (needs a block layout) ── */
.quiz-options.quiz-type-map-pin {
  display: block;
  padding: 4px 0 8px;
}

/* ── Pin picker ─────────────────────────────
   Fill-in-the-blank layout: a sentence at top with the travel time as an
   inline highlighted value, then the search + privacy, then the slider.
   The sentence IS the explanation — why (filtering zones), what (within
   N min) and the relationship to the input below. */
.pin-picker {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  /* Framed card — groups hint (if any) + search + time-slider into one
     visual unit, consistent with the secondary picker. */
  padding: 16px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.75);
}

/* Contextual subtitle that sits under the question title — plain text, no
   box, reads as a description of the question rather than an input hint. */
.pin-hint-box {
  margin: -4px 0 0;
  padding: 0;
  background: none;
  font-size: 14px;
  line-height: 1.45;
  color: #5e6c66;
  font-weight: 500;
}

.pin-search-wrap {
  position: relative;
}

.pin-search-input {
  width: 100%;
  padding: 16px 18px;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  font-size: 16px;
  font-family: inherit;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.05);
}

.pin-search-input::placeholder {
  color: transparent;           /* shimmer overlay replaces the placeholder */
}

.pin-search-input:focus {
  outline: none;
  border-color: #2D5A3D;
  box-shadow: 0 0 0 3px rgba(45, 90, 61, 0.12);
}

/* Per-letter shimmer overlay — reads as a placeholder (italic, muted grey)
   with a soft sweeping highlight, not as typed content. Hides on focus or
   when the user types something real. */
.pin-search-shimmer {
  position: absolute;
  top: 50%;
  left: 18px;
  right: 48px;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 16px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.005em;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: linear-gradient(
    100deg,
    #b4bcb7 0%,
    #b4bcb7 40%,
    #e4ebe5 48%,
    #f4f7f4 50%,
    #e4ebe5 52%,
    #b4bcb7 60%,
    #b4bcb7 100%
  );
  background-size: 260% 100%;
  background-position: 180% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: pin-search-shimmer 3.4s linear infinite;
  z-index: 2;
  transition: opacity 200ms ease;
}
.pin-search-wrap:focus-within .pin-search-shimmer,
.pin-search-wrap:has(.pin-search-input:not(:placeholder-shown)) .pin-search-shimmer {
  opacity: 0;
  visibility: hidden;
}
@keyframes pin-search-shimmer {
  0%   { background-position: 180% 0; }
  100% { background-position: -80% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pin-search-shimmer {
    animation: none;
    background: none;
    color: #9aa69f;
    -webkit-text-fill-color: #9aa69f;
  }
}

/* Once a pin is selected (geocoded), the input turns into its own
   confirmation: green border + faint green wash. The × button picks up
   the green tint too. */
.pin-picker.has-pin .pin-search-input {
  border-color: rgba(45, 90, 61, 0.55);
  background: #f4faf2;
}

/* Reserve room for the × button whenever the input has any value — typed
   or confirmed — so the text never runs under the clear button. */
.pin-search-wrap:has(.pin-search-input:not(:placeholder-shown)) .pin-search-input {
  padding-right: 48px;
}

/* × clear button. Visible whenever the input has any text — typed or from
   a confirmed pin — so the user can wipe and restart with one tap. Neutral
   grey by default; turns green-tinted once a pin is confirmed. */
.pin-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(0, 0, 0, 0.08);
  color: #5e6c66;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  z-index: 3;
  transition: background 0.15s, color 0.15s, transform 0.12s;
}
.pin-search-wrap:has(.pin-search-input:not(:placeholder-shown)) .pin-clear {
  display: inline-flex;
}
.pin-picker.has-pin .pin-clear {
  background: rgba(45, 90, 61, 0.12);
  color: #2D5A3D;
}
.pin-clear:hover {
  background: rgba(0, 0, 0, 0.14);
}
.pin-picker.has-pin .pin-clear:hover {
  background: rgba(45, 90, 61, 0.22);
}
.pin-clear:active {
  transform: translateY(-50%) scale(0.92);
}


.pin-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  list-style: none;
  margin: 0;
  padding: 4px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  max-height: 280px;
  overflow-y: auto;
  z-index: 20;
  display: none;
}

.pin-suggestion {
  padding: 10px 12px;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
}

.pin-suggestion:hover {
  background: rgba(45, 90, 61, 0.08);
}

.pin-sug-primary { font-weight: 600; color: #1a1a2e; }
.pin-sug-secondary { font-size: 12px; color: #777; }

/* ── Time-picker card ─────────
   Soft cream container with:
     · "No quiero tardar más de…" label
     · a green pill showing the current max minutes, floating above the
       slider and moving with the handle (left: X%)
     · a horizontal slider: [−]  track+vehicle emoji  [+]
   The slider is dual-control: tap the buttons to snap one step, OR drag
   the transparent native <input type="range"> overlay. Both keep the
   vehicle emoji + fill + pill in sync. */
.pin-time-card {
  padding: 20px 20px 26px;
  background: rgba(0, 0, 0, 0.035);
  border-radius: 18px;
  text-align: center;
}
.pin-time-label {
  margin: 0 0 12px;
  font-size: 14.5px;
  color: #5e6c66;
  font-weight: 500;
  line-height: 1.4;
}

.pin-time-slider {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Reserve vertical space for the floating bubble that sits ABOVE the
     slider row — without this, the bubble overlaps the label. */
  padding-top: 38px;
}

.pin-time-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: #1a2e22;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  flex-shrink: 0;
  transition: transform 0.12s, opacity 0.15s, background 0.15s, color 0.15s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.pin-time-btn:hover:not([disabled]) { background: #2D5A3D; color: #fff; }
.pin-time-btn:active:not([disabled]) { transform: scale(0.9); }
.pin-time-btn[disabled] { opacity: 0.35; cursor: not-allowed; }

/* The track + native range share the same horizontal space. The range is
   transparent and sits on top to capture drag/tap; the visual track, fill,
   and emoji handle underneath follow its value via JS. */
/* Track-wrap is the shared coordinate space for the track, the handle and
   the floating bubble — all positioned with `left: X%` relative to this. */
.pin-time-track-wrap {
  position: relative;
  flex: 1 1 auto;
  height: 36px;
  display: flex;
  align-items: center;
}
.pin-time-track {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.15);
  overflow: visible;
}
.pin-time-track-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, #3d7550 0%, #2D5A3D 100%);
  border-radius: 999px;
  transition: width 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pin-time-handle {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* range overlay owns pointer events */
  font-size: 28px;
  line-height: 1;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.22));
  transition: left 180ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1;
}
.pin-time-handle .pin-time-vehicle {
  display: block;
  /* Flip horizontally so the car/bus faces right — toward the "+" side,
     i.e. longer commute / further destination. Reads as forward motion. */
  transform: translateY(-1px) scaleX(-1);
}

/* Floating value pill — same coordinate space as the handle, positioned
   just above the track. Centers horizontally via translateX(-50%). */
.pin-time-bubble {
  position: absolute;
  bottom: calc(100% + 2px);
  left: 0;
  transform: translateX(-50%);
  background: #2D5A3D;
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  box-shadow: 0 4px 12px -2px rgba(45, 90, 61, 0.35);
  white-space: nowrap;
  z-index: 2;
  transition: left 180ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

/* Transparent native range overlay — pointer target for drag/tap. Styled
   so the native thumb is invisible (we render our own emoji handle) but
   the thumb still receives pointer events. */
.pin-time-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  z-index: 2;
}
.pin-time-range::-webkit-slider-runnable-track {
  background: transparent;
  height: 100%;
}
.pin-time-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 40px;
  height: 40px;
  background: transparent;
  background-color: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  opacity: 0;
  cursor: grab;
}
.pin-time-range::-moz-range-track { background: transparent; height: 100%; border: none; }
.pin-time-range::-moz-range-thumb {
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  opacity: 0;
  cursor: grab;
}
.pin-time-range:active::-webkit-slider-thumb { cursor: grabbing; }
.pin-time-range:active::-moz-range-thumb { cursor: grabbing; }
.pin-time-range:focus { outline: none; }

.pin-skip {
  background: transparent;
  border: none;
  color: #6e7a75;
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  transition: color 0.15s, background 0.15s;
  margin-top: 4px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(110, 122, 117, 0.35);
}

.pin-skip:hover {
  color: #2D5A3D;
  text-decoration-color: rgba(45, 90, 61, 0.4);
}

.pin-skip.selected {
  color: #2D5A3D;
  background: rgba(45, 90, 61, 0.08);
  text-decoration: none;
}

/* ── School screen extras: "undecided" toggle + secondary pin slot ──
   These live below the primary .pin-picker on q19_school. They're low-key
   affordances — the first-time user sees a clean single pin-picker; the
   extras are tucked below. */
.pin-extras {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.pin-extra-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  font-family: inherit;
  font-size: 14px;
  color: #1a2e22;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 120ms ease;
  text-align: left;
}
.pin-extra-toggle:hover { border-color: rgba(45, 90, 61, 0.3); }
.pin-extra-toggle:active { transform: scale(0.99); }
.pin-extra-toggle .pin-extra-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
  color: #8A9474;
}
.pin-extra-toggle .pin-extra-label {
  flex: 1 1 auto;
}
.pin-undecided.is-active {
  border-color: #2D5A3D;
  background: rgba(45, 90, 61, 0.06);
  color: #1a2e22;
}
.pin-undecided.is-active .pin-extra-icon {
  color: #2D5A3D;
}
.pin-add-another {
  color: #2D5A3D;
  font-weight: 600;
  border-style: dashed;
  border-color: rgba(45, 90, 61, 0.35);
}
.pin-add-another .pin-extra-icon {
  color: #2D5A3D;
  font-weight: 700;
}

/* Secondary pin-picker (q19b_school) — inherits the primary card styling.
   Only difference is a slightly softer background so it reads as nested
   under the primary, plus a mini label bar ("Otro colegio") up top. */
.pin-picker.pin-picker-secondary {
  background: rgba(255, 255, 255, 0.55);
  margin-top: 2px;
}
.pin-secondary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.pin-secondary-label {
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #2D5A3D;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pin-secondary-remove {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: #fff;
  color: #6e7a75;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 150ms ease, border-color 150ms ease;
}
.pin-secondary-remove:hover {
  color: #8B3A2E;
  border-color: rgba(139, 58, 46, 0.3);
}

/* Disabled primary picker (while "undecided" is active) — greyed out so the
   user reads it as not-in-play without hiding it entirely. */
.pin-picker.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* ── Results list ───────────────────────── */
.descubrir-results {
  padding: 16px 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Invisible tail marker: the IntersectionObserver watches this to know when
 * to render the next batch of cards. Needs non-zero height so it actually
 * intersects the viewport when scrolled into range. */
.descubrir-list-sentinel {
  min-height: 1px;
}

.descubrir-results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.descubrir-results-title {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 16px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.descubrir-results-info-btn {
  appearance: none;
  background: none;
  border: none;
  padding: 2px;
  margin: 0;
  color: rgba(0, 0, 0, 0.35);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  transition: color 0.15s, background 0.15s;
}
.descubrir-results-info-btn:hover,
.descubrir-results-info-btn[aria-expanded="true"] {
  color: #2D5A3D;
  background: rgba(45, 90, 61, 0.08);
}
.descubrir-results-info-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}

.descubrir-results-info-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  font-size: 13px;
  line-height: 1.5;
  color: #333;
  z-index: 10;
  animation: descubrirPopIn 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.descubrir-results-info-popover p {
  margin: 0 0 8px;
}
.descubrir-results-info-popover p:last-child {
  margin-bottom: 0;
}
.descubrir-results-info-popover strong {
  color: #1a1a1a;
  font-weight: 600;
}

@keyframes descubrirPopIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* "No pierdas tu búsqueda" sticky bar for logged-out users.
   Sits at the top of the sidebar scroll container and only becomes visible
   once the original results header has scrolled out of view — so it only
   nags users who are already engaged with the list. When hidden it collapses
   to zero height so it doesn't leave a blank strip above the header. */
.descubrir-save-bar {
  position: sticky;
  top: 0;
  z-index: 6;
  margin: -16px -20px 0;  /* bleed through .descubrir-results padding (16px 20px) */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: max-height 0.25s ease, opacity 0.22s ease, transform 0.22s ease, margin-bottom 0.25s ease;
}

.descubrir-save-bar--visible {
  max-height: 120px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  margin-bottom: 12px;
}

.descubrir-save-bar-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #2D5A3D;
  color: #fff;
  border: none;
  border-radius: 0;
  padding: 14px 20px;
  font-family: 'Sora', sans-serif;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(45, 90, 61, 0.22);
  transition: background 0.15s;
}

.descubrir-save-bar-btn:hover {
  background: #244a32;
}

.descubrir-save-bar-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.descubrir-save-bar-title {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
}

.descubrir-save-bar-sub {
  font-weight: 500;
  font-size: 12px;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.82);
}

.descubrir-save-icon {
  flex: 0 0 auto;
}

.zone-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.zone-card:hover {
  border-color: #2D5A3D;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

.zone-card-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 14px;
  line-height: 1.3;
}

.zone-card-breadcrumb-primary {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  color: #1a1a2e;
  font-size: 16px;
}

.zone-card-breadcrumb-parent {
  color: #7a7a85;
  font-weight: 500;
}

.zone-card-breadcrumb-sep {
  color: #c0c0c8;
  font-weight: 300;
  font-size: 13px;
}

.zone-card-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}

.zone-card-progress-bar {
  flex: 1;
  height: 8px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  overflow: hidden;
}

.zone-card-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffc107 0%, #9fc78a 55%, #2D5A3D 100%);
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.zone-card-progress-score {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #2D5A3D;
}

.zone-card-progress-label {
  font-size: 12px;
  color: #7a7a85;
  font-weight: 500;
  flex-shrink: 0;
}

.zone-card-tagline {
  font-size: 13.5px;
  line-height: 1.4;
  color: #3d3d4a;
  margin: 4px 0 2px;
  font-weight: 400;
}

.zone-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.zone-stat-pill {
  background: rgba(0, 0, 0, 0.04);
  color: #2a2a33;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  letter-spacing: -0.01em;
}

.zone-stat-icon {
  font-size: 13px;
  line-height: 1;
}

.zone-card-distances {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.zone-distance-chip {
  background: rgba(45, 90, 61, 0.06);
  color: #2D5A3D;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.zone-distance-chip > span {
  font-size: 13px;
  line-height: 1;
}

.zone-card-alerts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.zone-alert-chip {
  background: rgba(198, 48, 48, 0.09);
  color: #a52129;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid rgba(198, 48, 48, 0.18);
}

.zone-card-dims {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.zone-dim-chip {
  background: rgba(45, 90, 61, 0.08);
  color: #2D5A3D;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
}

.zone-card-sparse {
  background: rgba(255, 193, 7, 0.08);
  color: #b8860b;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  align-self: flex-start;
}

.zone-card-times {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 0;
}

.zone-card-times:empty { display: none; }

.zone-time-chip {
  background: rgba(45, 90, 61, 0.06);
  color: #2D5A3D;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.zone-time-chip > span:first-child {
  font-size: 13px;
  line-height: 1;
}


@keyframes zone-card-flash-anim {
  0%   { box-shadow: 0 0 0 0 rgba(45, 90, 61, 0); }
  30%  { box-shadow: 0 0 0 4px rgba(45, 90, 61, 0.35); }
  100% { box-shadow: 0 0 0 0 rgba(45, 90, 61, 0); }
}

.zone-card-flash {
  animation: zone-card-flash-anim 1.4s ease-out;
  border-color: #2D5A3D !important;
}

/* ── Status / loading / errors ── */
.descubrir-status {
  padding: 20px;
  text-align: center;
  color: #555;
  font-size: 14px;
}

.descubrir-status-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(45, 90, 61, 0.2);
  border-top-color: #2D5A3D;
  border-radius: 50%;
  animation: descubrir-spin 0.8s linear infinite;
  margin-right: 8px;
  vertical-align: -3px;
}

@keyframes descubrir-spin {
  to { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────────
   Final loading beat (scoring → results).
   Quiet, one-line, cream-on-cream. Typically on
   screen for <1s — no stages, no progress, no
   padded dwell. Just a soft breath before the reveal.
   ───────────────────────────────────────────── */
.descubrir-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #FAF7F2;
  text-align: center;
  z-index: 5;
  animation: descubrir-loading-fade-in 240ms ease-out both;
}

@keyframes descubrir-loading-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.descubrir-loading-orb {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 0 0 22px;
}

.descubrir-loading-orb-core {
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6ab06a 0%, #2D5A3D 65%, #1b3e25 100%);
  box-shadow: 0 8px 24px rgba(45, 90, 61, 0.35);
  animation: descubrir-orb-breathe 2.6s ease-in-out infinite;
}

.descubrir-loading-orb-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(45, 90, 61, 0.18);
  border-top-color: #2D5A3D;
  animation: descubrir-orb-spin 1.4s linear infinite;
}

@keyframes descubrir-orb-breathe {
  0%, 100% { transform: scale(1); opacity: 0.92; }
  50%      { transform: scale(1.08); opacity: 1; }
}

@keyframes descubrir-orb-spin {
  to { transform: rotate(360deg); }
}

.descubrir-loading-text {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  color: #1a2e22;
  letter-spacing: -0.005em;
  margin: 0 0 18px;
  max-width: 280px;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.descubrir-loading-text--swap {
  opacity: 0;
  transform: translateY(6px);
}

.descubrir-loading-dots {
  display: inline-flex;
  gap: 6px;
}

.descubrir-loading-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2D5A3D;
  opacity: 0.25;
  animation: descubrir-loading-dot-pulse 1.2s ease-in-out infinite;
}

.descubrir-loading-dots span:nth-child(2) { animation-delay: 0.15s; }
.descubrir-loading-dots span:nth-child(3) { animation-delay: 0.30s; }

@keyframes descubrir-loading-dot-pulse {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.15); }
}

.descubrir-error {
  background: rgba(220, 53, 69, 0.08);
  color: #a52129;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  margin: 16px 20px;
}

.descubrir-gate {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  margin: 20px;
}

.descubrir-gate h3 {
  font-family: 'Sora', sans-serif;
  font-size: 16px;
  margin: 0 0 8px;
}

.descubrir-gate p {
  font-size: 14px;
  color: #555;
  margin: 0 0 14px;
}

.descubrir-gate .gate-btn {
  background: #2D5A3D;
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
}

/* ── Live pin marker on the map ──
   Small pin dot + tiny label pill underneath. Replaces the old chunky
   "Trabajo" pill that dominated the map. */
.descubrir-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  pointer-events: none;
  will-change: transform, opacity;
  transform-origin: bottom center;
}
.descubrir-marker-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.9),
    0 3px 10px rgba(0, 0, 0, 0.25);
  pointer-events: auto;
}
.descubrir-marker-dot-inner {
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
}

/* ── Isochrone overlay on map ── */
.descubrir-isochrone-label {
  position: absolute;
  top: 16px;
  left: 16px;
  background: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  font-size: 12px;
  color: #555;
  z-index: 5;
  pointer-events: none;
  display: none;
}

.descubrir-isochrone-label.visible { display: block; }

/* ── Affordability chip + budget summary ── */
.descubrir-budget-summary {
  padding: 10px 12px;
  margin: 6px 0 10px;
  border-radius: 10px;
  background: #f0f7ed;
  border: 1px solid #cfe3c5;
  color: #2D5A3D;
  font-size: 13px;
  font-weight: 600;
}

.zone-card-viability {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
  display: block;
}
.zone-card-viability.viable {
  background: #eaf5e3;
  color: #1f6b2e;
  border: 1px solid #c7e3b5;
}
.zone-card-viability.stretch {
  background: #fff4e5;
  color: #a35400;
  border: 1px solid #f3d7a9;
}
/* Neutral "we don't have price data" state — buying mode, small muni. Grey
   palette signals honest absence, not alarm. */
.zone-card-viability.unknown {
  background: #f3f2ef;
  color: #6b7a72;
  border: 1px solid #e1e0db;
  font-weight: 500;
}

/* ── Market activity — secondary context, not a verdict. Lives under the
   affordability chip as a subtle one-liner (no box, no border): it's
   descriptive, not prescriptive, so it shouldn't compete visually with the
   price chip which IS the verdict the user acts on. Colour alone carries
   the level. */
.zone-card-market {
  margin-top: 6px;
  padding: 0 2px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
  display: block;
  color: #5e6c66;
}
.zone-card-market.level-activo    { color: #2D5A3D; }
.zone-card-market.level-moderado  { color: #5e6c66; }
.zone-card-market.level-lento     { color: #a35400; }
.zone-card-market.level-muy_lento { color: #8b2e22; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .descubrir-main {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    height: calc(100vh - var(--header-height, 52px));
  }
  .descubrir-panel {
    max-height: 55vh;
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    transition:
      max-height 560ms cubic-bezier(0.22, 1, 0.36, 1),
      border-bottom-color 320ms ease;
  }
  /* quiz-mode uses an animatable max-height (100vh) instead of `none` so the
     collapse into cinematic mode animates smoothly. `height: 100%` still
     makes the panel fill the grid row normally. */
  body.descubrir-quiz-mode .descubrir-panel {
    max-height: 100vh;
  }

  /* Cinematic tour — panel fully collapses, map fills the viewport. Works
     regardless of quiz-mode because the cinematic rules !important-override
     both the 55vh and 100vh caps above. */
  body.descubrir-map-cinematic .descubrir-main {
    grid-template-rows: 0 1fr !important;
  }
  body.descubrir-map-cinematic .descubrir-panel {
    max-height: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    overflow: hidden;
    border-bottom-color: transparent;
  }
  /* Keep the map container ALWAYS mounted + sized on mobile. See the
     matching visibility rules on quiz/results modes below: iOS Safari's
     compositor tears down the WebGL rendering surface when the container
     toggles display: none → display: block, which pauses rAF on the canvas
     and freezes the cinematic reveal after the first few synchronous
     frames. We pin the container to position:absolute fill the whole time
     and only toggle visibility + z-index across modes, so the canvas
     surface never gets torn down. */
  body.descubrir-map-cinematic .descubrir-map-container {
    visibility: visible !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: auto !important;
    z-index: 2 !important;
  }
  /* Hide MapLibre controls + the "Área de desplazamiento…" label during the
     cinematic moment — nothing between the user and the story. */
  body.descubrir-map-cinematic .maplibregl-ctrl,
  body.descubrir-map-cinematic .descubrir-isochrone-label {
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity 280ms ease;
  }
  /* Quiz mode (pre-results): panel takes the whole viewport, map hides.
     The map during the quiz is only useful for the live pin previews in
     Ch.2, and those reveal themselves in the chapter interludes anyway. */
  body.descubrir-quiz-mode .descubrir-main {
    grid-template-rows: 1fr;
  }
  body.descubrir-quiz-mode .descubrir-panel {
    max-height: none;
    height: 100%;
    border-bottom: none;
  }
  /* Keep the map canvas mounted — never display:none it on mobile. See the
     cinematic-mode rule above for why. */
  body.descubrir-quiz-mode .descubrir-map-container {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: -1;
  }

  /* Results mode on mobile: map disappears entirely, cards fill the viewport.
     Each card has its own aerial thumbnail now, so the shared map no longer
     earns its screen real-estate on small devices. */
  body.descubrir-results-mode .descubrir-main {
    grid-template-rows: 1fr;
  }
  body.descubrir-results-mode .descubrir-panel {
    max-height: none;
    height: 100%;
    border-bottom: none;
  }
  body.descubrir-results-mode .descubrir-map-container {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: -1;
  }
}

/* ────────────────────────────────────────────────
   Unified row-tile quiz layout — applies to BOTH mobile and desktop.
   Every screen (2, 3, 4, 5, 6 options) renders as one tile per row,
   top-to-bottom. Illustrations are hidden; if an option has an emoji,
   it gets a circular icon on the left with the label beside it,
   otherwise a centered label carries the row.
   Desktop panel is 420px wide — the perfect width for this list shape.
   ──────────────────────────────────────────────── */

/* Hide the illustration images everywhere — unified list style. */
body.descubrir-page #descubrir-quiz-host .quiz-opt-img {
  display: none !important;
}

/* Collapse 2-col tile grid into a single column list. */
body.descubrir-page #descubrir-quiz-host .quiz-type-tile-single.quiz-grid-2col {
  display: flex;
  flex-direction: column;
  grid-auto-rows: initial;
  gap: 10px;
  max-width: 440px;
  width: 100%;
  margin: 0 auto;
  justify-content: flex-start;
}

/* Card-pair: tiles start right below the title, not centered
   vertically in the options area. */
body.descubrir-page #descubrir-quiz-host .quiz-type-card-pair {
  justify-content: flex-start;
  align-content: flex-start;
}

/* Unified row-tile shape, applied to tile-single AND card-pair. */
body.descubrir-page #descubrir-quiz-host .quiz-type-tile-single.quiz-grid-2col .quiz-opt,
body.descubrir-page #descubrir-quiz-host .quiz-type-card-pair .quiz-opt {
  display: flex;
  flex-direction: row;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  padding: 14px 18px;
  gap: 14px;
  background: #fff;
  border: 1.5px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  min-height: 64px;
  height: auto;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Override the base .quiz-opt:hover `transform: scale(1.02)` — on a 100%-wide
   row tile, scaling up makes the tile wider than its container and triggers a
   horizontal scrollbar. Swap for a vertical-only lift + soft border/shadow.
   Gated on (hover: hover) so iOS Safari doesn't leave a sticky hover contour on
   the tile that happens to share the last tap's screen position. */
@media (hover: hover) {
  body.descubrir-page #descubrir-quiz-host .quiz-type-tile-single.quiz-grid-2col .quiz-opt:hover,
  body.descubrir-page #descubrir-quiz-host .quiz-type-card-pair .quiz-opt:hover,
  body.descubrir-page #descubrir-quiz-host .quiz-type-rank-grid .quiz-opt:hover {
    transform: translateY(-1px);
    border-color: rgba(45, 90, 61, 0.25);
    box-shadow: 0 4px 10px -4px rgba(45, 90, 61, 0.15);
  }
  body.descubrir-page #descubrir-quiz-host .quiz-opt.selected:hover {
    /* Preserve the selected -2px lift even under hover (otherwise hover's -1px
       lift would override it mid-transition). */
    transform: translateY(-2px);
  }
}

/* Emoji: small circular icon on the left of the row. */
body.descubrir-page #descubrir-quiz-host .quiz-type-tile-single.quiz-grid-2col .quiz-opt-emoji,
body.descubrir-page #descubrir-quiz-host .quiz-type-card-pair .quiz-opt-emoji {
  width: 44px;
  height: 44px;
  font-size: 22px;
  flex-shrink: 0;
}

/* Label + desc stack as title/subtitle inside the text container. */
body.descubrir-page #descubrir-quiz-host .quiz-type-tile-single.quiz-grid-2col .quiz-opt-text,
body.descubrir-page #descubrir-quiz-host .quiz-type-card-pair .quiz-opt-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}
body.descubrir-page #descubrir-quiz-host .quiz-type-tile-single.quiz-grid-2col .quiz-opt-label,
body.descubrir-page #descubrir-quiz-host .quiz-type-card-pair .quiz-opt-label {
  font-size: 15.5px;
  font-weight: 700;
  color: #1a2e22;
  line-height: 1.25;
  text-align: left;
}
body.descubrir-page #descubrir-quiz-host .quiz-type-tile-single.quiz-grid-2col .quiz-opt-desc {
  font-size: 12.5px;
  color: #6e7a75;
  font-weight: 500;
  margin-top: 0;
  line-height: 1.35;
  text-align: left;
}

/* Text-only row (Híbrido / No trabajo / budget options): no icon slot, just
   a confident label filling the row. */
body.descubrir-page #descubrir-quiz-host .quiz-type-tile-single.quiz-grid-2col .quiz-opt:not(:has(.quiz-opt-emoji)) .quiz-opt-label,
body.descubrir-page #descubrir-quiz-host .quiz-type-card-pair .quiz-opt:not(:has(.quiz-opt-emoji)) .quiz-opt-label {
  font-size: 16px;
  width: 100%;
}

/* Selected row: explicit green check on the right edge. The existing
   green-tint + border shows the state, but with a label-only row the
   affirmation reads subtly — the check removes any ambiguity. */
body.descubrir-page #descubrir-quiz-host .quiz-type-tile-single.quiz-grid-2col .quiz-opt.selected::after,
body.descubrir-page #descubrir-quiz-host .quiz-type-card-pair .quiz-opt.selected::after {
  content: '';
  width: 22px;
  height: 22px;
  margin-left: auto;
  border-radius: 50%;
  background: #2D5A3D url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12 10 17 19 7'/></svg>") center / 14px 14px no-repeat;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(45, 90, 61, 0.35);
}

/* Rank grid (priorities): stack as row-tiles like Ch.1 so the
   chapter feels continuous with the rest of the quiz. The rank badge
   takes the place of the checkmark on the right edge — its number
   shows selection order as the user taps. */
body.descubrir-page #descubrir-quiz-host .quiz-type-rank-grid {
  display: flex !important;
  flex-direction: column;
  grid-template-columns: none;
  grid-auto-rows: initial;
  gap: 8px;
  max-width: 440px;
  width: 100%;
  margin: 0 auto;
}
body.descubrir-page #descubrir-quiz-host .quiz-type-rank-grid .quiz-opt {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  /* Shorter than tile-single rows — 8 priorities need to fit on screen
     without heavy scrolling, and there's no icon slot to accommodate. */
  padding: 10px 16px;
  gap: 12px;
  background: #fff;
  border: 1.5px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  min-height: 48px;
  height: auto;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  position: relative;
}
body.descubrir-page #descubrir-quiz-host .quiz-type-rank-grid .quiz-opt-label {
  font-size: 15px;
  font-weight: 600;
  color: #1a2e22;
  line-height: 1.25;
  text-align: left;
  width: auto;
  flex: 1 1 auto;
}
/* Rank badge — pinned to the right via flex `order: 99` + margin-left: auto.
   Overrides the base absolute positioning from search.css. */
body.descubrir-page #descubrir-quiz-host .quiz-type-rank-grid .quiz-rank-badge {
  position: static;
  order: 99;
  margin-left: auto;
  width: 24px;
  height: 24px;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(45, 90, 61, 0.35);
}

/* Short-viewport override: tighten row tiles on short mobile phones so a
   6-option screen fits without heavy scroll. */
@media (max-height: 700px) {
  body.descubrir-page #descubrir-quiz-host .quiz-type-tile-single.quiz-grid-2col .quiz-opt,
  body.descubrir-page #descubrir-quiz-host .quiz-type-card-pair .quiz-opt {
    padding: 12px 16px;
    min-height: 56px;
  }
  body.descubrir-page #descubrir-quiz-host .quiz-type-tile-single.quiz-grid-2col .quiz-opt-emoji,
  body.descubrir-page #descubrir-quiz-host .quiz-type-card-pair .quiz-opt-emoji {
    width: 38px; height: 38px; font-size: 20px;
  }
}

/* ============================================================
   REDESIGNED ZONE CARD (2026-04)
   Editorial, image-forward, mobile-first. Replaces the previous
   pill-heavy stack with: header + score pill, bullets, marquee,
   satellite thumbnail, "ticket" arrow CTA.
   ============================================================ */

body.descubrir-page .zone-card {
  background: var(--lp-surface, #FFFFFF);
  border: 1px solid var(--lp-border-light, #EAE5DB);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(44, 51, 25, 0.06);
  overflow: hidden;
  padding: 0;
  margin: 0 0 14px 0;
  position: relative;
  cursor: pointer;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
  /* Override the old redisgn's `display: flex; gap: 8px` which inserted an
     8px row-gap between every pair of child sections — that was the ghost
     gap between the marquee and the satellite image. Plain block flow is
     what we want; children stack flush. */
  display: block;
  gap: 0;
}
body.descubrir-page .zone-card:hover {
  box-shadow: 0 6px 18px rgba(44, 51, 25, 0.10);
  border-color: var(--lp-accent, #8FB07A);
}
body.descubrir-page .zone-card:active { transform: scale(0.995); }

/* ── Header row: name + provincia on the left, score pill on the right ── */
body.descubrir-page .zone-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px;
}
body.descubrir-page .zone-card-head-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.descubrir-page .zone-card-name {
  font-family: 'Sora', 'DM Sans', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--lp-text, #2C3319);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.descubrir-page .zone-card-prov {
  font-size: 13px;
  font-weight: 500;
  color: var(--lp-text-muted, #8A9474);
  letter-spacing: 0;
  line-height: 1.2;
}
body.descubrir-page .zone-card-score-pill {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  padding: 7px 12px;
  border-radius: 999px;
  font-family: 'Sora', 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  letter-spacing: -0.01em;
  overflow: hidden;
  /* Default fallback; every score gets a tier-* class overriding below. */
  background: #f3f4f6;
  color: #1f2937;
}
body.descubrir-page .zone-card-score-num { font-size: 15px; }
body.descubrir-page .zone-card-score-max {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.78;
  margin-left: 1px;
}

/* ── Score tiers (mirror compatibility gauge palette) ──
   Saturated gradient fills so the chip punches on white cards. Muy buena
   adds a sheen sweep so the best matches still win the hierarchy over the
   other solids. */
body.descubrir-page .zone-card-score-pill.tier-baja {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  color: #ffffff;
  box-shadow: none;
}
body.descubrir-page .zone-card-score-pill.tier-mejorable {
  background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
  color: #ffffff;
  box-shadow: none;
}
body.descubrir-page .zone-card-score-pill.tier-moderada {
  /* Deeper amber so white text passes AA while staying clearly "yellow". */
  background: linear-gradient(135deg, #f59e0b 0%, #c2720b 100%);
  color: #ffffff;
  box-shadow: none;
}
body.descubrir-page .zone-card-score-pill.tier-buena {
  background: linear-gradient(135deg, #84cc16 0%, #4d7c0f 100%);
  color: #ffffff;
  box-shadow: none;
}
body.descubrir-page .zone-card-score-pill.tier-muybuena {
  background: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
  color: #ffffff;
  box-shadow: none;
}
/* Subtle sheen sweep — a diagonal highlight traverses the pill every ~4s.
   Uses a pseudo-element so the number stays readable underneath. */
body.descubrir-page .zone-card-score-pill.tier-muybuena::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    transparent 20%,
    rgba(255, 255, 255, 0.55) 48%,
    rgba(255, 255, 255, 0.0) 68%,
    transparent 100%
  );
  transform: translateX(-120%);
  animation: zoneScoreShimmer 3.8s ease-in-out infinite;
  animation-delay: 1.2s;
  pointer-events: none;
  mix-blend-mode: screen;
}
body.descubrir-page .zone-card-score-pill.tier-muybuena > span {
  position: relative;
  z-index: 1;
}
@keyframes zoneScoreShimmer {
  0%   { transform: translateX(-120%); }
  55%  { transform: translateX(160%); }
  100% { transform: translateX(160%); }
}
@media (prefers-reduced-motion: reduce) {
  body.descubrir-page .zone-card-score-pill.tier-muybuena::before {
    animation: none;
    display: none;
  }
}

/* ── Bullet list ── */
body.descubrir-page .zone-card-bullets {
  margin: 0;
  padding: 2px 18px 14px 32px;
  list-style: none;
  position: relative;
}
body.descubrir-page .zone-card-bullets li {
  position: relative;
  font-size: 14px;
  line-height: 1.45;
  color: var(--lp-text, #2C3319);
  padding: 3px 0;
}
body.descubrir-page .zone-card-bullets li::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lp-primary, #2D5A3D);
  opacity: 0.7;
}

/* ── Marquee (infinite horizontal scroll of commute times) ── */
body.descubrir-page .zone-card-marquee {
  position: relative;
  overflow: hidden;
  background: var(--lp-accent-muted, #D4E4C4);
  border-top: 1px solid rgba(143, 176, 122, 0.25);
  padding: 7px 0;
  margin: 0;
  display: block;
  font-size: 0;   /* collapse any whitespace text nodes in the track */
}
/* Edge fades via pseudo-elements instead of `mask-image`. Avoids the
   GPU-compositing boundary that was causing a subpixel gap against the
   image below on some devices. */
body.descubrir-page .zone-card-marquee::before,
body.descubrir-page .zone-card-marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 28px;
  pointer-events: none;
  z-index: 2;
}
body.descubrir-page .zone-card-marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--lp-accent-muted, #D4E4C4) 0%, rgba(212, 228, 196, 0) 100%);
}
body.descubrir-page .zone-card-marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--lp-accent-muted, #D4E4C4) 0%, rgba(212, 228, 196, 0) 100%);
}
body.descubrir-page .zone-card-marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  animation: zone-card-marquee 13s linear infinite;
  will-change: transform;
  padding-left: 18px;
}
@keyframes zone-card-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
body.descubrir-page .zone-card-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--lp-primary-dark, #1B4332);
}
body.descubrir-page .zone-card-marquee-min { font-weight: 700; }
body.descubrir-page .zone-card-marquee-sep {
  opacity: 0.55;
  font-weight: 400;
}
body.descubrir-page .zone-card-marquee-label { font-weight: 500; }
body.descubrir-page .zone-card-marquee-emoji {
  font-size: 14px;
  line-height: 1;
  display: inline-block;
  transform: translateY(-0.5px);
}
body.descubrir-page .zone-card-marquee-dot {
  color: var(--lp-primary, #2D5A3D);
  opacity: 0.4;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  margin: 0 2px;
}

/* ── Satellite image + ticket-notch CTA ── */
body.descubrir-page .zone-card-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 3;
  background: var(--lp-surface-warm, #FBF9F5);
  margin: 0;
  /* overflow visible so the ticket CTA can hang off the right edge; the
     parent `.zone-card` already has overflow:hidden which clips the notch
     cleanly against the card's rounded corner. */
  overflow: visible;
  line-height: 0;
  display: block;
}
body.descubrir-page .zone-card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  display: block;
  transition: opacity .35s ease;
}
body.descubrir-page .zone-card-image.loaded { opacity: 1; }
/* If the image 404s (batch not uploaded yet), collapse the whole section */
body.descubrir-page .zone-card-image-wrap.no-img { display: none; }

/* Skeleton shimmer while image loads */
body.descubrir-page .zone-card-image-skel {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(245, 240, 232, 0.9) 0%,
      rgba(222, 216, 202, 0.6) 45%,
      rgba(245, 240, 232, 0.9) 100%) 0 0 / 200% 100%;
  animation: zone-card-shimmer 1.6s linear infinite;
}
body.descubrir-page .zone-card-image.loaded + .zone-card-image-skel {
  display: none;
}
@keyframes zone-card-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* Ticket / notch — wide pill that hangs off the right edge of the card, like
   a perforated admission ticket. The card's `overflow: hidden` clips the
   right half; the arrow lives in the visible left half. */
body.descubrir-page .zone-card-cta {
  position: absolute;
  right: -44px;             /* half the width hangs outside the card */
  top: 50%;
  transform: translateY(-50%);
  width: 88px;
  height: 56px;
  border: none;
  border-radius: 28px;      /* height/2 → true pill */
  box-sizing: border-box;
  padding: 0 44px 0 0;      /* content confined to the visible left 44px */
  background: var(--lp-bg-cream, #FAF7F2);  /* match sidebar bg → reads as a docked ticket */
  color: var(--lp-primary-dark, #1B4332);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* Concave "bitten-out" look: inset shadows on all edges of the visible
     left half make the pill read as a notch carved into the card, not a
     pill sitting on top. */
  box-shadow:
    inset 6px 0 12px -2px rgba(27, 50, 40, 0.13),
    inset 0 5px 10px -2px rgba(27, 50, 40, 0.10),
    inset 0 -5px 10px -2px rgba(27, 50, 40, 0.10);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
body.descubrir-page .zone-card-cta:hover {
  background: #f2ede3;
  box-shadow:
    inset 7px 0 14px -2px rgba(27, 50, 40, 0.17),
    inset 0 6px 12px -2px rgba(27, 50, 40, 0.13),
    inset 0 -6px 12px -2px rgba(27, 50, 40, 0.13);
}
body.descubrir-page .zone-card-cta:active { transform: translateY(-50%) scale(0.96); }
body.descubrir-page .zone-card-cta svg {
  width: 24px;
  height: 24px;
  stroke-width: 2.5;
  animation: zone-card-arrow-bounce 1.6s ease-in-out infinite;
}
@keyframes zone-card-arrow-bounce {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  body.descubrir-page .zone-card-marquee-track,
  body.descubrir-page .zone-card-cta svg,
  body.descubrir-page .zone-card-image-skel {
    animation: none;
  }
}

/* ── Sidebar skeleton (Descubrir → Buscar → back flow) ──
   Shown synchronously at init() while restoreCachedRun() awaits AI bullets
   and map rehydration. Mirrors the real zone-card shape so the swap feels
   like "fill in", not "layout shift". */
body.descubrir-page .zone-card--skel {
  cursor: default;
  pointer-events: none;
}
body.descubrir-page .zone-card--skel:hover {
  box-shadow: 0 1px 3px rgba(44, 51, 25, 0.06);
  border-color: var(--lp-border-light, #EAE5DB);
}
body.descubrir-page .zone-card-skel-bar,
body.descubrir-page .zone-card-skel-pill {
  display: block;
  background:
    linear-gradient(90deg,
      rgba(234, 229, 219, 0.9) 0%,
      rgba(210, 203, 188, 0.55) 45%,
      rgba(234, 229, 219, 0.9) 100%) 0 0 / 200% 100%;
  animation: zone-card-shimmer 1.6s linear infinite;
  border-radius: 6px;
}
body.descubrir-page .zone-card-skel-bar--title { height: 16px; width: 62%; }
body.descubrir-page .zone-card-skel-bar--sub   { height: 11px; width: 38%; margin-top: 6px; }
body.descubrir-page .zone-card-skel-pill {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  flex-shrink: 0;
}
body.descubrir-page .zone-card-skel-bullets {
  padding: 2px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.descubrir-page .zone-card-skel-bullets .zone-card-skel-bar {
  height: 10px;
}
body.descubrir-page .zone-card-skel-bullets .zone-card-skel-bar:nth-child(1) { width: 92%; }
body.descubrir-page .zone-card-skel-bullets .zone-card-skel-bar:nth-child(2) { width: 78%; }
body.descubrir-page .zone-card-skel-bullets .zone-card-skel-bar:nth-child(3) { width: 84%; }
@media (prefers-reduced-motion: reduce) {
  body.descubrir-page .zone-card-skel-bar,
  body.descubrir-page .zone-card-skel-pill {
    animation: none;
  }
}

/* ── Reveal anchor pins (desktop only) ──
   Teardrop-shaped marker + subtle side label shown on the final results map
   for each location the user pinned in the quiz (Trabajo 1/2, Colegio 1/2,
   Prioridad). Desktop-only — the maplibre Marker is not created on mobile. */
.descubrir-reveal-pin {
  display: inline-flex;
  align-items: flex-end;
  gap: 6px;
  pointer-events: none;
  transform-origin: bottom left;
  will-change: transform;
}
.descubrir-reveal-pin__drop {
  flex: 0 0 auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.22));
}
.descubrir-reveal-pin__label {
  display: inline-block;
  margin-bottom: 3px;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.94);
  color: #1f2a24;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.1px;
  border-radius: 999px;
  border: 1px solid rgba(45, 90, 61, 0.18);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 900px) {
  /* Safety net — markers aren't created on mobile, but hide if any slip in. */
  .descubrir-reveal-pin { display: none; }
}

/* ── Narrow mobile tweaks (320-360px) ── */
@media (max-width: 380px) {
  body.descubrir-page .zone-card-head { padding: 12px 14px 8px; }
  body.descubrir-page .zone-card-name { font-size: 16px; }
  body.descubrir-page .zone-card-bullets { padding: 0 16px 12px 30px; }
  body.descubrir-page .zone-card-bullets li { font-size: 13.5px; }
  body.descubrir-page .zone-card-cta {
    width: 80px; height: 52px; right: -40px; padding-right: 40px; border-radius: 26px;
  }
  body.descubrir-page .zone-card-cta svg { width: 22px; height: 22px; }
}