.attractions-atlas[hidden] { display: none !important; }

.attractions-atlas {
    margin: 0 0 44px;
    border: 1px solid rgba(255,255,255,.10);
    display: grid;
    grid-template-columns: minmax(280px, .74fr) minmax(520px, 1.26fr);
    overflow: hidden;
    background: rgba(3, 26, 45, .58);
    box-shadow: 0 24px 70px rgba(0, 8, 18, .16);
}

.attractions-atlas-copy {
    min-width: 0;
    padding: clamp(30px, 4.2vw, 58px);
    border-right: 1px solid rgba(255,255,255,.08);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.attractions-atlas-eyebrow {
    color: #7fd7f8;
    font: 800 11px/1.25 "Manrope", sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.attractions-atlas-copy h3 {
    max-width: 560px;
    margin: 12px 0 17px;
    color: #f5fbff;
    font: 800 clamp(28px, 3vw, 46px)/1.04 "Manrope", sans-serif;
    letter-spacing: -.045em;
    text-wrap: balance;
}

.attractions-atlas-copy p {
    max-width: 540px;
    margin: 0;
    color: #9fb9c7;
    font-size: 14px;
    line-height: 1.68;
}

.attractions-atlas-stage {
    position: relative;
    min-height: 470px;
    overflow: hidden;
    background:
        linear-gradient(rgba(146, 211, 239, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(146, 211, 239, .055) 1px, transparent 1px),
        radial-gradient(circle at 67% 42%, rgba(76, 184, 228, .10), transparent 36%),
        #061f35;
    background-size: 52px 52px, 52px 52px, auto, auto;
}

.attractions-atlas-stage::before,
.attractions-atlas-stage::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.attractions-atlas-stage::before {
    inset: 14% 11% 20%;
    border: 1px solid rgba(133, 207, 238, .08);
    transform: skewX(-8deg) rotate(-1.5deg);
}

.attractions-atlas-stage::after {
    inset: 0;
    background: linear-gradient(90deg, rgba(2, 21, 36, .30), transparent 25%, transparent 75%, rgba(2, 21, 36, .22));
}

.attractions-atlas-plot {
    position: absolute;
    z-index: 2;
    inset: 0 0 82px;
}

.attractions-atlas-marker {
    --atlas-accent: #8bddfa;
    position: absolute;
    left: var(--atlas-x);
    top: var(--atlas-y);
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    display: grid;
    place-items: center;
    color: #031a2e;
    background: transparent;
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: transform .16s ease, opacity .16s ease;
}

.attractions-atlas-marker[data-area="casco-antiguo"] { --atlas-accent: #ff9b8d; }
.attractions-atlas-marker[data-area="ancon"] { --atlas-accent: #ffd487; }
.attractions-atlas-marker[data-area="cinta-costera"] { --atlas-accent: #9fe3ba; }

.attractions-atlas-marker-dot {
    width: 34px;
    height: 34px;
    border: 2px solid #061f35;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #031a2e;
    background: var(--atlas-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--atlas-accent) 34%, transparent), 0 8px 20px rgba(0, 9, 18, .32);
    font: 900 9.5px/1 "Manrope", sans-serif;
    letter-spacing: .04em;
    transition: transform .16s ease, box-shadow .16s ease;
}

.attractions-atlas-marker:hover,
.attractions-atlas-marker:focus-visible { z-index: 5; transform: translate(-50%, -50%) scale(1.08); }
.attractions-atlas-marker:hover .attractions-atlas-marker-dot,
.attractions-atlas-marker:focus-visible .attractions-atlas-marker-dot {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--atlas-accent) 24%, transparent), 0 12px 28px rgba(0, 9, 18, .42);
}
.attractions-atlas-marker.is-muted { opacity: .25; }
.attractions-atlas-marker.is-muted:hover,
.attractions-atlas-marker.is-muted:focus-visible { opacity: .72; }

.attractions-atlas-status {
    position: absolute;
    z-index: 4;
    right: 22px;
    bottom: 20px;
    left: 22px;
    min-height: 52px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.10);
    display: grid;
    align-content: center;
    gap: 3px;
    pointer-events: none;
}
.attractions-atlas-status-hint { color: #91adbc; font-size: 11.5px; line-height: 1.45; }
.attractions-atlas-status-meta {
    color: #7fd7f8;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.attractions-atlas-status strong { color: #f5fbff; font-size: 13px; line-height: 1.35; }

html[data-theme="light"] .attractions-atlas {
    border-color: rgba(20, 63, 88, .15);
    background: rgba(255,255,255,.72);
    box-shadow: 0 22px 60px rgba(33, 69, 88, .10);
}
html[data-theme="light"] .attractions-atlas-copy { border-right-color: rgba(20, 63, 88, .12); }
html[data-theme="light"] .attractions-atlas-copy h3 { color: #0b2d43; }
html[data-theme="light"] .attractions-atlas-copy p { color: #526774; }
html[data-theme="light"] .attractions-atlas-eyebrow { color: #126f99; }
html[data-theme="light"] .attractions-atlas-stage {
    background:
        linear-gradient(rgba(24, 102, 137, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(24, 102, 137, .07) 1px, transparent 1px),
        radial-gradient(circle at 67% 42%, rgba(62, 164, 207, .12), transparent 36%),
        #eaf4f7;
    background-size: 52px 52px, 52px 52px, auto, auto;
}
html[data-theme="light"] .attractions-atlas-stage::before { border-color: rgba(19, 101, 139, .13); }
html[data-theme="light"] .attractions-atlas-stage::after {
    background: linear-gradient(90deg, rgba(220, 237, 243, .36), transparent 24%, transparent 76%, rgba(220, 237, 243, .30));
}
html[data-theme="light"] .attractions-atlas-marker-dot { border-color: #eaf4f7; }
html[data-theme="light"] .attractions-atlas-status { border-top-color: rgba(20, 63, 88, .14); }
html[data-theme="light"] .attractions-atlas-status-hint { color: #526774; }
html[data-theme="light"] .attractions-atlas-status-meta { color: #126f99; }
html[data-theme="light"] .attractions-atlas-status strong { color: #0b2d43; }

@media (max-width: 980px) {
    .attractions-atlas { grid-template-columns: 1fr; }
    .attractions-atlas-copy {
        padding: 30px clamp(22px, 5vw, 42px) 27px;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }
    html[data-theme="light"] .attractions-atlas-copy { border-bottom-color: rgba(20, 63, 88, .12); }
    .attractions-atlas-stage { min-height: 420px; }
}

@media (max-width: 600px) {
    .attractions-atlas { margin-bottom: 30px; }
    .attractions-atlas-copy { padding: 25px 20px 23px; }
    .attractions-atlas-copy h3 { margin-top: 9px; font-size: 30px; }
    .attractions-atlas-copy p { font-size: 13px; line-height: 1.58; }
    .attractions-atlas-stage { min-height: 350px; }
    .attractions-atlas-plot { bottom: 76px; }
    .attractions-atlas-marker { width: 44px; height: 44px; }
    .attractions-atlas-marker-dot { width: 31px; height: 31px; font-size: 8.5px; }
    .attractions-atlas-status { right: 16px; bottom: 14px; left: 16px; min-height: 54px; padding-top: 10px; }
    .attractions-atlas-status strong { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .attractions-atlas-marker,
    .attractions-atlas-marker-dot { transition: none; }
}