/* ============================================================================
   We Ötzi · /explore/globe — Tattoo globe (descubrimiento 3D)
   Rediseño Bauhaus sobre el DS (ds/tokens.css + ds/components.css).
   Referencia Figma: TATTOGLOBE (flujo clientes · pantalla 22): página crema
   con una banda-escenario ink donde vive el globo.
   Regla: solo var(--token); radius 0; sombra dura solo en hover.
   Superficie oscura deliberada del diseño: tokens --surface-stage / --ink-*.
   Página autosuficiente: ya no carga styles.css.
   ========================================================================== */

/* ---------- Utilidades locales ---------- */
.globe-page .hidden { display: none !important; }

.globe-page .skip-link {
    position: absolute;
    top: -48px;
    left: var(--space-3);
    z-index: 2000;
    background: var(--neutral-500);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: var(--meta-m-size);
    letter-spacing: var(--meta-m-track);
    text-transform: uppercase;
    padding: var(--space-2) var(--space-4);
    transition: top var(--duration-press);
}
.globe-page .skip-link:focus { top: var(--space-3); }

/* ---------- TopBar: ajustes de página ---------- */
.globe-map-cta { flex: none; }
.globe-burger { display: none; }

.globe-mobile-menu {
    display: flex;
    flex-direction: column;
    background: var(--surface-card);
    border-bottom: var(--border-strong-width) solid var(--border-strong);
}
.globe-mobile-menu[hidden] { display: none; }
.globe-mobile-link {
    display: block;
    padding: var(--space-4) var(--space-6);
    font-family: var(--font-mono);
    font-size: var(--meta-m-size);
    letter-spacing: var(--meta-m-track);
    text-transform: uppercase;
    color: var(--neutral-500);
    text-decoration: none;
    border-bottom: var(--border-hairline) solid var(--border-subtle);
}
.globe-mobile-link:hover {
    background: var(--neutral-100);
    color: var(--neutral-500);
    text-decoration: none;
}
.globe-mobile-link:last-child { border-bottom: 0; }

/* ============================================================
   BANDA OSCURA — escenario del globo
   ============================================================ */
.globe-shell {
    background: var(--surface-stage);
    color: var(--text-on-dark);
    min-height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
}
.globe-shell ::selection { background: var(--selection-bg); color: var(--selection-fg); }

/* ---------- Masthead editorial ---------- */
.globe-masthead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-8) var(--space-8) var(--space-5);
    border-bottom: var(--border-hairline) solid var(--dark-rule);
}
.globe-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--meta-s-size);
    letter-spacing: var(--meta-wide-track);
    text-transform: uppercase;
    color: var(--neutral-300);
}
.globe-eyebrow-dot {
    width: 8px;
    height: 8px;
    background: var(--yellow-300);
    animation: om-blink var(--duration-blink) infinite;
}
.globe-wordmark {
    margin: var(--space-2) 0 0;
    font-family: var(--font-display);
    font-size: var(--title-xl-size);
    line-height: var(--h1-lh);
    letter-spacing: var(--h1-track);
    color: var(--white);
}
.globe-sub {
    margin: var(--space-2) 0 0;
    font-size: var(--body-s-size);
    line-height: var(--body-s-lh);
    color: var(--neutral-300);
    max-width: 46ch;
}
.globe-counter {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    flex: none;
}
.globe-counter-value {
    font-family: var(--font-display);
    font-size: var(--title-lg-size);
    line-height: 1;
    color: var(--yellow-300);
}
.globe-counter-label {
    font-family: var(--font-mono);
    font-size: var(--meta-s-size);
    letter-spacing: var(--meta-s-track);
    text-transform: uppercase;
    color: var(--neutral-300);
    max-width: 22ch;
}

/* ---------- Filtros (rail oscuro) ---------- */
.globe-filters {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-8);
    border-bottom: var(--border-hairline) solid var(--dark-rule);
}
.globe-filter-pills {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    overflow-x: auto;
    padding-bottom: var(--space-1);
    scrollbar-width: thin;
}
.globe-filter-pills .filter-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    min-height: var(--control-h-sm);
    background: var(--surface-stage);
    color: var(--neutral-300);
    border: var(--border-hairline) solid var(--dark-rule);
    border-radius: var(--radius-none);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    flex: none;
    transition: background var(--duration-press), color var(--duration-press),
                border-color var(--duration-press);
}
.globe-filter-pills .filter-pill:hover {
    background: var(--dark-hover);
    color: var(--neutral-200);
    border-color: var(--neutral-300);
}
.globe-filter-pills .filter-pill.is-active {
    background: var(--yellow-300);
    color: var(--neutral-500);
    border-color: var(--yellow-300);
}
.globe-filter-pills .pill-count {
    font-size: var(--font-size-min);
    color: var(--neutral-400);
}
.globe-filter-pills .filter-pill.is-active .pill-count { color: var(--neutral-400); }

.globe-filter-selects {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.globe-filter-selects select {
    min-height: var(--control-h-sm);
    background: var(--surface-stage);
    color: var(--text-on-dark);
    border: var(--border-hairline) solid var(--dark-rule);
    border-radius: var(--radius-none);
    font-family: var(--font-mono);
    font-size: var(--meta-m-size);
    letter-spacing: 0.04em;
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
}
.globe-filter-selects select:hover { background: var(--dark-hover); }
.globe-filter-selects select:focus-visible { box-shadow: var(--shadow-focus); outline: none; }
.globe-clear-btn {
    min-height: var(--control-h-sm);
    background: transparent;
    color: var(--neutral-300);
    border: var(--border-hairline) solid var(--dark-rule);
    border-radius: var(--radius-none);
    font-family: var(--font-body);
    font-size: var(--button-s-size);
    font-weight: var(--weight-bold);
    letter-spacing: var(--button-s-track);
    text-transform: uppercase;
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    transition: background var(--duration-press), color var(--duration-press);
}
.globe-clear-btn:hover {
    background: var(--dark-hover);
    color: var(--white);
    border-color: var(--neutral-300);
}

/* ============================================================
   MAIN — escenario (izq) + panel (der)
   ============================================================ */
.globe-main {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    min-height: 0;
}

/* ---------- Escenario ---------- */
.globe-stage {
    position: relative;
    min-height: clamp(480px, 68vh, 780px);
    min-width: 0;
    overflow: hidden;
}
.globe-stage-frame {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Con selección: grid [card | globo] — el JS agrega .has-selection. */
.globe-stage.has-selection {
    display: grid;
    grid-template-columns: minmax(300px, 380px) 1fr;
    grid-template-rows: 1fr;
    gap: 0;
}
.globe-stage.has-selection .globe-stage-frame {
    position: relative;
    inset: auto;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
}
.globe-stage.has-selection .globe-legend { display: none; }
.globe-stage.has-selection .globe-loading,
.globe-stage.has-selection .globe-empty {
    grid-column: 2;
    grid-row: 1;
}

.globe-canvas {
    /* El tamaño real lo fija el JS (dpr); CSS solo limita el box. */
    width: 100%;
    height: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    cursor: grab;
    contain: paint;
}
.globe-canvas:active { cursor: grabbing; }
.globe-canvas:focus-visible { box-shadow: var(--shadow-focus); outline: none; }

/* Capa de labels DOM posicionada por JS en pixels. */
.globe-labels {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
}

/* ---------- Loading / vacío ---------- */
.globe-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    background: var(--surface-stage);
    color: var(--neutral-300);
    font-family: var(--font-mono);
    font-size: var(--meta-m-size);
    letter-spacing: var(--meta-m-track);
    text-transform: uppercase;
    z-index: 6;
    transition: opacity var(--duration-fade) var(--ease-standard),
                visibility var(--duration-fade) var(--ease-standard);
}
.globe-loading.is-hidden { opacity: 0; visibility: hidden; }
.globe-loading-dot {
    width: 10px;
    height: 10px;
    background: var(--yellow-300);
    animation: om-blink var(--duration-blink) infinite;
}

.globe-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    text-align: center;
    padding: var(--space-8);
    z-index: 6;
}
.globe-empty h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--h3-size);
    color: var(--white);
}
.globe-empty p {
    margin: 0;
    font-size: var(--body-s-size);
    color: var(--neutral-300);
}
.globe-empty-btn {
    margin-top: var(--space-2);
    min-height: var(--control-h-sm);
    background: var(--yellow-300);
    color: var(--neutral-500);
    border: var(--border-strong-width) solid var(--yellow-300);
    border-radius: var(--radius-none);
    font-family: var(--font-body);
    font-size: var(--button-s-size);
    font-weight: var(--weight-bold);
    letter-spacing: var(--button-s-track);
    text-transform: uppercase;
    padding: var(--space-2) var(--space-5);
    cursor: pointer;
}
.globe-empty-btn:hover { background: var(--yellow-400); border-color: var(--yellow-400); }

/* ---------- Leyenda (cuadrados Bauhaus, Figma TATTOGLOBE) ---------- */
.globe-legend {
    position: absolute;
    left: var(--space-6);
    bottom: var(--space-6);
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    pointer-events: none;
}
.globe-legend-title {
    font-family: var(--font-display);
    font-size: var(--meta-m-size);
    text-transform: uppercase;
    color: var(--neutral-300);
}
.globe-legend ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.globe-legend li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--meta-s-size);
    letter-spacing: var(--meta-s-track);
    text-transform: uppercase;
    color: var(--neutral-300);
}
.legend-dot { width: 8px; height: 8px; flex: none; }
.legend-dot.dot-artist      { background: var(--yellow-300); }
.legend-dot.dot-recommended { background: var(--red-300); }
.legend-dot.dot-itinerary   { background: var(--yellow-200); }
.legend-dot.dot-arc         { background: var(--blue-400); }

/* ============================================================
   CARD DEL ARTISTA SELECCIONADO (marco doble tipo passport-card)
   ============================================================ */
.globe-selected-card {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    background: var(--surface-overlay);
    border-right: var(--border-strong-width) solid var(--surface-overlay-border);
    animation: om-fade-in var(--duration-fade) var(--ease-standard);
}
.globe-selected-close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-h-sm);
    height: var(--control-h-sm);
    background: var(--surface-overlay);
    color: var(--white);
    border: var(--border-hairline) solid var(--dark-rule);
    border-radius: var(--radius-none);
    cursor: pointer;
}
.globe-selected-close:hover { background: var(--dark-hover); border-color: var(--neutral-300); }
.globe-selected-recommended {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 3;
    background: var(--red-300);
    color: var(--white);
    font-family: var(--font-mono);
    font-size: var(--meta-s-size);
    letter-spacing: var(--meta-s-track);
    text-transform: uppercase;
    padding: var(--space-1) var(--space-2);
}
.globe-selected-cover {
    height: 160px;
    flex: none;
    background-color: var(--ink-slate);
    background-size: cover;
    background-position: center;
    border-bottom: var(--border-hairline) solid var(--dark-rule);
}
.globe-selected-cover.no-image { background-color: var(--ink-slate); }
.globe-selected-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
}
.globe-selected-toprow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.globe-selected-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--meta-s-size);
    letter-spacing: var(--meta-wide-track);
    text-transform: uppercase;
    color: var(--yellow-300);
}
.globe-selected-source {
    font-family: var(--font-mono);
    font-size: var(--meta-s-size);
    letter-spacing: var(--meta-s-track);
    text-transform: uppercase;
    padding: 2px var(--space-2);
    border: var(--border-hairline) solid var(--dark-rule);
    color: var(--neutral-300);
}
.globe-selected-source.is-studio { color: var(--blue-200); border-color: var(--blue-300); }
.globe-selected-source.is-independent { color: var(--yellow-200); border-color: var(--yellow-500); }
.globe-selected-name {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--h3-size);
    line-height: var(--h3-lh);
    color: var(--white);
}
.globe-selected-styles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}
.globe-selected-bio {
    margin: 0;
    font-size: var(--body-s-size);
    line-height: var(--body-s-lh);
    color: var(--text-on-dark);
    border-left: var(--border-rule-width) solid var(--dark-rule);
    padding-left: var(--space-3);
}
.globe-selected-facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.globe-selected-fact {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--body-s-size);
    color: var(--text-on-dark);
}
.globe-selected-fact [data-wo-icon] { color: var(--neutral-300); }

/* Itinerario dentro de la card */
.globe-selected-itinerary {
    border-top: var(--border-hairline) solid var(--dark-rule);
    padding-top: var(--space-3);
}
.globe-selected-itinerary-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.globe-selected-itinerary-title {
    font-family: var(--font-display);
    font-size: var(--meta-m-size);
    text-transform: uppercase;
    color: var(--white);
}
.globe-selected-itinerary-hint {
    font-family: var(--font-mono);
    font-size: var(--font-size-min);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--neutral-400);
}
.globe-selected-itinerary-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.itinerary-row { border-bottom: var(--border-hairline) solid var(--dark-rule); }
.itinerary-row:last-child { border-bottom: 0; }
.itinerary-row-btn {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    background: transparent;
    border: 0;
    padding: var(--space-2) 0;
    cursor: pointer;
    text-align: left;
    color: inherit;
}
.itinerary-row-btn:hover { background: var(--dark-hover); }
.itinerary-order {
    font-family: var(--font-mono);
    font-size: var(--meta-s-size);
    color: var(--neutral-400);
    flex: none;
}
.itinerary-dot { width: 8px; height: 8px; flex: none; }
.itinerary-dot.dot-current  { background: var(--system-success); }
.itinerary-dot.dot-upcoming { background: var(--yellow-300); }
.itinerary-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.itinerary-venue {
    font-size: var(--body-s-size);
    font-weight: var(--weight-bold);
    color: var(--white);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.itinerary-where {
    font-size: var(--meta-m-size);
    color: var(--neutral-300);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.itinerary-range {
    font-family: var(--font-mono);
    font-size: var(--meta-s-size);
    letter-spacing: var(--meta-s-track);
    text-transform: uppercase;
    color: var(--yellow-300);
}

.globe-selected-pricerow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    border-top: var(--border-hairline) solid var(--dark-rule);
    padding-top: var(--space-3);
}
.globe-selected-pricelabel {
    font-family: var(--font-mono);
    font-size: var(--meta-s-size);
    letter-spacing: var(--meta-wide-track);
    text-transform: uppercase;
    color: var(--neutral-300);
}
.globe-selected-price {
    font-family: var(--font-display);
    font-size: var(--h3-size);
    color: var(--yellow-300);
}
.globe-selected-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}
.globe-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-h-md);
    border-radius: var(--radius-none);
    font-family: var(--font-body);
    font-size: var(--button-s-size);
    font-weight: var(--weight-bold);
    letter-spacing: var(--button-s-track);
    text-transform: uppercase;
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    transition: background var(--duration-press), color var(--duration-press);
}
.globe-cta.primary {
    background: var(--action-accent);
    color: var(--action-accent-fg);
    border: var(--border-strong-width) solid var(--action-accent);
}
.globe-cta.primary:hover {
    background: var(--action-accent-hover);
    border-color: var(--action-accent-hover);
}
.globe-cta.secondary {
    background: transparent;
    color: var(--text-on-dark);
    border: var(--border-strong-width) solid var(--dark-rule);
}
.globe-cta.secondary:hover {
    background: var(--dark-hover);
    border-color: var(--neutral-300);
    color: var(--white);
}
.globe-selected-directions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--meta-m-size);
    letter-spacing: var(--meta-m-track);
    text-transform: uppercase;
    color: var(--blue-200);
    padding: var(--space-2) 0;
    text-decoration: none;
}
.globe-selected-directions:hover { color: var(--white); text-decoration: none; }

/* ============================================================
   PANEL LATERAL — lista sincronizada
   ============================================================ */
.globe-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-left: var(--border-hairline) solid var(--dark-rule);
}
.globe-panel-header {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-5) var(--space-4);
    border-bottom: var(--border-hairline) solid var(--dark-rule);
    flex: none;
}
.globe-panel-count {
    font-family: var(--font-display);
    font-size: var(--title-md-size);
    line-height: 1;
    color: var(--white);
}
.globe-panel-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.globe-panel-label-main {
    font-family: var(--font-mono);
    font-size: var(--meta-m-size);
    letter-spacing: var(--meta-m-track);
    text-transform: uppercase;
    color: var(--text-on-dark);
}
.globe-panel-label-sub {
    font-family: var(--font-mono);
    font-size: var(--meta-s-size);
    letter-spacing: var(--meta-s-track);
    text-transform: uppercase;
    color: var(--neutral-400);
}
.globe-panel-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}
.globe-panel-empty {
    padding: var(--space-6) var(--space-5);
    font-size: var(--body-s-size);
    color: var(--neutral-300);
}

/* Card fila de artista */
.globe-card {
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-bottom: var(--border-hairline) solid var(--dark-rule);
    border-left: var(--border-rule-width) solid transparent;
    cursor: pointer;
    transition: background var(--duration-press), border-color var(--duration-press);
}
.globe-card:hover { background: var(--dark-hover); }
.globe-card.is-active {
    background: var(--dark-hover);
    border-left-color: var(--yellow-300);
}
.globe-card-img {
    width: 56px;
    height: 56px;
    background-color: var(--ink-slate);
    background-size: cover;
    background-position: center;
    flex: none;
}
.globe-card-img.no-image { background-color: var(--ink-slate); }
.globe-card-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    /* Deja aire para el precio y el tag "Recomendado" (absolutos a la derecha). */
    padding-right: var(--space-12);
}
.globe-card-styles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    order: 3;
}
.globe-card-name {
    margin: 0;
    order: 1;
    font-family: var(--font-display);
    font-size: 15px;
    line-height: 1.2;
    color: var(--white);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.globe-card-meta {
    order: 2;
    font-family: var(--font-mono);
    font-size: var(--meta-s-size);
    letter-spacing: var(--meta-s-track);
    text-transform: uppercase;
    color: var(--neutral-300);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.globe-card-price {
    position: absolute;
    top: var(--space-3);
    right: var(--space-5);
    font-family: var(--font-mono);
    font-size: var(--meta-m-size);
    color: var(--yellow-300);
}
.globe-card-recommended-tag {
    position: absolute;
    bottom: var(--space-3);
    right: var(--space-5);
    background: var(--red-300);
    color: var(--white);
    font-family: var(--font-mono);
    font-size: var(--font-size-min);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px var(--space-1);
}

/* Tags mini (compartidos con card seleccionada y modal) */
.globe-page .tag-mini {
    display: inline-flex;
    background: transparent;
    color: var(--neutral-300);
    border: var(--border-hairline) solid var(--dark-rule);
    font-family: var(--font-mono);
    font-size: var(--font-size-min);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 6px;
}

/* ============================================================
   SPOTLIGHT — chip flotante sobre el globo (creado por JS)
   ============================================================ */
.globe-spotlight {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -120%);
    pointer-events: auto;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    background: var(--surface-overlay);
    border: var(--border-hairline) solid var(--yellow-300);
    padding: var(--space-2) var(--space-3);
    max-width: 240px;
    opacity: 0;
    transition: opacity var(--duration-fade) var(--ease-standard),
                left 0.06s linear, top 0.06s linear;
    user-select: none;
    z-index: 5;
}
.globe-spotlight.is-visible { opacity: 1; }
.globe-spotlight.is-leaving { opacity: 0; }
.globe-spotlight:focus-visible { box-shadow: var(--shadow-focus); outline: none; }
.globe-spotlight-badge {
    align-self: flex-start;
    background: var(--red-300);
    color: var(--white);
    font-family: var(--font-mono);
    font-size: var(--font-size-min);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 1px var(--space-1);
}
.globe-spotlight-name {
    font-family: var(--font-display);
    font-size: var(--body-s-size);
    line-height: 1.2;
    color: var(--white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.globe-spotlight-meta {
    font-family: var(--font-mono);
    font-size: var(--font-size-min);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--neutral-300);
}
.globe-spotlight-counter {
    font-family: var(--font-mono);
    font-size: var(--font-size-min);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--neutral-400);
}
.globe-spotlight-stop {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-top: var(--border-hairline) solid var(--dark-rule);
    padding-top: var(--space-1);
}
.globe-spotlight-period {
    font-family: var(--font-mono);
    font-size: var(--font-size-min);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.globe-spotlight-period.is-current  { color: var(--system-success); }
.globe-spotlight-period.is-upcoming { color: var(--blue-200); }
.globe-spotlight-place {
    font-size: var(--body-s-size);
    font-weight: var(--weight-bold);
    color: var(--white);
}
.globe-spotlight-date {
    font-family: var(--font-mono);
    font-size: var(--font-size-min);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--yellow-300);
}

/* ---------- Avión entre paradas (creado por JS) ----------
   Tres capas anidadas para que cada eje rote en su marco local:
     .globe-plane      → posición (left/top)
     .globe-plane-rot  → rumbo rotateZ
     .globe-plane-tilt → pitch rotateX + bank rotateY               */
.globe-plane {
    position: absolute;
    left: 0;
    top: 0;
    width: 48px;
    height: 48px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 7;
    perspective: 220px;
    transform-style: preserve-3d;
    transition: opacity var(--duration-fade) var(--ease-standard);
    will-change: left, top;
}
.globe-plane[hidden] { display: none; }
.globe-plane-rot,
.globe-plane-tilt {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
}
.globe-plane-rot  { transform: rotate(0deg); }
.globe-plane-tilt { transform: rotateX(0deg) rotateY(0deg); }
.globe-plane svg {
    width: 100%;
    height: 100%;
    display: block;
    transform-origin: 50% 50%;
}
.globe-plane.is-back { opacity: var(--opacity-disabled); }

/* ============================================================
   MODAL DE ARTISTA (inverso: ink + borde amarillo)
   ============================================================ */
.globe-modal-backdrop { z-index: 1000; }
.globe-modal {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--surface-overlay);
    border: var(--border-strong-width) solid var(--surface-overlay-border);
    color: var(--text-on-dark);
    animation: om-fade-in var(--duration-fade) var(--ease-standard);
}
.globe-modal-close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-h-sm);
    height: var(--control-h-sm);
    background: var(--surface-overlay);
    color: var(--white);
    border: var(--border-hairline) solid var(--dark-rule);
    border-radius: var(--radius-none);
    cursor: pointer;
}
.globe-modal-close:hover { background: var(--dark-hover); border-color: var(--neutral-300); }
.globe-modal-cover {
    height: 200px;
    background-color: var(--ink-slate);
    background-size: cover;
    background-position: center;
    border-bottom: var(--border-hairline) solid var(--dark-rule);
}
.globe-modal-body {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.globe-modal-source-badge {
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: var(--meta-s-size);
    letter-spacing: var(--meta-s-track);
    text-transform: uppercase;
    padding: 2px var(--space-2);
    border: var(--border-hairline) solid var(--dark-rule);
    color: var(--neutral-300);
}
.globe-modal-source-badge.is-studio { color: var(--blue-200); border-color: var(--blue-300); }
.globe-modal-source-badge.is-independent { color: var(--yellow-200); border-color: var(--yellow-500); }
.globe-modal-styles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}
.globe-modal-name {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--h2-size);
    line-height: var(--h2-lh);
    color: var(--white);
}
.globe-modal-meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.globe-modal-meta-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--body-s-size);
    color: var(--text-on-dark);
}
.globe-modal-meta-row [data-wo-icon] { color: var(--neutral-300); }
.globe-modal-bio {
    font-size: var(--body-s-size);
    line-height: var(--body-s-lh);
    color: var(--text-on-dark);
    border-left: var(--border-rule-width) solid var(--dark-rule);
    padding-left: var(--space-4);
}
.globe-modal-price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    border-top: var(--border-hairline) solid var(--dark-rule);
    padding-top: var(--space-4);
}
.globe-modal-price-row .price-label {
    font-family: var(--font-mono);
    font-size: var(--meta-s-size);
    letter-spacing: var(--meta-wide-track);
    text-transform: uppercase;
    color: var(--neutral-300);
}
.globe-modal-price-row .price-value {
    font-family: var(--font-display);
    font-size: var(--h3-size);
    color: var(--yellow-300);
}
.globe-modal-cta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}
.globe-modal-cta-quote,
.globe-modal-cta-profile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-h-md);
    border-radius: var(--radius-none);
    font-family: var(--font-body);
    font-size: var(--button-s-size);
    font-weight: var(--weight-bold);
    letter-spacing: var(--button-s-track);
    text-transform: uppercase;
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    transition: background var(--duration-press), color var(--duration-press);
}
.globe-modal-cta-quote {
    background: var(--action-accent);
    color: var(--action-accent-fg);
    border: var(--border-strong-width) solid var(--action-accent);
}
.globe-modal-cta-quote:hover {
    background: var(--action-accent-hover);
    border-color: var(--action-accent-hover);
}
.globe-modal-cta-profile {
    background: transparent;
    color: var(--text-on-dark);
    border: var(--border-strong-width) solid var(--dark-rule);
}
.globe-modal-cta-profile:hover {
    background: var(--dark-hover);
    border-color: var(--neutral-300);
    color: var(--white);
}
.globe-modal-cta-directions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--meta-m-size);
    letter-spacing: var(--meta-m-track);
    text-transform: uppercase;
    color: var(--blue-200);
    padding: var(--space-2) 0;
    text-decoration: none;
}
.globe-modal-cta-directions:hover { color: var(--white); text-decoration: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .globe-main { grid-template-columns: 1fr; }
    .globe-panel {
        border-left: 0;
        border-top: var(--border-hairline) solid var(--dark-rule);
        max-height: 420px;
    }
    .globe-masthead {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }
}

@media (max-width: 768px) {
    .globe-burger { display: inline-flex; }
    .globe-map-cta { display: none; }

    .globe-masthead { padding: var(--space-6) var(--space-4) var(--space-4); }
    .globe-filters { padding: var(--space-3) var(--space-4); }
    .globe-wordmark { font-size: var(--h2-size); }
    .globe-counter-value { font-size: var(--title-sm-size); }

    .globe-stage { min-height: clamp(380px, 58vh, 560px); }
    .globe-stage.has-selection {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(280px, 45vh);
    }
    .globe-stage.has-selection .globe-selected-card {
        grid-column: 1;
        grid-row: 1;
        border-right: 0;
        border-bottom: var(--border-strong-width) solid var(--surface-overlay-border);
        max-height: 50vh;
    }
    .globe-stage.has-selection .globe-stage-frame,
    .globe-stage.has-selection .globe-loading,
    .globe-stage.has-selection .globe-empty {
        grid-column: 1;
        grid-row: 2;
    }
    .globe-legend { display: none; }

    .globe-modal { max-width: 100%; }
    .globe-modal-cta-row { grid-template-columns: 1fr; }
}

@media (min-width: 769px) {
    .globe-mobile-menu { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .globe-eyebrow-dot,
    .globe-loading-dot { animation: none; }
    .globe-spotlight,
    .globe-spotlight.is-visible,
    .globe-spotlight.is-leaving {
        transition: opacity 0.15s linear;
    }
    .globe-selected-card,
    .globe-modal { animation: none; }
}