/* ════════════════════════════════════════════════════════════════
 * MAS · Mapa de lugares — mapa mundial real + wheel-picker.
 * Paleta [CLIENTE]: blanco, navy, rojo de acento.
 * ════════════════════════════════════════════════════════════════ */

.mas-map {
    max-width: var(--content-max, 1280px);
    margin: 0 auto;
    /* abajo lo justo: la sección cierra a la altura del último lugar */
    padding: var(--space-20, 80px) var(--space-6, 24px) var(--space-8, 32px);
}

.mas-map__head {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--space-10, 40px);
    align-items: end;
    margin-bottom: var(--space-12, 48px);
}
.mas-map__kicker {
    font-family: var(--font-sans);
    font-size: var(--fs-xs, 11px);
    font-weight: var(--fw-semibold, 600);
    letter-spacing: var(--tr-wider, 0.15em);
    text-transform: uppercase;
    color: var(--color-accent, #B31942);
    margin: 0 0 var(--space-4, 16px);
}
.mas-map__heading {
    font-family: var(--font-serif);
    font-size: clamp(var(--fs-3xl, 36px), 4.5vw, var(--fs-5xl, 64px));
    line-height: var(--lh-tight, 1.05);
    margin: 0;
    color: var(--color-text, #1A1A1A);
}
.mas-map__heading em { font-style: italic; color: var(--color-blue, #0A3161); }
.mas-map__lead {
    font-family: var(--font-serif);
    font-size: var(--fs-lg, 18px);
    line-height: var(--lh-relaxed, 1.55);
    color: var(--color-text-secondary, #555);
    margin: 0;
}

/* ─── escenario: lista-rueda (scrollea) + mapa FIJO protagonista ─── */
.mas-map__stage {
    display: grid;
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); /* el mapa manda */
    gap: var(--space-12, 48px);
    align-items: center; /* sección COMPACTA: ruleta y mapa centrados, misma altura */
}

/* La lista es una RULETA vertical infinita: contenedor de altura fija, items
   absolutos posicionados por view.js (translateY + rotateX). Gira sola en bucle;
   no necesita scroll largo (de ahí que la sección sea compacta). */
.mas-map__list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    height: 560px;
    overflow: hidden;
    cursor: grab;
    /* desvanecido arriba/abajo: los lugares "salen de la nada" */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
}
.mas-map__list.is-grabbing { cursor: grabbing; }
.mas-map__list > li {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: 0;
    will-change: transform, opacity;
}
}
.mas-map__item {
    display: grid;
    grid-template-columns: 36px 1fr;
    grid-template-areas: "idx name" "idx role" "idx meta";
    column-gap: var(--space-4, 16px);
    row-gap: 2px;
    padding: var(--space-6, 24px) var(--space-3, 12px);
    border-bottom: 0.5px solid var(--color-border, #E3E6EA);
    text-decoration: none;
    color: inherit;
    opacity: 0.45;
    /* la rueda de perfil la dibuja view.js (perspective + rotateX + scale) */
    transform-origin: center center;
    will-change: transform, opacity;
    transition: background var(--t-fast, 150ms);
}
.mas-map__item.is-active {
    opacity: 1;
    background: var(--color-bg-alt, #F4F6F9);
}
.mas-map__item-idx {
    grid-area: idx;
    font-family: var(--font-sans);
    font-size: var(--fs-xs, 11px);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted, #6B6B6B);
    padding-top: 5px;
}
.mas-map__item.is-active .mas-map__item-idx { color: var(--color-accent, #B31942); }
.mas-map__item-name {
    grid-area: name;
    font-family: var(--font-serif);
    font-size: var(--fs-xl, 22px);
    line-height: var(--lh-snug, 1.2);
    color: var(--color-text, #1A1A1A);
}
.mas-map__item-role {
    grid-area: role;
    font-family: var(--font-sans);
    font-size: var(--fs-sm, 13px);
    line-height: var(--lh-relaxed, 1.5);
    color: var(--color-text-secondary, #555);
}
.mas-map__item-meta {
    grid-area: meta;
    font-family: var(--font-sans);
    font-size: var(--fs-2xs, 10px);
    letter-spacing: var(--tr-wide, 0.05em);
    text-transform: uppercase;
    color: var(--color-text-muted, #6B6B6B);
    margin-top: 2px;
}

/* ─── mapa protagonista: estático en su columna (la sección es compacta;
   la ruleta gira sola, no hace falta pin) ─── */
.mas-map__map-col { position: relative; }
.mas-map__map-frame {
    border: none;
    background: var(--color-bg-navy, #0A3161);
    padding: var(--space-10, 40px);
    box-shadow: 0 24px 60px rgba(10, 49, 97, 0.25);
}
.mas-map__map-label {
    font-family: var(--font-sans);
    font-size: var(--fs-2xs, 10px);
    letter-spacing: var(--tr-wider, 0.15em);
    text-transform: uppercase;
    color: var(--color-warm, #A9C4E4);
    margin: 0 0 var(--space-5, 20px);
}
.mas-map__map svg { width: 100%; height: auto; display: block; }
.mas-map__land {
    fill: #28527F;             /* tierra en navy claro sobre el panel oscuro */
    stroke: rgba(255, 255, 255, 0.14);
    stroke-width: 0.4;
}
.mas-map__dot {
    fill: var(--color-warm, #A9C4E4);
    opacity: 0.55;
    transition: opacity 0.3s ease, r 0.3s ease;
}
.mas-map__dot.is-active { opacity: 0; } /* lo cubre el marcador */

.mas-map__marker {
    transition: transform 0.7s var(--ease-quiet, cubic-bezier(0.16, 1, 0.3, 1));
    pointer-events: none;
}
.mas-map__marker-core { fill: #E8597B; } /* rojo aclarado: legible sobre navy */
.mas-map__marker-ring {
    fill: none;
    stroke: #E8597B;
    stroke-width: 1.4;
    opacity: 0.7;
    animation: mas-map-pulse 2.4s ease-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}
@keyframes mas-map-pulse {
    0%   { transform: scale(0.45); opacity: 0.7; }
    70%  { transform: scale(1.15); opacity: 0; }
    100% { transform: scale(1.15); opacity: 0; }
}

.mas-map__readout {
    display: flex;
    align-items: baseline;
    gap: var(--space-4, 16px);
    margin: var(--space-6, 24px) 0 0;
    padding-top: var(--space-5, 20px);
    border-top: 0.5px solid rgba(255, 255, 255, 0.16);
}
.mas-map__ro-name {
    font-family: var(--font-serif);
    font-size: var(--fs-2xl, 28px);
    font-style: italic;
    color: #FFFFFF;
    white-space: nowrap;
}
.mas-map__ro-detail {
    font-family: var(--font-sans);
    font-size: var(--fs-xs, 11px);
    color: var(--color-warm, #A9C4E4);
    letter-spacing: var(--tr-wide, 0.05em);
}

@media (prefers-reduced-motion: reduce) {
    .mas-map__marker { transition: none; }
    .mas-map__marker-ring { animation: none; opacity: 0.45; }
    .mas-map__item { transition: none; }
}

/* ─── responsive ─── */
@media (max-width: 900px) {
    .mas-map__head { grid-template-columns: 1fr; gap: var(--space-5, 20px); }
    .mas-map__stage { grid-template-columns: 1fr; }
    .mas-map__map-col { position: static; order: -1; }
    .mas-map__readout { flex-wrap: wrap; gap: var(--space-2, 8px); }
}