/*
 * Touristar Panamá · premium visual direction
 *
 * Final presentation layer loaded after app.css + contrast.css.
 * Keeps the printed map and behavior untouched while moving the chrome away
 * from rounded, playful "app" styling toward a restrained editorial / travel
 * hospitality language. Legibility is intentionally generous without turning
 * controls into oversized accessibility furniture.
 */

:root {
    --premium-ink: #132838;
    --premium-paper: #fbfaf7;
    --premium-paper-2: #f4f2ed;
    --premium-line: rgba(17, 48, 68, .16);
    --premium-line-strong: rgba(17, 48, 68, .26);
    --premium-dark: #061a2b;
    --premium-dark-2: #08243a;
    --premium-dark-3: #0c314b;
    --premium-dark-line: rgba(163, 205, 224, .22);
    --premium-text-dark: #edf6fa;
    --premium-muted-dark: #a9bec9;
    --premium-accent: #79cceb;
    --premium-accent-strong: #43aed8;
    --premium-shadow: 0 24px 64px rgba(0, 13, 25, .28), 0 3px 12px rgba(0, 13, 25, .10);
    --panel-w: 388px;
    --topbar-h: 72px;
}

body,
button,
input,
a {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ---------- Top navigation: restrained, architectural, not pill-heavy. ---------- */
.topbar {
    padding-inline: 22px 18px;
    background: linear-gradient(180deg, #071f35 0%, #061a2d 100%);
    border-bottom: 1px solid rgba(196, 225, 238, .16);
    box-shadow: 0 8px 24px rgba(0, 13, 24, .20);
}

.brand { gap: 13px; }
.brand img { width: 116px; height: 42px; }
.brand-copy {
    gap: 1px;
    padding-left: 13px;
    border-left: 1px solid rgba(213, 234, 243, .28);
}
.brand-copy strong {
    font: 700 13.5px/1.2 "Manrope", sans-serif;
    letter-spacing: .055em;
}
.brand-copy small {
    margin-top: 4px;
    color: rgba(233, 246, 252, .76);
    font-size: 11.5px;
    letter-spacing: .025em;
}

.face-switcher {
    height: 48px;
    padding: 0 3px;
    gap: 5px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.face-tab {
    position: relative;
    min-width: 102px;
    height: 48px;
    padding: 0 14px;
    border-radius: 0;
    color: rgba(231, 244, 250, .70);
    font-size: 13.5px;
    font-weight: 650;
    letter-spacing: .01em;
}
.face-tab:hover {
    color: #fff;
    background: rgba(255,255,255,.035);
}
.face-tab.active {
    color: #fff;
    background: rgba(255,255,255,.025);
    box-shadow: none;
    font-weight: 750;
}
.face-tab.active::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background: var(--premium-accent);
    box-shadow: 0 0 12px rgba(121, 204, 235, .20);
}
.face-tab-icon {
    font-size: 15px;
    opacity: .72;
}

.top-actions { gap: 7px; }
.icon-btn,
.text-btn {
    height: 42px;
    min-width: 42px;
    border: 1px solid rgba(211, 235, 246, .20);
    border-radius: 8px;
    background: rgba(255,255,255,.025);
    color: rgba(239,248,252,.88);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.icon-btn { padding-inline: 10px; }
.text-btn {
    padding-inline: 11px;
    font-size: 12.5px;
    letter-spacing: .06em;
}
.icon-btn:hover,
.text-btn:hover {
    color: #fff;
    background: rgba(255,255,255,.07);
    border-color: rgba(211, 235, 246, .34);
}
.desktop-label { font-size: 12.5px; font-weight: 750; }
.icon-btn svg { width: 18px; height: 18px; stroke-width: 1.55; }

/* The twelve-place editorial microsite is a primary destination, not a utility icon. */
.attractions-entry {
    position: relative;
    min-width: 164px;
    height: 48px;
    padding: 0 13px 0 12px;
    border: 1px solid rgba(218, 242, 251, .92);
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #08283d;
    background: linear-gradient(120deg, #f5fcff 0%, #dff5fc 100%);
    box-shadow: 0 9px 25px rgba(0, 10, 20, .24), inset 0 1px 0 #fff;
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.attractions-entry:hover {
    color: #061f32;
    background: #fff;
    box-shadow: 0 12px 30px rgba(0, 10, 20, .31), inset 0 1px 0 #fff;
    transform: translateY(-1px);
}
.attractions-entry svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    fill: none;
    stroke: #1275a0;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.attractions-entry-copy {
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
}
.attractions-entry-copy small {
    color: #527486;
    font: 800 8px/1 "Manrope", sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.attractions-entry-copy strong {
    margin-top: 4px;
    color: #08283d;
    font: 800 13px/1.05 "Manrope", sans-serif;
    letter-spacing: -.01em;
    white-space: nowrap;
}
.attractions-entry-arrow {
    margin-left: 1px;
    color: #1275a0;
    font-size: 17px;
    line-height: 1;
}

/* ---------- Main panels: quieter radii, stronger hierarchy, readable type. ---------- */
.explore-panel,
.detail-card {
    border-radius: 16px;
    background: rgba(251, 250, 247, .985);
    border: 1px solid rgba(255,255,255,.86);
    box-shadow: var(--premium-shadow);
    backdrop-filter: blur(24px) saturate(108%);
}

.explore-panel {
    top: 18px;
    bottom: 18px;
    left: 18px;
}
.panel-head { padding: 24px 22px 16px; }
.eyebrow {
    margin-bottom: 6px;
    color: #2f6684;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .12em;
}
.panel-head h1,
.mobile-sheet-head h2 {
    color: #0f2a3e;
    font: 750 24px/1.16 "Manrope", sans-serif;
    letter-spacing: -.025em;
}
.panel-close,
.detail-close,
.detail-share,
.mobile-sheet-head button {
    border: 1px solid rgba(17,48,68,.16);
    border-radius: 8px;
    background: transparent;
    color: #476273;
}
.panel-close:hover,
.detail-close:hover,
.detail-share:hover,
.mobile-sheet-head button:hover {
    background: rgba(12, 62, 90, .055);
    color: #15384e;
}

.search-box {
    height: 48px;
    margin: 0 18px 13px;
    padding-inline: 14px 10px;
    gap: 10px;
    border: 1px solid rgba(17,48,68,.22);
    border-radius: 9px;
    background: rgba(246, 246, 243, .92);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.search-box input {
    color: #173145;
    font-size: 14.5px;
    line-height: 1.35;
}
.search-box input::placeholder { color: #687d89; }
.search-box svg { width: 18px; height: 18px; stroke: #5b7584; stroke-width: 1.65; }
.search-box button {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: transparent;
    font-size: 18px;
}

.category-strip {
    padding: 0 18px 12px;
    gap: 7px;
}

/* The permanent desktop explorer is not a swipe surface. Keep every category
   visible instead of clipping the first off-screen chip at the panel edge. */
@media (min-width: 761px) {
    .explore-panel .category-strip {
        flex-wrap: wrap;
        overflow: visible;
    }
}
.category-chip {
    height: 34px;
    padding-inline: 11px;
    border-radius: 7px;
    border-color: rgba(17,48,68,.20);
    background: rgba(255,255,255,.58);
    color: #4b6574;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .005em;
}
.category-chip:hover {
    border-color: rgba(23,81,111,.38);
    color: #123f59;
    background: rgba(236,245,248,.70);
}
.category-chip.active {
    color: #fff;
    border-color: #174c6a;
    background: #174c6a;
    box-shadow: none;
}
.result-meta {
    height: 38px;
    padding-inline: 19px;
    border-color: rgba(17,48,68,.10);
    color: #687d89;
    font-size: 11.5px;
}
.result-meta button {
    color: #1b5c7e;
    font-size: 11.5px;
    font-weight: 750;
}

.results { padding: 9px 10px 12px; }
.result-card {
    min-height: 68px;
    padding: 11px 10px;
    grid-template-columns: 38px minmax(0,1fr) auto;
    gap: 11px;
    border-radius: 8px;
    transition: background .14s ease, box-shadow .14s ease;
}
.result-card:hover { background: rgba(19,76,107,.055); }
.result-card.selected {
    background: rgba(25, 91, 126, .085);
    box-shadow: inset 3px 0 0 #2c7194;
}
.result-icon,
.result-icon.food,
.result-icon.attraction,
.result-icon.mobility,
.result-icon.shopping {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(30,79,105,.18);
    border-radius: 8px;
    background: transparent;
    color: #285e79;
    font-size: 16px;
}
.result-main strong {
    color: #1c3445;
    font-size: 14.5px;
    font-weight: 750;
    letter-spacing: -.005em;
}
.result-review {
    margin-top: 4px;
    color: #5c707c;
    font-size: 12.5px;
    line-height: 1.4;
}
.result-main small {
    margin-top: 6px;
    color: #6f828d;
    font-size: 11.5px;
}
.face-pill {
    padding: 2px 6px;
    border-radius: 4px;
    color: #2c637f;
    background: rgba(25,91,126,.08);
    font-size: 10px;
    letter-spacing: .055em;
}
.result-arrow { color: #71828c; font-size: 18px; }
.empty-state {
    padding: 38px 26px;
    color: #607580;
    font-size: 13.5px;
    line-height: 1.55;
}
.panel-foot {
    min-height: 44px;
    padding-inline: 19px;
    color: #657985;
    background: rgba(246,246,243,.82);
    border-color: rgba(17,48,68,.10);
    font-size: 11px;
}
.live-dot {
    width: 6px;
    height: 6px;
    box-shadow: 0 0 0 3px rgba(25,118,74,.08);
}

/* ---------- Map chrome. ---------- */
.hotspot::before {
    width: clamp(15px, 50%, 28px);
    border-width: 1.5px;
    background: rgba(8, 51, 80, .72);
    box-shadow: 0 0 0 3px rgba(76,168,208,.18), 0 4px 12px rgba(0,22,38,.22);
}
.hotspot::after {
    border-color: rgba(89,177,215,.42);
    animation-duration: 4.2s;
}
.hotspot:hover::before,
.hotspot:focus-visible::before,
.hotspot.selected::before {
    background: #b84f55;
    box-shadow: 0 0 0 4px rgba(184,79,85,.16), 0 5px 14px rgba(0,22,38,.25);
}

/* THA gets a delicate "look here" flourish only after a quiet desktop-pointer dwell. */
.featured-attention-rings {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 26px;
    height: 26px;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity .22s ease;
}
.featured-attention-ring {
    position: absolute;
    inset: 0;
    border: 1.25px solid var(--sky);
    border-radius: 50%;
    box-shadow: 0 0 16px rgba(54,169,221,.13);
    opacity: 0;
    transform: scale(.58);
}
.hotspot.featured-attention-active .featured-attention-rings { opacity: 1; }
.hotspot.featured-attention-active .featured-attention-ring {
    animation: thaFeaturedAttentionRing 3.15s cubic-bezier(.18,.62,.28,1) infinite;
}
.hotspot.featured-attention-active .featured-attention-ring:nth-child(2) { animation-delay: .62s; }
.hotspot.featured-attention-active .featured-attention-ring:nth-child(3) { animation-delay: 1.24s; }
.hotspot.featured-attention-active::before {
    box-shadow: 0 0 0 4px rgba(125,200,235,.20), 0 0 22px rgba(54,169,221,.26), 0 4px 12px rgba(0,22,38,.22);
}
@keyframes thaFeaturedAttentionRing {
    0% { opacity: 0; transform: scale(.58); }
    9% { opacity: .82; }
    68% { opacity: .14; }
    100% { opacity: 0; transform: scale(4.05); }
}
@media (prefers-reduced-motion: reduce) {
    .hotspot.featured-attention-active .featured-attention-ring { animation: none !important; }
    .hotspot.featured-attention-active .featured-attention-ring:first-child { opacity: .62; transform: scale(1.8); }
}

.hotspot { transition: opacity .16s ease; }
.hotspot.discovery-muted { opacity: .08; pointer-events: none; }
.hotspot.discovery-match { z-index: 2; }
.hotspot.discovery-priority { z-index: 4; }
.hotspot.discovery-priority::before {
    background: #a27b3f;
    border-color: #fff7db;
    box-shadow: 0 0 0 5px rgba(207,174,104,.26), 0 6px 18px rgba(0,22,38,.28);
}
.hotspot.discovery-priority::after { border-color: rgba(221,190,121,.82); }
.hotspot-label {
    position: absolute;
    left: 34px;
    top: 50%;
    min-width: 132px;
    max-width: 248px;
    padding: 8px 10px 7px;
    border: 1px solid rgba(161,211,232,.28);
    border-radius: 8px;
    background: rgba(4,24,39,.95);
    box-shadow: 0 12px 30px rgba(0,15,28,.28);
    color: #f7fbfd;
    text-align: left;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translate(6px,-50%);
    transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
}
.hotspot[data-label-side="left"] .hotspot-label {
    left: auto;
    right: 34px;
    text-align: right;
    transform: translate(-6px,-50%);
}
.hotspot-label-name, .hotspot-label-meta { display: block; }
.hotspot-label-name {
    overflow: hidden;
    color: inherit;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.22;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hotspot-label-meta {
    margin-top: 3px;
    color: #9fc9dc;
    font-size: 9.5px;
    font-weight: 750;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.hotspot:hover .hotspot-label,
.hotspot:focus-visible .hotspot-label,
.hotspot.selected .hotspot-label,
.hotspot.discovery-labelled .hotspot-label,
.hotspot.discovery-priority .hotspot-label {
    opacity: 1;
    visibility: visible;
    transform: translate(0,-50%);
}
.hotspot.discovery-priority .hotspot-label { border-color: rgba(221,190,121,.58); }
html[data-theme="light"] .hotspot-label {
    border-color: rgba(25,91,126,.22);
    background: rgba(249,251,252,.97);
    box-shadow: 0 12px 28px rgba(7,39,57,.2);
    color: #15384d;
}
html[data-theme="light"] .hotspot-label-meta { color: #3e708a; }

.result-card--priority {
    background: linear-gradient(90deg, rgba(177,137,69,.11), rgba(177,137,69,.025));
    box-shadow: inset 3px 0 0 rgba(177,137,69,.78);
}
.result-card--priority:hover { background: linear-gradient(90deg, rgba(177,137,69,.16), rgba(19,76,107,.04)); }
.result-priority-badge {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 7px;
    border: 1px solid rgba(177,137,69,.26);
    border-radius: 999px;
    background: rgba(177,137,69,.1);
    color: #785a28;
    font-size: 9.5px;
    font-weight: 850;
    letter-spacing: .025em;
}
html[data-theme="dark"] .result-card--priority {
    background: linear-gradient(90deg, rgba(207,174,104,.12), rgba(207,174,104,.02));
    box-shadow: inset 3px 0 0 rgba(207,174,104,.76);
}
html[data-theme="dark"] .result-priority-badge {
    border-color: rgba(226,197,132,.3);
    background: rgba(226,197,132,.1);
    color: #e5c886;
}

@media (max-width: 760px), (max-width: 900px) and (max-height: 500px) {
    .hotspot-label { display: none; }
    .hotspot.discovery-muted { opacity: .12; }
}

.map-toolbar {
    right: 20px;
    bottom: 20px;
    height: 50px;
    gap: 2px;
    padding: 4px;
    border-radius: 10px;
    background: rgba(5, 25, 42, .94);
    border-color: rgba(201,230,243,.22);
    box-shadow: 0 14px 34px rgba(0,12,22,.28);
    backdrop-filter: blur(22px) saturate(110%);
}
.map-toolbar button {
    height: 40px;
    min-width: 40px;
    border-radius: 7px;
    color: rgba(240,248,251,.90);
    font-size: 18px;
}
.map-toolbar button:hover,
.map-toolbar button.active { background: rgba(255,255,255,.075); }
.map-toolbar .toolbar-wide {
    gap: 7px;
    font-size: 12.5px;
    font-weight: 700;
}
.toolbar-separator { height: 24px; opacity: .72; }
.dot-icon { width: 7px; height: 7px; box-shadow: none; }
.zoom-indicator {
    right: 22px;
    bottom: 77px;
    padding: 5px 8px;
    border-radius: 6px;
    background: rgba(5,25,42,.88);
    color: rgba(240,248,251,.88);
    font-size: 11.5px;
}

.gesture-hint {
    min-height: 58px;
    padding: 10px 44px 10px 12px;
    gap: 11px;
    border-radius: 10px;
    background: rgba(5,25,42,.94);
    border-color: rgba(201,230,243,.20);
    box-shadow: 0 12px 30px rgba(0,16,28,.22);
}
.gesture-icon {
    width: 34px;
    height: 34px;
    border-radius: 7px;
    background: rgba(87,176,215,.10);
    font-size: 15px;
}
.gesture-hint strong { font-size: 12.5px; font-weight: 750; }
.gesture-hint small {
    margin-top: 3px;
    color: rgba(231,243,248,.76);
    font-size: 11.5px;
    line-height: 1.35;
}
.gesture-hint button {
    right: 6px;
    top: 7px;
    width: 32px;
    height: 32px;
    border-radius: 6px;
}

/* Keep the onboarding hint clear of the fixed desktop toolbar on compact widths. */
@media (min-width: 761px) and (max-width: 1500px) {
    .gesture-hint { bottom: 82px; }
}

/* Short laptop viewports need more room for actual results, not chrome. */
@media (min-width: 761px) and (max-height: 800px) {
    .panel-head { padding: 18px 20px 10px; }
    .panel-head .eyebrow { margin-bottom: 5px; }
    .search-box { height: 44px; margin: 0 18px 9px; }
    .category-strip { padding-bottom: 7px; gap: 5px; }
    .category-chip { height: 30px; }
    .result-meta { height: 34px; }
    .results { padding-top: 7px; padding-bottom: 10px; }
    .panel-foot { min-height: 38px; }
}

/* ---------- Place detail: information first, not nested card-on-card styling. ---------- */
.detail-card {
    right: 20px;
    top: 20px;
    width: min(430px, calc(100vw - 44px));
    max-height: calc(100% - 40px);
    padding: 23px;
}
.detail-close, .detail-share { top: 13px; width: 36px; height: 36px; }
.detail-close { right: 13px; }
.detail-share { right: 55px; }
.detail-kicker {
    padding-right: 86px;
    color: #28617e;
    font-size: 11px;
    letter-spacing: .115em;
}
.detail-card h2 {
    margin: 9px 90px 10px 0;
    color: #102b3f;
    font: 750 25px/1.16 "Manrope", sans-serif;
    letter-spacing: -.025em;
}
.detail-card > p#detailText {
    margin-bottom: 9px;
    color: #506875;
    font-size: 14.5px;
    line-height: 1.58;
}
.detail-occurrence {
    margin-bottom: 14px;
    color: #6d818c;
    font-size: 11.5px;
}
.detail-facts {
    gap: 0;
    margin-bottom: 12px;
    border-top: 1px solid rgba(17,48,68,.12);
    border-bottom: 1px solid rgba(17,48,68,.12);
}
.detail-fact {
    grid-template-columns: 31px minmax(0,1fr);
    gap: 11px;
    padding: 12px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.detail-fact + .detail-fact { border-top: 1px solid rgba(17,48,68,.08); }
.detail-fact-icon {
    width: 31px;
    height: 31px;
    border: 1px solid rgba(30,79,105,.16);
    border-radius: 7px;
    background: transparent;
    color: #285f7b;
    font-size: 14px;
}
.detail-fact small {
    margin-bottom: 3px;
    color: #687d89;
    font-size: 10.5px;
    letter-spacing: .075em;
}
.detail-fact strong {
    color: #304c5c;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.45;
}
.detail-card .detail-live-note {
    margin-bottom: 15px;
    color: #697d88;
    font-size: 11.5px;
    line-height: 1.5;
}
.detail-actions { gap: 8px; }
.primary-cta,
.secondary-cta {
    min-height: 44px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 750;
}
.primary-cta {
    background: #123f5c;
    border-color: #123f5c;
}
.primary-cta:hover { background: #18506f; }
.secondary-cta {
    border-color: rgba(17,48,68,.22);
    background: transparent;
    color: #245f7f;
}
.secondary-cta:hover { background: rgba(22,87,121,.055); }

/* ---------- Dark theme. ---------- */
html[data-theme="dark"] .explore-panel,
html[data-theme="dark"] .detail-card {
    color: var(--premium-text-dark);
    background: rgba(6, 27, 45, .982);
    border-color: rgba(159,204,224,.17);
    box-shadow: 0 26px 70px rgba(0,6,13,.48), 0 3px 12px rgba(0,6,13,.22);
}
html[data-theme="dark"] .panel-head h1,
html[data-theme="dark"] .mobile-sheet-head h2,
html[data-theme="dark"] .detail-card h2 { color: #f1f8fb; }
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .detail-kicker { color: #86cee9; }
html[data-theme="dark"] .panel-close,
html[data-theme="dark"] .detail-close,
html[data-theme="dark"] .detail-share,
html[data-theme="dark"] .mobile-sheet-head button {
    border-color: rgba(159,204,224,.20);
    background: transparent;
    color: #b6cad4;
}
html[data-theme="dark"] .panel-close:hover,
html[data-theme="dark"] .detail-close:hover,
html[data-theme="dark"] .detail-share:hover,
html[data-theme="dark"] .mobile-sheet-head button:hover {
    background: rgba(126,199,229,.08);
    color: #fff;
}
html[data-theme="dark"] .search-box {
    border-color: rgba(159,204,224,.22);
    background: rgba(7,35,57,.74);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}
html[data-theme="dark"] .search-box input { color: #f0f7fa; }
html[data-theme="dark"] .search-box input::placeholder { color: #91a9b5; }
html[data-theme="dark"] .search-box svg { stroke: #9bb4bf; }
html[data-theme="dark"] .search-box button { background: transparent; color: #adc1cb; }
html[data-theme="dark"] .category-chip {
    border-color: rgba(159,204,224,.18);
    background: rgba(255,255,255,.018);
    color: #b8cbd4;
}
html[data-theme="dark"] .category-chip:hover {
    border-color: rgba(121,204,235,.42);
    background: rgba(121,204,235,.055);
    color: #effaff;
}
html[data-theme="dark"] .category-chip.active {
    border-color: #4b9ebe;
    background: #174d69;
    color: #fff;
}
html[data-theme="dark"] .result-meta { border-color: rgba(159,204,224,.11); color: #97acb7; }
html[data-theme="dark"] .result-meta button { color: #8ad5f1; }
html[data-theme="dark"] .result-card { color: #ebf4f8; }
html[data-theme="dark"] .result-card:hover { background: rgba(126,199,229,.055); }
html[data-theme="dark"] .result-card.selected {
    background: rgba(89,167,201,.09);
    box-shadow: inset 3px 0 0 #6cb6d3;
}
html[data-theme="dark"] .result-icon,
html[data-theme="dark"] .result-icon.food,
html[data-theme="dark"] .result-icon.attraction,
html[data-theme="dark"] .result-icon.mobility,
html[data-theme="dark"] .result-icon.shopping {
    border-color: rgba(159,204,224,.18);
    background: transparent;
    color: #92d4ed;
}
html[data-theme="dark"] .result-main strong { color: #eef7fa; }
html[data-theme="dark"] .result-review { color: #a8bac3; }
html[data-theme="dark"] .result-main small { color: #95aab5; }
html[data-theme="dark"] .face-pill {
    color: #99d9f0;
    background: rgba(121,204,235,.075);
}
html[data-theme="dark"] .result-arrow { color: #8ba1ad; }
html[data-theme="dark"] .empty-state { color: #9cb1bc; }
html[data-theme="dark"] .panel-foot {
    color: #98adb7;
    background: rgba(3,20,34,.50);
    border-color: rgba(159,204,224,.10);
}
html[data-theme="dark"] .detail-card > p#detailText { color: #b0c1c9; }
html[data-theme="dark"] .detail-occurrence { color: #91a8b4; }
html[data-theme="dark"] .detail-facts {
    border-color: rgba(159,204,224,.14);
}
html[data-theme="dark"] .detail-fact {
    border-radius: 0;
    background: transparent;
}
html[data-theme="dark"] .detail-fact + .detail-fact { border-top-color: rgba(159,204,224,.09); }
html[data-theme="dark"] .detail-fact-icon {
    border-color: rgba(159,204,224,.18);
    background: transparent;
    color: #93d6ef;
}
html[data-theme="dark"] .detail-fact small { color: #91a8b4; }
html[data-theme="dark"] .detail-fact strong { color: #dbe8ee; }
html[data-theme="dark"] .detail-card .detail-live-note { color: #91a8b3; }
html[data-theme="dark"] .primary-cta {
    background: #e9f5fa;
    border-color: #e9f5fa;
    color: #08233a;
}
html[data-theme="dark"] .primary-cta:hover { background: #fff; }
html[data-theme="dark"] .secondary-cta {
    border-color: rgba(159,204,224,.24);
    background: transparent;
    color: #a6dff3;
}
html[data-theme="dark"] .secondary-cta:hover { background: rgba(121,204,235,.07); }

/* ---------- Mobile sheet and mobile controls. ---------- */
.mobile-explore {
    border-radius: 9px;
    background: rgba(5,25,42,.95);
    border-color: rgba(201,230,243,.22);
    font-size: 12.5px;
    font-weight: 750;
}
.mobile-count {
    border-radius: 5px;
    background: rgba(121,204,235,.10);
    font-size: 10.5px;
}
.mobile-sheet {
    border-radius: 16px 16px 0 0;
    background: rgba(251,250,247,.995);
    box-shadow: 0 -22px 62px rgba(0,16,29,.28);
}
.sheet-handle { height: 3px; }

html[data-theme="dark"] .mobile-sheet {
    color: #eef7fa;
    background: rgba(6,27,45,.997);
    box-shadow: 0 -22px 62px rgba(0,6,13,.55);
}
html[data-theme="dark"] .sheet-handle { background: #7394a5; }

/* ---------- Attractions microsite: preserve drama, remove playful softness. ---------- */
.attractions-launch {
    border-radius: 8px;
    background: rgba(121,204,235,.055);
    border-color: rgba(121,204,235,.22);
}
.attractions-launch::after {
    width: 4px;
    height: 4px;
    background: #d97770;
    box-shadow: none;
}
.attractions-launch-label { font-size: 12.5px; font-weight: 750; }
.attractions-view-close,
.attraction-spotlight-close {
    border-radius: 9px;
    box-shadow: 0 12px 32px rgba(0,8,18,.22);
}
.attractions-hero-eyebrow,
.attractions-section-kicker,
.attraction-card-tag,
.attraction-spotlight-meta { font-size: 11.5px; }
.attractions-hero-body { font-size: clamp(16px, 1.25vw, 19px); }
.attractions-hero-button,
.attraction-action {
    border-radius: 9px;
    font-size: 13px;
    font-weight: 750;
}
.attractions-hero-photo { border-radius: 16px; }
.attraction-card {
    border-radius: 16px;
    box-shadow: 0 22px 58px rgba(0,9,20,.16);
}
.attraction-card-number { border-radius: 6px; font-size: 11px; }
.attraction-card-body > p { font-size: 15px; line-height: 1.65; }
.attraction-fact span { font-size: 10.5px; }
.attraction-fact strong { font-size: 13px; }
.attraction-spotlight-gallery figure { border-radius: 16px; }
.attraction-spotlight-review { font-size: 17px; }
.attraction-spotlight-note { font-size: 11.5px; }
.attraction-spotlight-nav button {
    min-height: 46px;
    border-radius: 8px;
    font-size: 12.5px;
}

@media (max-width: 980px) {
    :root { --topbar-h: 66px; }
    .topbar { padding-inline: 14px; }
    .brand img { width: 100px; }
    .face-tab { min-width: 88px; height: 46px; font-size: 13px; }
    .detail-card { top: 14px; right: 14px; }
}

@media (max-width: 760px), (max-width: 900px) and (max-height: 500px) {
    :root { --topbar-h: calc(62px + var(--safe-top)); }

    .topbar {
        gap: 3px;
        padding: var(--safe-top) max(7px, var(--safe-right)) 0 max(7px, var(--safe-left));
    }
    .brand img { width: 58px; height: 34px; }

    .face-switcher {
        height: 48px;
        padding: 0;
        gap: 1px;
    }
    .face-tab {
        min-width: 52px;
        height: 48px;
        padding-inline: 7px;
        border-radius: 0;
        font-size: 12px;
    }
    .face-tab.active::after { left: 7px; right: 7px; bottom: 2px; }

    .top-actions { gap: 3px; }
    .attractions-entry {
        position: fixed;
        z-index: 115;
        top: calc(var(--topbar-h) + 9px);
        right: max(9px, var(--safe-right));
        min-width: 150px;
        height: 50px;
        padding-inline: 12px;
        border-radius: 9px;
        box-shadow: 0 14px 34px rgba(0, 13, 25, .34), inset 0 1px 0 #fff;
    }
    .attractions-entry-copy small { font-size: 7.5px; }
    .attractions-entry-copy strong { font-size: 13px; }
    .attractions-entry svg { width: 19px; height: 19px; }
    .attractions-entry-arrow { font-size: 16px; }
    .app-shell.guide-digital .attractions-entry { display: none; }
    body:has(.detail-card.open) .attractions-entry,
    body:has(.mobile-sheet.open) .attractions-entry {
        opacity: 0;
        pointer-events: none;
        transform: translateY(-5px);
    }
    body:has(.detail-card.open) .gesture-hint {
        opacity: 0;
        pointer-events: none;
        transform: translateY(10px);
    }
    .icon-btn,
    .text-btn {
        height: 44px;
        min-width: 44px;
        border-radius: 8px;
        padding-inline: 6px;
    }
    .text-btn { font-size: 12px; }
    .icon-btn svg { width: 17px; height: 17px; }

    .detail-card {
        right: max(8px, var(--safe-right));
        left: max(8px, var(--safe-left));
        bottom: calc(72px + var(--safe-bottom));
        max-height: min(74dvh, 600px);
        padding: 19px;
        border-radius: 13px;
    }
    .detail-close, .detail-share { width: 44px; height: 44px; }
    .detail-share { right: 63px; }
    .detail-kicker { padding-right: 100px; }
    .detail-card h2 { margin-right: 100px; font-size: 22px; }
    .detail-card > p#detailText { font-size: 14px; }
    .detail-fact strong { font-size: 12.5px; }
    .detail-card .detail-live-note { font-size: 11.5px; }

    .map-toolbar {
        right: max(8px, var(--safe-right));
        bottom: calc(8px + var(--safe-bottom));
        height: 52px;
        border-radius: 9px;
    }
    .map-toolbar button,
    .map-toolbar .toolbar-wide {
        height: 44px;
        min-width: 44px;
        border-radius: 7px;
    }
    .zoom-indicator {
        right: max(10px, var(--safe-right));
        bottom: calc(70px + var(--safe-bottom));
        font-size: 11px;
    }

    .mobile-explore {
        left: max(8px, var(--safe-left));
        bottom: calc(8px + var(--safe-bottom));
        height: 52px;
        padding-inline: 13px;
        border-radius: 9px;
        font-size: 12.5px;
    }

    .gesture-hint {
        left: max(8px, var(--safe-left));
        right: max(8px, var(--safe-right));
        bottom: calc(70px + var(--safe-bottom));
        min-height: 62px;
        padding: 10px 48px 10px 11px;
        border-radius: 9px;
    }
    .gesture-hint strong { font-size: 12px; }
    .gesture-hint small { font-size: 11px; line-height: 1.4; }

    .mobile-sheet { border-radius: 15px 15px 0 0; }
    .mobile-sheet-head {
        padding: 9px 14px 10px 17px;
    }
    .mobile-sheet-head h2 { font-size: 22px; }
    #mobileExploreContent .search-box {
        height: 50px;
        margin-inline: 14px;
    }
    #mobileExploreContent .search-box input { font-size: 16px; }
    #mobileExploreContent .category-strip { padding-inline: 14px; }
    #mobileExploreContent .category-chip {
        height: 44px;
        padding-inline: 14px;
        border-radius: 8px;
        font-size: 13px;
    }
    #mobileExploreContent .result-meta {
        height: 40px;
        padding-inline: 16px;
        font-size: 12px;
    }
    #mobileExploreContent .result-meta button { font-size: 12px; }
    #mobileExploreContent .result-card {
        min-height: 72px;
        padding: 12px 10px;
    }
    #mobileExploreContent .result-main strong { font-size: 15px; }
    #mobileExploreContent .result-review { font-size: 12.5px; }
    #mobileExploreContent .result-main small { font-size: 11.5px; }

    .attractions-view-close,
    .attraction-spotlight-close { border-radius: 8px; }
    .attractions-hero-body,
    .attractions-section-head p,
    .attraction-card-body > p,
    .attraction-spotlight-review { font-size: 15px; }
    .attraction-card { border-radius: 14px; }
    .attraction-card-body h3 { font-size: 28px; }
    .attraction-card-actions .attraction-action,
    .attraction-spotlight-actions .attraction-action { font-size: 13px; }
}

@media (max-width: 340px) {
    .brand img { width: 52px; }
    .face-tab { min-width: 47px; padding-inline: 5px; font-size: 11.5px; }
    .face-tab.active::after { left: 5px; right: 5px; }
}


/* ---------- Digital guide: editorial travel-hospitality presentation. ---------- */
.guide-hub {
    position: absolute;
    z-index: 90;
    inset: 0;
    overflow: hidden;
    color: #edf5f8;
    background:
        radial-gradient(circle at 82% 12%, rgba(75, 150, 181, .10), transparent 32rem),
        linear-gradient(180deg, #061a2b 0%, #082137 58%, #061a2b 100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, visibility .22s ease;
}
.guide-hub[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.workspace.guide-digital .map-viewport {
    visibility: hidden;
    pointer-events: none;
}
.workspace.guide-digital .explore-panel {
    opacity: 0;
    pointer-events: none;
}
.guide-scroll {
    position: absolute;
    inset: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}
.guide-inner {
    width: min(100%, 1480px);
    min-height: 100%;
    margin: 0 auto;
    padding: clamp(52px, 6.2vw, 90px) clamp(28px, 5.7vw, 86px) clamp(54px, 6vw, 86px);
}
.guide-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.28fr) minmax(300px, .72fr);
    gap: clamp(42px, 7vw, 108px);
    align-items: end;
    padding-bottom: clamp(58px, 7vw, 96px);
    border-bottom: 1px solid rgba(177, 215, 231, .13);
}
.guide-hero-copy { max-width: 760px; }
.guide-eyebrow,
.guide-section-kicker,
.guide-card-kicker {
    display: block;
    color: #83cde8;
    font: 800 11.5px/1.3 "Manrope", sans-serif;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.guide-hero h1 {
    max-width: 800px;
    margin: 14px 0 20px;
    color: #f4f9fb;
    font: 750 clamp(42px, 5vw, 70px)/1.01 "Manrope", sans-serif;
    letter-spacing: -.047em;
    text-wrap: balance;
}
.guide-hero-copy > p {
    max-width: 690px;
    margin: 0;
    color: #aec0c9;
    font-size: clamp(16px, 1.35vw, 19px);
    line-height: 1.66;
}
.guide-print-panel {
    align-self: end;
    padding: 24px 25px;
    border: 1px solid rgba(177, 215, 231, .17);
    border-radius: 12px;
    background: rgba(255,255,255,.025);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}
.guide-print-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border: 1px solid rgba(177, 215, 231, .20);
    border-radius: 7px;
    color: #96d8ef;
    font-size: 18px;
}
.guide-print-panel p {
    margin: 0 0 19px;
    color: #a9bbc5;
    font-size: 14px;
    line-height: 1.58;
}
.guide-print-cta,
.guide-card-primary,
.guide-card-secondary,
.guide-return {
    min-height: 44px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 750;
    letter-spacing: .005em;
}
.guide-print-cta {
    width: 100%;
    padding: 0 15px;
    border: 1px solid rgba(183, 222, 238, .24);
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #edf8fc;
    background: transparent;
    cursor: pointer;
}
.guide-print-cta:hover {
    border-color: rgba(183, 222, 238, .40);
    background: rgba(121, 204, 235, .055);
}
a.guide-print-cta { text-decoration: none; }
.guide-attractions-cta {
    margin-top: 9px;
    border-color: rgba(125, 200, 235, .34);
    background: rgba(78, 178, 218, .085);
}
.guide-attractions-cta:hover { background: rgba(78, 178, 218, .14); }

.guide-highlights { padding-top: clamp(56px, 6vw, 82px); }
.guide-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 31px;
}
.guide-section-head h2 {
    margin: 10px 0 0;
    color: #f1f8fb;
    font: 750 clamp(30px, 3.3vw, 46px)/1.08 "Manrope", sans-serif;
    letter-spacing: -.035em;
}
.guide-count {
    flex: 0 0 auto;
    padding-bottom: 5px;
    color: #8ea7b3;
    font-size: 12px;
    font-weight: 650;
}
.guide-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.guide-card {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    border: 1px solid rgba(177, 215, 231, .13);
    border-radius: 14px;
    isolation: isolate;
    background: #0a2a41;
    box-shadow: 0 20px 54px rgba(0, 8, 16, .19);
}
.guide-card--wide { grid-column: 1 / -1; min-height: 480px; }

/* Balance an odd final standard card instead of leaving half a desktop row empty. */
@media (min-width: 761px) {
    .guide-card:last-child:nth-child(odd):not(.guide-card--wide) { grid-column: 1 / -1; }
    .guide-card:last-child:nth-child(odd):not(.guide-card--wide) .guide-card-shade {
        background:
            linear-gradient(90deg, rgba(2, 14, 25, .88) 0%, rgba(2, 14, 25, .58) 44%, rgba(2, 14, 25, .10) 76%),
            linear-gradient(180deg, transparent 43%, rgba(2, 14, 25, .54) 100%);
    }
    .guide-card:last-child:nth-child(odd):not(.guide-card--wide) .guide-card-content {
        width: min(610px, 64%);
    }
}

.guide-card-media,
.guide-card-shade {
    position: absolute;
    inset: 0;
}
.guide-card-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: scale(1.002);
    transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.guide-card:hover .guide-card-media img { transform: scale(1.025); }
.guide-card-shade {
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(2, 14, 25, .06) 12%, rgba(2, 14, 25, .26) 46%, rgba(2, 14, 25, .91) 100%),
        linear-gradient(90deg, rgba(2, 14, 25, .34), transparent 58%);
}
.guide-card--wide .guide-card-shade {
    background:
        linear-gradient(90deg, rgba(2, 14, 25, .88) 0%, rgba(2, 14, 25, .58) 44%, rgba(2, 14, 25, .10) 76%),
        linear-gradient(180deg, transparent 43%, rgba(2, 14, 25, .54) 100%);
}
.guide-card-content {
    position: relative;
    z-index: 2;
    min-height: inherit;
    padding: clamp(24px, 3vw, 36px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.guide-card--wide .guide-card-content { width: min(610px, 64%); }
.guide-card-content h3 {
    margin: 8px 0 10px;
    color: #fff;
    font: 750 clamp(25px, 2.4vw, 34px)/1.09 "Manrope", sans-serif;
    letter-spacing: -.028em;
    text-wrap: balance;
}
.guide-card-review {
    max-width: 650px;
    margin: 0 0 17px;
    color: #d2dfe5;
    font-size: 14.5px;
    line-height: 1.56;
}
.guide-card-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
    margin-bottom: 20px;
    border-top: 1px solid rgba(224, 241, 248, .16);
}
.guide-card-fact {
    min-width: 0;
    padding-top: 12px;
}
.guide-card-fact small {
    display: block;
    margin-bottom: 4px;
    color: #9eb6c1;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.guide-card-fact span {
    display: block;
    overflow: hidden;
    color: #e7f0f4;
    font-size: 12.5px;
    line-height: 1.42;
    text-overflow: ellipsis;
}
.guide-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.guide-card-primary,
.guide-card-secondary {
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
}
.guide-card-primary {
    border: 1px solid #edf7fb;
    color: #09243a;
    background: #edf7fb;
}
.guide-card-primary:hover { background: #fff; border-color: #fff; }
.guide-card-secondary {
    border: 1px solid rgba(222, 240, 248, .27);
    color: #eff8fb;
    background: rgba(3, 18, 30, .22);
}
.guide-card-secondary:hover { background: rgba(255,255,255,.08); }
.guide-footer {
    max-width: 900px;
    margin: clamp(48px, 5vw, 72px) auto 0;
    padding-top: 25px;
    border-top: 1px solid rgba(177, 215, 231, .11);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 9px;
    color: #839da9;
    text-align: center;
    font-size: 12px;
    line-height: 1.55;
}
.guide-return {
    position: absolute;
    z-index: 70;
    top: 18px;
    left: 18px;
    padding: 0 14px;
    border: 1px solid rgba(203,230,242,.24);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #edf7fb;
    background: rgba(5,25,42,.94);
    box-shadow: 0 12px 30px rgba(0,13,24,.25);
    backdrop-filter: blur(18px);
    cursor: pointer;
}
.guide-return:hover { background: rgba(11,48,73,.96); }

html[data-theme="light"] .guide-hub {
    color: #173346;
    background:
        radial-gradient(circle at 82% 10%, rgba(70,151,184,.09), transparent 31rem),
        linear-gradient(180deg, #f8f7f3 0%, #f1f4f2 58%, #faf9f6 100%);
}
html[data-theme="light"] .guide-hero { border-color: rgba(17,48,68,.12); }
html[data-theme="light"] .guide-eyebrow,
html[data-theme="light"] .guide-section-kicker,
html[data-theme="light"] .guide-card-kicker { color: #276481; }
html[data-theme="light"] .guide-hero h1,
html[data-theme="light"] .guide-section-head h2 { color: #102b3e; }
html[data-theme="light"] .guide-hero-copy > p { color: #586f7c; }
html[data-theme="light"] .guide-print-panel {
    border-color: rgba(17,48,68,.14);
    background: rgba(255,255,255,.48);
}
html[data-theme="light"] .guide-print-icon { border-color: rgba(17,48,68,.15); color: #286580; }
html[data-theme="light"] .guide-print-panel p { color: #5c727e; }
html[data-theme="light"] .guide-print-cta {
    border-color: rgba(17,48,68,.22);
    color: #173f57;
}
html[data-theme="light"] .guide-print-cta:hover { background: rgba(24,88,120,.055); }
html[data-theme="light"] .guide-count { color: #697f8a; }
html[data-theme="light"] .guide-footer { border-color: rgba(17,48,68,.11); color: #6b808b; }

@media (max-width: 900px) {
    .guide-inner { padding-inline: clamp(20px, 5vw, 42px); }
    .guide-hero {
        grid-template-columns: 1fr;
        gap: 30px;
        align-items: start;
    }
    .guide-print-panel { max-width: 620px; }
    .guide-card--wide .guide-card-content { width: min(670px, 82%); }
}

@media (max-width: 760px), (max-width: 900px) and (max-height: 500px) {
    .guide-inner {
        padding: 40px max(13px, var(--safe-right)) calc(46px + var(--safe-bottom)) max(13px, var(--safe-left));
    }
    .guide-hero {
        gap: 24px;
        padding-bottom: 44px;
    }
    .guide-hero h1 { margin: 11px 0 16px; font-size: clamp(37px, 11.5vw, 51px); }
    .guide-hero-copy > p { font-size: 15px; line-height: 1.62; }
    .guide-print-panel { padding: 19px; border-radius: 10px; }
    .guide-print-panel p { font-size: 13.5px; }
    .guide-highlights { padding-top: 45px; }
    .guide-section-head {
        display: block;
        margin-bottom: 23px;
    }
    .guide-section-head h2 { font-size: 31px; }
    .guide-count { display: block; margin-top: 10px; font-size: 11.5px; }
    .guide-cards { grid-template-columns: 1fr; gap: 12px; }
    .guide-card,
    .guide-card--wide {
        grid-column: auto;
        min-height: 460px;
        border-radius: 11px;
    }
    .guide-card--wide .guide-card-content { width: auto; }
    .guide-card--wide .guide-card-shade {
        background: linear-gradient(180deg, rgba(2,14,25,.05) 8%, rgba(2,14,25,.30) 45%, rgba(2,14,25,.92) 100%);
    }
    .guide-card-content { padding: 22px 19px; }
    .guide-card-content h3 { font-size: 27px; }
    .guide-card-review { font-size: 14px; line-height: 1.55; }
    .guide-card-facts { grid-template-columns: 1fr; }
    .guide-card-fact + .guide-card-fact { margin-top: 10px; }
    .guide-card-fact span { font-size: 12.5px; }
    .guide-card-primary,
    .guide-card-secondary { min-height: 46px; flex: 1 1 145px; font-size: 13px; }
    .guide-footer { margin-top: 42px; font-size: 11.5px; }
    .guide-return {
        top: 10px;
        left: max(8px, var(--safe-left));
        min-height: 46px;
        font-size: 12.5px;
    }
}


/* ---------- Specificity hardening against the guide's base skin. ---------- */
.guide-print-panel::before { display: none; }
.guide-print-icon {
    position: static;
    right: auto;
    top: auto;
}
.guide-count {
    padding: 0 0 5px;
    border: 0;
    border-radius: 0;
    background: transparent;
}
html[data-theme="dark"] .guide-count,
html[data-theme="light"] .guide-count {
    border: 0;
    background: transparent;
}
.guide-card {
    grid-column: auto;
}
.guide-card--wide { grid-column: 1 / -1; }
.guide-card-kicker {
    width: fit-content;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
}
.guide-card-content {
    inset: auto;
}
.guide-card .guide-card-review,
.guide-card--wide .guide-card-review {
    max-width: 650px;
    font-size: 14.5px;
    line-height: 1.56;
    -webkit-line-clamp: 3;
}
.guide-card-fact {
    padding: 12px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
}
.guide-card-fact small { font-size: 11px; }
.guide-card-fact span { font-size: 12.5px; }

.attractions-top-context {
    min-height: 42px;
    padding: 0 13px;
    gap: 7px;
    color: #b7d1dc;
    font-size: 12.5px;
    letter-spacing: .025em;
}
.attractions-map-link .desktop-label { font-size: 12.5px; }
html[data-theme="light"] .attractions-top-context { color: #b7d1dc; }
html[data-theme="light"] .attractions-top-context-icon { color: #83cde8; }

@media (max-width: 760px), (max-width: 900px) and (max-height: 500px) {
    .face-tab { font-size: 12.5px; }
    #mobileExploreContent .result-review { font-size: 13px; line-height: 1.42; }
    .guide-card .guide-card-review,
    .guide-card--wide .guide-card-review {
        display: block;
        overflow: visible;
        font-size: 14px;
        line-height: 1.55;
        -webkit-line-clamp: unset;
    }
    .guide-card-fact small { font-size: 11px; }
    .guide-card-fact span { font-size: 12.5px; }
}


/* ---------- Attractions readability / shape consistency. ---------- */
.attractions-hero-count {
    font-size: 12px;
    line-height: 1.45;
}
.attraction-card-actions .attraction-action,
.attraction-spotlight-actions .attraction-action {
    font-size: 13px;
}
.attraction-facts .attraction-fact span { font-size: 11.5px; }
.attractions-grid .attraction-card { border-radius: 16px; }

@media (max-width: 760px), (max-width: 900px) and (max-height: 500px) {
    .attractions-grid .attraction-card { border-radius: 14px; }
    .attractions-hero-count { font-size: 11.5px; }
}


/* ---------- Guide: preserve each source's authored format instead of cover-cropping it. ---------- */
.guide-cards {
    grid-template-columns: 1fr;
    gap: clamp(28px, 4.2vw, 56px);
}
.guide-card,
.guide-card--wide {
    grid-column: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(300px, .76fr) minmax(0, 1.24fr);
    overflow: hidden;
    border: 1px solid rgba(177, 215, 231, .16);
    border-radius: 18px;
    background: linear-gradient(145deg, #09243a 0%, #061a2b 100%);
    box-shadow: 0 24px 64px rgba(0, 8, 16, .24);
}
.guide-card--portrait {
    grid-template-columns: minmax(300px, .78fr) minmax(360px, .72fr);
}
.guide-card--media-led {
    grid-template-columns: minmax(0, 1.24fr) minmax(340px, .76fr);
}
.guide-card--media-led .guide-card-content {
    padding-block: 24px;
}
.guide-card--panorama { grid-template-columns: 1fr; }
.guide-card:not(.guide-card--reverse) .guide-card-content {
    grid-column: 1;
    grid-row: 1;
}
.guide-card:not(.guide-card--reverse):not(.guide-card--panorama) .guide-card-media {
    grid-column: 2;
    grid-row: 1;
}
.guide-card--reverse .guide-card-media {
    grid-column: 1;
    grid-row: 1;
}
.guide-card--reverse .guide-card-content {
    grid-column: 2;
    grid-row: 1;
}
.guide-card--panorama .guide-card-media {
    grid-column: 1;
    grid-row: 1;
}
/* Match the specificity of the generic non-reverse placement above so panorama copy never overlays authored art. */
.guide-card.guide-card--panorama .guide-card-content {
    grid-column: 1;
    grid-row: 2;
}
.guide-card-media {
    position: relative;
    inset: auto;
    min-width: 0;
    min-height: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #020b12;
}
.guide-card-media img,
.guide-card:hover .guide-card-media img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    object-fit: contain;
    transform: none;
    transition: none;
}
.guide-card-media--portrait {
    padding: clamp(18px, 2vw, 30px);
    background:
        radial-gradient(circle at 50% 28%, rgba(63, 144, 184, .14), transparent 52%),
        #020b12;
}
.guide-card-media--portrait img {
    width: auto;
    height: min(70vh, 720px);
    max-width: 100%;
    max-height: 720px;
}
.guide-card-media--landscape img,
.guide-card-media--panorama img { align-self: center; }
.guide-card-shade { display: none; }
.guide-card-content,
.guide-card--wide .guide-card-content,
.guide-card:last-child:nth-child(odd):not(.guide-card--wide) .guide-card-content {
    position: relative;
    inset: auto;
    width: auto;
    min-height: 0;
    padding: clamp(28px, 3.2vw, 46px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: transparent;
}
.guide-card--panorama .guide-card-content {
    max-width: 850px;
    justify-self: start;
}
.guide-card-content h3 {
    margin: 10px 0 13px;
    font-size: clamp(28px, 2.8vw, 40px);
}
.guide-card .guide-card-review,
.guide-card--wide .guide-card-review {
    display: block;
    max-width: 720px;
    overflow: visible;
    font-size: 15px;
    line-height: 1.62;
    -webkit-line-clamp: unset;
}
.guide-card-facts { max-width: 720px; }
.guide-card-fact span {
    overflow: visible;
    text-overflow: clip;
}
.guide-panorama-hint { display: none; }

/* Cielo + Terraplén/BEC arrive as one authored two-panel PDF. Rejoin those
   halves as one editorial spread while keeping each destination semantically
   independent and the source art untouched. */
.guide-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid rgba(177, 215, 231, .16);
    border-radius: 18px;
    background: linear-gradient(145deg, #09243a 0%, #061a2b 100%);
    box-shadow: 0 24px 64px rgba(0, 8, 16, .24);
}
.guide-pair > .guide-card,
.guide-pair > .guide-card--wide,
.guide-pair > .guide-card--portrait,
.guide-pair > .guide-card--panorama,
.guide-pair > .guide-card--reverse,
.guide-pair > .guide-card--media-led {
    min-width: 0;
    grid-template-columns: 1fr;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.guide-pair > .guide-card + .guide-card {
    border-left: 1px solid rgba(177, 215, 231, .16);
}
.guide-pair > .guide-card::after { display: none; }
.guide-pair > .guide-card:not(.guide-card--panorama) > .guide-card-media,
.guide-pair > .guide-card--reverse > .guide-card-media {
    grid-column: 1;
    grid-row: 1;
}
.guide-pair > .guide-card:not(.guide-card--panorama) > .guide-card-content,
.guide-pair > .guide-card--reverse > .guide-card-content {
    grid-column: 1;
    grid-row: 2;
    padding: clamp(25px, 2.7vw, 38px);
    justify-content: flex-start;
}
.guide-pair > .guide-card .guide-card-content h3 {
    font-size: clamp(26px, 2.35vw, 34px);
}

html[data-theme="light"] .guide-card,
html[data-theme="light"] .guide-card--wide {
    border-color: rgba(17, 48, 68, .14);
    background: #fff;
    box-shadow: 0 22px 58px rgba(20, 42, 56, .10);
}
html[data-theme="light"] .guide-card-content h3 { color: #102b3e; }
html[data-theme="light"] .guide-card .guide-card-review,
html[data-theme="light"] .guide-card--wide .guide-card-review { color: #536b78; }
html[data-theme="light"] .guide-card-facts { border-color: rgba(17, 48, 68, .13); }
html[data-theme="light"] .guide-card-fact small { color: #617986; }
html[data-theme="light"] .guide-card-fact span { color: #284354; }
html[data-theme="light"] .guide-card-secondary {
    border-color: rgba(17, 48, 68, .22);
    color: #173f57;
    background: transparent;
}
html[data-theme="light"] .guide-card-secondary:hover { background: rgba(24, 88, 120, .06); }
html[data-theme="light"] .guide-card-media--portrait {
    background:
        radial-gradient(circle at 50% 28%, rgba(63, 144, 184, .10), transparent 52%),
        #e9eff1;
}
html[data-theme="light"] .guide-pair {
    border-color: rgba(17, 48, 68, .14);
    background: #fff;
    box-shadow: 0 22px 58px rgba(20, 42, 56, .10);
}
html[data-theme="light"] .guide-pair > .guide-card {
    background: transparent;
    box-shadow: none;
}
html[data-theme="light"] .guide-pair > .guide-card + .guide-card {
    border-left-color: rgba(17, 48, 68, .14);
}

@media (max-width: 760px), (max-width: 900px) and (max-height: 500px) {
    .guide-cards { gap: 20px; }
    .guide-card,
    .guide-card--wide,
    .guide-card--portrait,
    .guide-card--panorama,
    .guide-card--reverse {
        grid-template-columns: 1fr;
        min-height: 0;
        border-radius: 14px;
    }
    .guide-card .guide-card-media,
    .guide-card:not(.guide-card--reverse):not(.guide-card--panorama) .guide-card-media,
    .guide-card--reverse .guide-card-media,
    .guide-card--panorama .guide-card-media {
        grid-column: 1;
        grid-row: 1;
    }
    .guide-card .guide-card-content,
    .guide-card:not(.guide-card--reverse):not(.guide-card--panorama) .guide-card-content,
    .guide-card--reverse .guide-card-content,
    .guide-card--panorama .guide-card-content {
        grid-column: 1;
        grid-row: 2;
        width: auto;
        padding: 23px 19px 24px;
    }
    .guide-card-media--portrait { padding: 0; }
    .guide-card-media--portrait img {
        width: 100%;
        height: auto;
        max-height: none;
    }
    .guide-pair {
        grid-template-columns: 1fr;
        border-radius: 14px;
    }
    .guide-pair > .guide-card + .guide-card {
        border-left: 0;
        border-top: 1px solid rgba(177, 215, 231, .16);
    }
    html[data-theme="light"] .guide-pair > .guide-card + .guide-card {
        border-top-color: rgba(17, 48, 68, .14);
    }
    .guide-pair > .guide-card:not(.guide-card--panorama) > .guide-card-content,
    .guide-pair > .guide-card--reverse > .guide-card-content {
        padding: 23px 19px 24px;
    }
    .guide-card-media--panorama {
        display: block;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(125, 200, 235, .52) rgba(0, 0, 0, .16);
        -webkit-overflow-scrolling: touch;
    }
    .guide-card-media--panorama:focus-visible {
        outline: 2px solid #79cceb;
        outline-offset: -3px;
    }
    .guide-card-media--panorama img {
        width: 760px;
        max-width: none;
        height: auto;
    }
    .guide-panorama-hint {
        position: sticky;
        left: 12px;
        bottom: 12px;
        width: fit-content;
        min-height: 34px;
        margin: -46px 12px 12px;
        padding: 0 11px;
        display: inline-flex;
        align-items: center;
        border: 1px solid rgba(255,255,255,.26);
        border-radius: 999px;
        color: #fff;
        background: rgba(3, 18, 30, .82);
        box-shadow: 0 8px 24px rgba(0,0,0,.24);
        backdrop-filter: blur(12px);
        font-size: 11px;
        font-weight: 750;
        pointer-events: none;
    }
    .guide-card-content h3 { font-size: 29px; }
    .guide-card .guide-card-review,
    .guide-card--wide .guide-card-review { font-size: 14px; }
}