.location {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  padding: clamp(94px, 9vw, 138px) clamp(24px, 7vw, 110px) clamp(390px, 39vw, 550px);
  overflow: hidden;
  background: linear-gradient(180deg, #0b1a36 0%, #172c4c 27%, #20385d 61%, #101c38 100%);
}
.location::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 23% at 61% 75%, rgba(165, 194, 221, .13), transparent),
    radial-gradient(ellipse 38% 26% at 20% 28%, rgba(73, 111, 152, .12), transparent);
}
.location-stars {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .7;
  background-image: radial-gradient(circle at 9% 19%, #fafcff 0 1px, transparent 2px),
    radial-gradient(circle at 77% 9%, #dceaf5 0 1px, transparent 2px),
    radial-gradient(circle at 94% 24%, #fafcff 0 1px, transparent 2px),
    radial-gradient(circle at 62% 38%, #dceaf5 0 1px, transparent 2px),
    radial-gradient(circle at 37% 12%, #fafcff 0 1px, transparent 2px);
}
.location-content {
  position: relative;
  z-index: 2;
  width: min(100%, 565px);
  text-align: left;
  text-shadow: 0 3px 20px rgba(3, 12, 30, .43);
}
.location-eyebrow {
  margin: 0 0 23px;
  color: var(--silver);
  font-size: .73rem;
  font-weight: 600;
  letter-spacing: .24em;
  line-height: 1.5;
  text-transform: uppercase;
}
.location h2 {
  margin: 0;
  color: var(--white);
  font: 400 clamp(3.2rem, 5.6vw, 5.8rem)/1.02 var(--serif);
  letter-spacing: -.03em;
  text-wrap: balance;
}
.location-intro {
  max-width: 490px;
  margin: 22px 0 34px;
  color: var(--ice);
  font-size: clamp(.98rem, 1.3vw, 1.08rem);
  line-height: 1.75;
}
.location-details {
  padding-left: 20px;
  border-left: 1px solid var(--silver);
}
.location-place {
  margin: 0 0 9px;
  color: var(--white);
  font: 400 clamp(1.65rem, 2.3vw, 2.25rem)/1.2 var(--serif);
}
.location-address, .location-reference {
  margin: 0;
  color: var(--ice);
  font-size: .96rem;
  line-height: 1.6;
}
.location-reference { margin-top: 5px; color: var(--silver); font-size: .85rem; }
.location-place, .location-address, .location-reference { overflow-wrap: anywhere; }
.location-action { margin-top: 28px; }
.map-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid var(--ice);
  border-radius: 999px;
  background: var(--ice);
  box-shadow: 0 9px 24px rgba(3, 14, 33, .24);
  color: var(--midnight);
  font: 600 .82rem/1.3 var(--sans);
  letter-spacing: .08em;
  text-decoration: none;
  transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.map-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.map-button:not(:disabled):hover { background: var(--white); box-shadow: 0 12px 30px rgba(3, 14, 33, .35); transform: translateY(-2px); }
.map-button:focus-visible { outline: 3px solid var(--white); outline-offset: 5px; }
.map-button--pending { border-color: rgba(220, 234, 245, .68); background: rgba(220, 234, 245, .17); color: var(--ice); cursor: not-allowed; box-shadow: none; }

.location-landscape {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: clamp(390px, 39vw, 550px);
  pointer-events: none;
}
.location-window-light {
  opacity: .18;
  filter: drop-shadow(0 0 1px rgba(250, 252, 255, .2));
  transition: opacity 1.1s ease var(--light-delay, 0s), filter 1.1s ease var(--light-delay, 0s);
}
.location.is-lit .location-window-light, .no-js .location-window-light {
  opacity: .92;
  filter: drop-shadow(0 0 10px rgba(250, 252, 255, .73));
}
.location-house-star {
  opacity: 0;
  transform: scale(.3);
  transform-origin: 720px 351px;
  filter: drop-shadow(0 0 7px rgba(250, 252, 255, .8));
  transition: opacity .7s ease 1.55s, transform .8s cubic-bezier(.2, .8, .2, 1) 1.55s;
}
.location.is-lit .location-house-star, .no-js .location-house-star { opacity: 1; transform: scale(1); }
.location-lights { fill: var(--white); filter: drop-shadow(0 0 6px rgba(250, 252, 255, .72)); }
.location-lights circle:nth-child(2n) { animation: location-twinkle 5s ease-in-out infinite; }
.location-lights circle:nth-child(3n) { animation-delay: -2s; }
@keyframes location-twinkle { 50% { opacity: .47; } }
.location-route--mobile, .location-route-dot--mobile { display: none; }

@media (max-width: 850px) {
  .location { padding: 95px 32px 420px; }
  .location-content { width: min(100%, 590px); margin: 0 auto; text-align: center; }
  .location h2 { font-size: clamp(3.2rem, 8vw, 4.5rem); }
  .location-intro { margin-left: auto; margin-right: auto; }
  .location-details { padding: 0; border: 0; }
  .location-landscape { height: 405px; }
  .location-route--desktop, .location-route-dot--desktop { display: none; }
  .location-route--mobile, .location-route-dot--mobile { display: initial; }
}
@media (max-width: 550px) {
  .location { padding: 84px 23px 375px; }
  .location-eyebrow { margin-bottom: 18px; font-size: .64rem; letter-spacing: .18em; }
  .location h2 { font-size: clamp(2.65rem, 11vw, 3.65rem); }
  .location-intro { margin: 17px auto 26px; font-size: .94rem; }
  .location-place { font-size: clamp(1.55rem, 6.7vw, 2rem); }
  .location-address { font-size: .91rem; }
  .location-reference { font-size: .82rem; }
  .location-action { margin-top: 23px; }
  .location-landscape { height: 365px; }
}
/* ───────── Polish ───────── */
/* The same watercolour sky continues from the welcome section, with no visible edge. */
.location { background: linear-gradient(180deg, #0b1a36 0%, rgba(11, 26, 54, .85) 8%, rgba(11, 26, 54, .3) 22%, transparent 38%), linear-gradient(0deg, #091a33 0%, transparent 45%), #0b2244 url("assets/images/cielo-acuarela.jpg") center top / cover no-repeat; }
.location::before { background: radial-gradient(ellipse 50% 23% at 50% 78%, rgba(165, 194, 221, .14), transparent), radial-gradient(ellipse 38% 26% at 20% 34%, rgba(73, 111, 152, .1), transparent); }
.location-stars { background: none; opacity: 1; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 140px, #000 55%, transparent 80%); mask-image: linear-gradient(180deg, transparent 0, #000 140px, #000 55%, transparent 80%); }
.snow--location { z-index: 0; }

/* A soft moon keeps the right side of the sky company on wide screens. */
.location::after { content: ""; position: absolute; top: clamp(110px, 12vw, 170px); right: clamp(60px, 13vw, 210px); z-index: -1; width: clamp(54px, 5.5vw, 82px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #fff 0%, #e8f1f8 48%, #b9cbdb 77%, #91acc8 100%); box-shadow: 0 0 30px rgba(220, 234, 245, .45), 0 0 110px 18px rgba(153, 185, 215, .16), inset -8px -10px 13px rgba(60, 90, 135, .18); animation: moon-breathe 7s ease-in-out infinite; }

/* Copy arrives line by line out of a soft blur, like the sections before it. */
.location-content.reveal-on-view { opacity: 1; transform: none; }
.location-content > * { opacity: 0; transform: translateY(18px); filter: blur(6px); transition: opacity 1s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1), filter 1s ease; }
.location-content > :nth-child(2) { transition-delay: .12s; } .location-content > :nth-child(3) { transition-delay: .26s; }
.location-content > :nth-child(4) { transition-delay: .4s; } .location-content > :nth-child(5) { transition-delay: .55s; }
.location-content.is-in-view > *, .no-js .location-content > * { opacity: 1; transform: none; filter: none; }
.location h2 { text-shadow: 0 4px 26px rgba(3, 12, 30, .55); }

/* The address sits on a frosted glass card that matches the countdown tiles. */
.location-details { position: relative; padding: 22px 26px 22px 30px; border: 1px solid rgba(220, 234, 245, .2); border-radius: 22px; background: linear-gradient(180deg, rgba(236, 246, 255, .09), rgba(236, 246, 255, .025)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -12px 22px rgba(4, 16, 38, .22), 0 18px 32px rgba(1, 10, 27, .26); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.location-details::before { content: ""; position: absolute; top: 22px; bottom: 22px; left: 0; width: 2px; border-radius: 2px; background: linear-gradient(180deg, transparent, var(--ice), transparent); box-shadow: 0 0 10px rgba(220, 234, 245, .6); }
.map-button { position: relative; overflow: hidden; }
.map-button::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%) no-repeat; background-size: 250% 100%; background-position: 140% 0; animation: glass-sweep 6s ease-in-out 1.5s infinite; pointer-events: none; }
.map-button--pending::after { background-image: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .14) 50%, transparent 65%); }
.map-button--pending { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* The route draws itself to the door once the street lights up, and the doorway star pulses. */
.location-route { stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px rgba(220, 234, 245, .7)); transition: stroke-dashoffset 2.2s cubic-bezier(.45, 0, .2, 1) .3s; }
.location.is-lit .location-route, .no-js .location-route { stroke-dashoffset: 0; }
.location-route-dot { filter: drop-shadow(0 0 6px #fff); transform-box: fill-box; transform-origin: center; animation: dot-pulse 2.4s ease-in-out infinite; }
@keyframes dot-pulse { 50% { transform: scale(1.8); opacity: .6; } }
.location.is-lit .location-house-star { animation: house-star 4s ease-in-out 2.4s infinite; }
@keyframes house-star { 50% { filter: drop-shadow(0 0 14px rgba(250, 252, 255, 1)); } }
.location-landscape { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%); mask-image: linear-gradient(180deg, transparent 0, #000 30%); }

@media (max-width: 850px) {
  .location::after { top: 64px; right: 9%; width: 44px; }
  .location-details { padding: 20px 20px; }
  .location-details::before { top: auto; bottom: 0; left: 22%; right: 22%; width: auto; height: 2px; background: linear-gradient(90deg, transparent, var(--ice), transparent); }
}
@media (max-width: 550px) {
  .location::after { top: 40px; right: 7%; width: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .snow--location { display: none; }
  .location-content > * { opacity: 1; transform: none; filter: none; }
  .location-route { stroke-dashoffset: 0; transition: none; }
  .location::after, .location-route-dot, .map-button::after, .location.is-lit .location-house-star { animation: none !important; }
  .location-window-light, .location-house-star, .location-lights circle, .map-button { animation: none !important; transition: none !important; }
  .location-window-light { opacity: .92; filter: drop-shadow(0 0 10px rgba(250, 252, 255, .73)); }
  .location-house-star { opacity: 1; transform: none; }
}
