/* ============================================================================
   We Ötzi · /explore — Atlas de tatuadores (mapa)
   Rediseño Bauhaus sobre el DS (ds/tokens.css + ds/components.css).
   Referencia Figma: "Descubrí artistas" (flujo clientes · pantalla 25).
   Regla: solo var(--token); radius 0; sombra dura solo en hover.
   Página autosuficiente: ya no carga styles.css ni marketplace.css.
   ========================================================================== */

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

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

/* Menú móvil bajo el topbar */
.explore-mobile-menu {
    display: flex;
    flex-direction: column;
    background: var(--surface-card);
    border-bottom: var(--border-strong-width) solid var(--border-strong);
}
.explore-mobile-menu[hidden] { display: none; }
.explore-mobile-menu-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);
}
.explore-mobile-menu-link:hover {
    background: var(--neutral-100);
    color: var(--neutral-500);
    text-decoration: none;
}
.explore-mobile-menu-link:last-child { border-bottom: 0; }

/* ---------- Shell ---------- */
.explore-shell { padding-bottom: var(--space-16); }

/* ---------- Hero ---------- */
.explore-hero {
    padding: var(--space-10) 0 var(--space-6);
    border-bottom: var(--border-rule-width) solid var(--border-strong);
}
.explore-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    color: var(--text-muted);
}
.explore-tag .dot {
    width: 8px;
    height: 8px;
    background: var(--system-success);
    animation: om-blink var(--duration-blink) infinite;
}
.explore-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--title-xl-size);
    line-height: var(--h1-lh);
    letter-spacing: var(--h1-track);
    color: var(--text-heading);
}
.explore-sub {
    margin: var(--space-3) 0 0;
    font-size: var(--body-m-size);
    line-height: var(--body-m-lh);
    color: var(--text-muted);
    max-width: 52ch;
}

/* ---------- Filtros ---------- */
.explore-filters { padding: var(--space-5) 0 0; }
.explore-filters-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.filter-pill-group {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    overflow-x: auto;
    flex: 1;
    min-width: 0;
    padding-bottom: var(--space-1);
    scrollbar-width: thin;
}
.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-card);
    color: var(--neutral-500);
    border: var(--border-hairline) solid var(--border-muted);
    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: transform var(--duration-press), box-shadow var(--duration-press),
                background var(--duration-press), color var(--duration-press);
}
.filter-pill:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-hard-sm);
    border-color: var(--border-strong);
}
.filter-pill:active { transform: none; box-shadow: none; }
.filter-pill.is-active {
    background: var(--neutral-500);
    color: var(--accent);
    border-color: var(--neutral-500);
}
.filter-pill .pill-count {
    font-size: var(--font-size-min);
    color: var(--text-faint);
}
.filter-pill.is-active .pill-count { color: var(--text-on-dark); }
.filter-pill .pin-ico { width: 12px; height: 12px; }

/* Botón "Filtros" con punto de estado */
.explore-filters-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    min-height: var(--control-h-sm);
    background: var(--surface-card);
    color: var(--neutral-500);
    border: var(--border-strong-width) solid var(--border-strong);
    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;
    cursor: pointer;
    flex: none;
    transition: transform var(--duration-press), box-shadow var(--duration-press);
}
.explore-filters-toggle:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-hard-sm);
}
.explore-filters-toggle:active { transform: none; box-shadow: none; }
.explore-filters-toggle[aria-expanded="true"] {
    background: var(--neutral-500);
    color: var(--accent);
}
.explore-filters-toggle-dot {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 10px;
    height: 10px;
    background: var(--red-300);
    border: var(--border-strong-width) solid var(--surface-page);
}

/* Drawer de selects */
.explore-filter-drawer {
    margin-top: var(--space-4);
    border: var(--border-strong-width) solid var(--border-strong);
    background: var(--surface-card);
    padding: var(--space-5);
}
.filter-select-group {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: var(--space-4);
    align-items: end;
}
.explore-clear-btn { min-height: var(--control-h-md); }

/* ---------- Toolbar de resultados + tabs ---------- */
.explore-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) 0 var(--space-4);
    border-bottom: var(--border-hairline) solid var(--border-subtle);
    margin-bottom: var(--space-6);
}
.explore-count { color: var(--text-muted); }

/* Segmentado LISTA / MAPA (Figma: segmento activo en tinta).
   En desktop mapa y grilla conviven apilados; el conmutador solo
   tiene sentido en móvil, donde alterna las dos vistas. */
.explore-tabs {
    display: none;
    border: var(--border-strong-width) solid var(--border-strong);
    background: var(--surface-card);
}
.explore-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    min-height: var(--control-h-sm);
    background: transparent;
    color: var(--neutral-400);
    border: 0;
    font-family: var(--font-mono);
    font-size: var(--meta-m-size);
    letter-spacing: var(--meta-m-track);
    text-transform: uppercase;
    cursor: pointer;
}
.explore-tab + .explore-tab { border-left: var(--border-hairline) solid var(--border-subtle); }
.explore-tab:hover { color: var(--neutral-500); background: var(--neutral-100); }
.explore-tab.is-active {
    background: var(--neutral-500);
    color: var(--accent);
}

/* ---------- Main: mapa arriba, grilla debajo (Figma) ---------- */
.explore-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.explore-map-panel {
    position: relative;
    border: var(--border-strong-width) solid var(--border-strong);
    background: var(--surface-media);
}
.explore-map {
    width: 100%;
    height: clamp(420px, 58vh, 640px);
    background: var(--surface-media);
}
.explore-map-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-media);
    color: var(--text-muted);
    text-align: center;
    padding: var(--space-6);
    z-index: 2;
}

/* ---------- Lista de artistas (grilla de cards editoriales) ---------- */
.explore-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
}
.explore-card {
    position: relative;
    aspect-ratio: 4 / 5;
    background: var(--surface-media);
    border: var(--border-strong-width) solid var(--border-strong);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--duration-press), box-shadow var(--duration-press);
}
.explore-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-hard);
}
.explore-card:active { transform: none; box-shadow: none; }
.explore-card.is-active { box-shadow: var(--shadow-hard-sm); transform: translate(-2px, -2px); }

.explore-card-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--sand-250);
}
.explore-card-img.no-image { background-color: var(--sand-250); }
/* Protección inferior para el texto sobre la imagen (gradiente permitido del DS) */
.explore-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--protection-bottom);
    pointer-events: none;
}

.explore-card-index {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 2;
    font-family: var(--font-mono);
    font-size: var(--meta-s-size);
    letter-spacing: var(--meta-s-track);
    color: var(--white);
    opacity: var(--opacity-subtle);
}
.explore-card-price {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 2;
    background: var(--neutral-500);
    color: var(--neutral-100);
    font-family: var(--font-mono);
    font-size: var(--meta-s-size);
    letter-spacing: 0.08em;
    padding: var(--space-1) var(--space-2);
}
.explore-card-rec {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    transform: translateY(calc(100% + var(--space-2)));
    z-index: 2;
    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);
}

.explore-card-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.explore-card-styles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}
.tag-mini {
    display: inline-flex;
    background: var(--surface-card);
    color: var(--neutral-500);
    font-family: var(--font-mono);
    font-size: var(--font-size-min);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 6px;
}
.explore-card-name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 18px;
    line-height: 1.15;
    color: var(--white);
}
.explore-card-meta {
    font-family: var(--font-mono);
    font-size: var(--meta-s-size);
    letter-spacing: var(--meta-s-track);
    text-transform: uppercase;
    color: var(--neutral-200);
}

/* Estado vacío */
.explore-list-empty { border: var(--border-hairline) solid var(--border-subtle); }

/* ============================================================
   PIN BAUHAUS (OverlayView de Google Maps — clases usadas por JS)
   ============================================================ */
.bauhaus-pin-wrap {
    position: absolute;
    /* La punta del triángulo (6px bajo la caja) cae exactamente en el lat/lng. */
    transform: translate(-50%, calc(-100% - 6px));
    cursor: pointer;
    pointer-events: auto;
    z-index: 20;
    will-change: transform;
}
.bauhaus-pin {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: var(--surface-card);
    color: var(--neutral-500);
    border: var(--border-strong-width) solid var(--border-strong);
    padding: 5px 11px;
    font-family: var(--font-mono);
    font-weight: var(--weight-bold);
    font-size: var(--meta-m-size);
    letter-spacing: 0.04em;
    white-space: nowrap;
    transition: transform var(--duration-press), background var(--duration-press),
                color var(--duration-press), box-shadow var(--duration-press);
    user-select: none;
}
/* Pico del pin */
.bauhaus-pin::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 8px solid var(--border-strong);
}
.bauhaus-pin-wrap:hover { z-index: 21; }
.bauhaus-pin-wrap:hover .bauhaus-pin,
.bauhaus-pin-wrap.is-active .bauhaus-pin {
    background: var(--yellow-300);
    color: var(--neutral-500);
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-hard-sm);
}
.bauhaus-pin-wrap.is-recommended .bauhaus-pin {
    background: var(--red-300);
    color: var(--white);
}
/* Pin de estudio: azul, con ícono */
.bauhaus-pin-wrap.is-studio { z-index: 18; }
.bauhaus-pin.bauhaus-pin-studio {
    background: var(--blue-400);
    color: var(--white);
    text-transform: uppercase;
    font-size: 11px;
    padding: 4px 10px;
}
.bauhaus-pin .pin-ico { width: 12px; height: 12px; flex: none; }
.bauhaus-pin-wrap.is-studio:hover { z-index: 22; }
.bauhaus-pin-wrap.is-studio:hover .bauhaus-pin {
    background: var(--yellow-300);
    color: var(--neutral-500);
}

/* ============================================================
   MODAL DE ARTISTA
   ============================================================ */
.explore-modal-backdrop { z-index: 1000; }
.explore-modal {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--surface-card);
    border: var(--border-strong-width) solid var(--border-strong);
    animation: om-fade-in var(--duration-fade) var(--ease-standard);
}
.explore-modal-close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 3;
}
.modal-cover {
    height: 220px;
    background-color: var(--surface-media);
    background-size: cover;
    background-position: center;
    border-bottom: var(--border-strong-width) solid var(--border-strong);
}
.modal-body {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.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: var(--space-1) var(--space-2);
}
.modal-source-badge.is-studio { background: var(--info-bg); color: var(--info-fg); }
.modal-source-badge.is-independent { background: var(--warning-bg); color: var(--warning-fg); }
.modal-styles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}
.modal-styles .tag-mini {
    background: var(--neutral-100);
    border: var(--border-hairline) solid var(--border-subtle);
}
.modal-name {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--h2-size);
    line-height: var(--h2-lh);
    color: var(--text-heading);
}
.modal-meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.modal-meta-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--body-s-size);
    color: var(--text-body);
}
.modal-meta-row [data-wo-icon] { color: var(--text-muted); }
.modal-bio {
    font-size: var(--body-s-size);
    line-height: var(--body-s-lh);
    color: var(--text-body);
    border-left: var(--border-rule-width) solid var(--border-strong);
    padding-left: var(--space-4);
}
.modal-price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    border-top: var(--border-hairline) solid var(--border-subtle);
    padding-top: var(--space-4);
}
.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(--text-muted);
}
.modal-price-row .price-value {
    font-family: var(--font-display);
    font-size: var(--h3-size);
    color: var(--text-heading);
}
.modal-cta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}
.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(--text-link);
    padding: var(--space-2) 0;
}
.modal-cta-directions:hover { color: var(--text-link-hover); }

/* ---------- Loading ---------- */
.explore-loading { z-index: 1200; }
.explore-loading-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    background: var(--surface-card);
    border: var(--border-strong-width) solid var(--border-strong);
    padding: var(--space-8);
    color: var(--text-muted);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .explore-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .filter-select-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

    .explore-hero { padding-top: var(--space-6); }
    .explore-title { font-size: var(--h2-size); }

    .explore-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
    .filter-select-group { grid-template-columns: 1fr; }

    .explore-toolbar {
        flex-wrap: wrap;
    }
    .explore-tabs { display: inline-flex; }

    /* En móvil las tabs conmutan entre mapa y lista */
    .explore-main[data-view="map"] .explore-list-panel { display: none; }
    .explore-main[data-view="list"] .explore-map-panel { display: none; }
    .explore-map { height: clamp(360px, 62vh, 560px); }

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

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

@media (max-width: 480px) {
    .explore-list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .explore-tag .dot { animation: none; }
    .explore-card,
    .filter-pill,
    .explore-filters-toggle,
    .bauhaus-pin { transition: none; }
}