#origen {
  --green: #142016;
  --gold: #edc984;
  --cream: #f6efe1;
  color: var(--cream);
  background: var(--green);
  font-family: var(--body);
}
#origen {
  height:270svh;
  position:relative;
}
#origen .stage {
  height:100svh;
  position:sticky;
  top:0;
  overflow:hidden;
  background:var(--green);
  isolation:isolate;
}
#origen .harvest, #origen .harvest video, #origen .map-layer {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
#origen .harvest video {
  object-fit:cover;
  object-position:center;
  pointer-events:none;
}
#origen .map-layer {
  background:#142016;
  opacity:1;
  pointer-events:none;
  will-change:opacity;
  overflow:hidden;
}
#origen .eyebrow {
  font-size:.65rem;
  letter-spacing:.22em;
  font-weight:600;
}
#origen .return-title {
  position:absolute;
  left:7%;
  top:46%;
  transform:translateY(-50%);
  opacity:0;
  pointer-events:none;
  text-shadow:0 2px 30px #0008;
}
#origen .return-title h2 {
  font:400 clamp(3rem,7vw,7.5rem)/.98 Georgia,serif;
  letter-spacing:-.045em;
  margin:1.4rem 0 0;
}
#origen .return-title h2 em {
  font-weight:400;
}
@media(max-width:700px) {
  #origen {
    height:250svh;
  }
  #origen .return-title {
    top:auto;
    bottom:17%;
    transform:none;
  }
  #origen .return-title h2 {
    font-size:clamp(2.7rem,11vw,4.5rem);
  }
}
#origen .map-layer {
  z-index: 2;
  background: radial-gradient(ellipse at 63% 46%, #273c2b 0%, #19291d 51%, #111c14 100%);
}
#origen .map-layer::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .14;
  background-image: linear-gradient(#80977d40 1px, transparent 1px),
    linear-gradient(90deg, #80977d40 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 63% 46%, #000, transparent 74%);
}
#origen .map-wrap {
  position: absolute;
  inset: 0;
}
#origen .map-wrap svg {
  position: absolute;
  top: 10%;
  left: 38%;
  width: 50%;
  height: 78%;
}
#origen .country-outline, #origen .origin-outline, #origen .province-outline {
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}
#origen .country-outline {
  fill:#2b4231;
  stroke:#d9efad;
  stroke-width:2;
}
#origen .origin-outline {
  fill:#536447;
  stroke:#ffe0a2;
  stroke-width:1.6;
}
#origen .province-outline {
  fill:#806039;
  stroke:#ffc175;
  stroke-width:1.6;
}
#origen .outline-glow {
  display: none;
}
#origen .map-cached svg {
  display: none;
}
#origen .map-surface {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  will-change: transform;
}
#origen .map-contour {
  position: absolute;
}
#origen .map-finished {
  visibility: hidden;
}
#origen .map-interactive {
  cursor: grab;
}
#origen .map-dragging {
  cursor: grabbing;
  user-select: none;
}
#origen .map-caption {
  position: absolute;
  left: 7%;
  top: 50%;
  transform: translateY(-50%);
}
#origen .map-caption .eyebrow {
  margin: 0 0 .85rem;
  color: #c0cdb9;
}
#origen .place-name {
  margin: 0;
  color: var(--cream);
  font: 400 clamp(3rem, 7vw, 7rem)/.98 Georgia, serif;
  letter-spacing: -.045em;
  white-space: nowrap;
}
#origen .map-layer[data-place="2"] .place-name {
  color: #ffd69d;
}
#origen .map-position {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: 1.3rem;
  color: #bbc9b7;
  font-size: .7rem;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
}
#origen .map-progress {
  width: 5rem;
  height: 1px;
  background: #d9efad40;
}
#origen .map-progress span {
  display: block;
  height: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
}
#origen .map-hint {
  position: absolute;
  bottom: max(6%, env(safe-area-inset-bottom));
  left: 7%;
  display: flex;
  gap: .7rem;
  align-items: center;
  margin: 0;
  color: #e1e9da;
  font-size: .8rem;
}
#origen .map-hint-arrow {
  display: grid;
  place-items: center;
  width: 1.9rem;
  aspect-ratio: 1;
  border: 1px solid #d9efad60;
  border-radius: 50%;
}
#origen .map-hint-touch {
  display: none;
}
@media (pointer: coarse) {
  #origen .map-hint-mouse {
    display: none;
  }
  #origen .map-hint-touch {
    display: inline;
  }
}
@media (max-width: 700px) {
  #origen .map-layer {
    background: radial-gradient(ellipse at 50% 40%, #273c2b, #19291d 54%, #111c14 100%);
  }
  #origen .map-layer::before {
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse at 50% 40%, #000, transparent 72%);
  }
  #origen .map-wrap svg {
    top: 8%;
    left: 10%;
    width: 80%;
    height: 62%;
  }
  #origen .map-caption {
    top: auto;
    bottom: 15%;
    transform: none;
  }
  #origen .place-name {
    font-size: clamp(2.5rem, 11.2vw, 4.5rem);
  }
  #origen .map-position {
    margin-top: .8rem;
  }
  #origen .map-hint {
    bottom: max(4%, env(safe-area-inset-bottom));
  }
}
@media (max-height: 600px) and (max-width: 700px) {
  #origen .map-caption {
    bottom: 16%;
  }
  #origen .map-caption .eyebrow {
    margin-bottom: .45rem;
  }
  #origen .map-position {
    margin-top: .55rem;
  }
}
#origen .harvest {
  background: var(--green) url('assets/del-cafetal-al-grano-escritorio.webp') center / cover no-repeat;
}
@media (max-aspect-ratio: 3/4) {
  #origen .harvest {
    background-image: url('assets/del-cafetal-al-grano-movil.webp');
  }
}
.origin-map-credit {
  font-size: .75em;
}
.origin-map-credit a {
  text-decoration: underline;
  text-underline-offset: .15em;
}

.js body.origin-map-visible > .header {
  visibility: hidden;
  pointer-events: none;
}