@layer vsg-universal {
/* ============================================================= */
/* Ítems 10/12: estados vacío y error reutilizables. Antes cada     */
/* sección tenía su propio texto plano ("No hay historias...",      */
/* "No se pudo cargar...") con el mismo tratamiento visual, así que  */
/* un fallo real de red se veía idéntico a "todavía no hay nada acá" */
/* -- nada le decía al usuario si tenía que esperar, reintentar o    */
/* simplemente no había contenido. Uso: <div class="vsg-empty-state"> */
/* <span class="vsg-state-icon">🗒️</span><strong>Título</strong>    */
/* <span>Detalle</span></div> -- cambiar la clase a vsg-error-state  */
/* para el caso de fallo (mismo marcado, tono rojo).                 */
/* ============================================================= */
.vsg-empty-state, .vsg-error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-4);
    text-align: center;
    border-radius: var(--radius-lg);
    border: 1px dashed var(--border-color);
    color: var(--text-muted);
}
.vsg-empty-state .vsg-state-icon, .vsg-error-state .vsg-state-icon { font-size: 2rem; line-height: 1; opacity: .6; }
.vsg-empty-state strong, .vsg-error-state strong { color: var(--text-primary); font-size: var(--fs-md); }
.vsg-empty-state span:not(.vsg-state-icon), .vsg-error-state span:not(.vsg-state-icon) { font-size: var(--fs-sm); max-width: 380px; }
.vsg-error-state { border-color: rgba(239, 68, 68, .35); border-style: solid; background: rgba(239, 68, 68, .06); }
.vsg-error-state .vsg-state-icon { color: #f87171; opacity: 1; }
.vsg-error-state strong { color: #fca5a5; }
.vsg-error-state .vsg-state-retry { margin-top: var(--space-2); }

/* Ítem 13: ver window.vsgFloatGain en vsg-ui-core.js. */
.vsg-float-gain {
    position: fixed;
    z-index: 9999;
    transform: translate(-50%, 0);
    color: #38bdf8;
    font-size: var(--fs-md);
    font-weight: 800;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .5);
    pointer-events: none;
    animation: vsgFloatGainRise 1.1s ease-out forwards;
}
@keyframes vsgFloatGainRise {
    0% { opacity: 0; transform: translate(-50%, 4px) scale(.85); }
    18% { opacity: 1; transform: translate(-50%, -6px) scale(1.08); }
    70% { opacity: 1; transform: translate(-50%, -30px) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -46px) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .vsg-float-gain { animation: none; opacity: 0; }
}


/* El sistema anterior de "Esta semana en WoW" (franja de color +
   grilla de escritorio, y el modo de posicionamiento libre por
   coordenadas que vivía más abajo) se elimina por completo -- motor
   nuevo en public/js/weekly-banner.js + public/css/weekly-banner.css,
   sin posicionamiento manual y con versiones de PC/móvil independientes. */

.desktop-only-widget { margin-top: 20px; }

.msn-notification { position: fixed; bottom: -100px; right: 20px; width: 300px; background: linear-gradient(180deg, #e2eeff 0%, #c4d8fc 100%); border: 1px solid #739ce5; border-radius: 8px 8px 0 0; box-shadow: 2px 2px 10px rgba(0,0,0,0.5); z-index: 9999; transition: bottom 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); font-family: 'Tahoma', sans-serif; color: #000; cursor: pointer; display: flex; flex-direction: column; overflow: hidden; }
.msn-notification.show { bottom: 0; }
.msn-header { background: linear-gradient(90deg, #4b80e8 0%, #76a0fb 100%); color: #fff; font-size: 0.8rem; font-weight: bold; padding: 4px 8px; display: flex; justify-content: space-between; }
.msn-body { padding: 10px; display: flex; align-items: center; gap: 10px; }
.msn-icon { width: 40px; height: 40px; }
.msn-text { font-size: 0.85rem; line-height: 1.2; text-align: left; }
.msn-text strong { color: #003399; }
.msn-close { background: transparent; border: none; color: #fff; cursor: pointer; font-weight: bold; font-size: 1.2rem; line-height: 1; padding: 0; }

@media (max-width: 820px) {
    .desktop-only-widget { display: none; }
}

/* Aviso de cumpleaños: componente autónomo, no hereda ni usa el modal global. */
.vsg-birthday-modal {
    position: fixed;
    z-index: 25050;
    inset: 0;
    display: grid;
    place-items: center;
    padding: clamp(16px, 3vw, 32px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}
.vsg-birthday-modal.is-visible { opacity: 1; pointer-events: auto; }
.vsg-birthday-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, .78);
    
}
.vsg-birthday-modal__panel {
    position: relative;
    width: min(100%, 470px);
    padding: clamp(24px, 4vw, 38px);
    overflow: hidden;
    color: #edf7ff;
    border: 1px solid rgba(74, 214, 255, .38);
    border-radius: 24px;
    background:
        radial-gradient(circle at 88% 6%, rgba(196, 102, 255, .22), transparent 38%),
        radial-gradient(circle at 0% 100%, rgba(34, 211, 238, .16), transparent 40%),
        linear-gradient(145deg, #101d3a 0%, #0a1127 56%, #11102b 100%);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255,255,255,.09);
    transform: translateY(14px) scale(.985);
    transition: transform .22s cubic-bezier(.22, .8, .25, 1);
}
.vsg-birthday-modal.is-visible .vsg-birthday-modal__panel { transform: translateY(0) scale(1); }
.vsg-birthday-modal__panel::after {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    right: -72px;
    bottom: -96px;
    border: 1px solid rgba(103, 232, 249, .22);
    border-radius: 50%;
    box-shadow: 0 0 0 24px rgba(103, 232, 249, .035), 0 0 0 50px rgba(196, 102, 255, .025);
    pointer-events: none;
}
.vsg-birthday-modal__close {
    position: absolute;
    z-index: 1;
    top: 14px;
    right: 14px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    color: #dcecff;
    border: 1px solid rgba(163, 205, 255, .28);
    border-radius: 10px;
    background: rgba(6, 16, 41, .55);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}
.vsg-birthday-modal__brand { display: inline-flex; align-items: center; gap: 9px; color: #8bdcff; font-size: 10px; font-weight: 900; letter-spacing: .15em; }
.vsg-birthday-modal__brand img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px rgba(81, 215, 255, .15); }
.vsg-birthday-modal__eyebrow { margin: 24px 0 7px; color: #f7a7d8; font-size: 11px; font-weight: 900; letter-spacing: .13em; }
.vsg-birthday-modal h2 { max-width: 340px; margin: 0; color: #fff; font-size: clamp(25px, 5vw, 34px); line-height: 1.05; letter-spacing: -.04em; }
.vsg-birthday-modal__lead { max-width: 390px; margin: 13px 0 17px; color: #b9c8df; font-size: 14px; line-height: 1.55; }
.vsg-birthday-modal__privacy { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 18px; padding: 11px 12px; color: #a9ebd2; border: 1px solid rgba(52, 211, 153, .22); border-radius: 12px; background: rgba(6, 78, 59, .18); font-size: 12px; line-height: 1.35; }
.vsg-birthday-modal__privacy span { display: grid; place-items: center; flex: 0 0 auto; width: 16px; height: 16px; color: #052e24; border-radius: 50%; background: #61e9b4; font-size: 11px; font-weight: 900; }
.vsg-birthday-modal__field { position: relative; z-index: 1; display: grid; gap: 7px; max-width: 280px; color: #cae2f8; font-size: 12px; font-weight: 800; }
.vsg-birthday-modal__field input { min-height: 44px; padding: 0 12px; color-scheme: dark; color: #fff; border: 1px solid rgba(121, 190, 255, .32); border-radius: 11px; outline: none; background: rgba(2, 9, 28, .68); font: inherit; }
.vsg-birthday-modal__field input:focus { border-color: #42c8ff; box-shadow: 0 0 0 3px rgba(66, 200, 255, .15); }
.vsg-birthday-modal__actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 24px; }
.vsg-birthday-modal__later, .vsg-birthday-modal__save { min-height: 42px; padding: 0 16px; border-radius: 10px; font-size: 13px; font-weight: 850; cursor: pointer; }
.vsg-birthday-modal__later { color: #b8cae3; border: 1px solid rgba(166, 199, 235, .22); background: transparent; }
.vsg-birthday-modal__save { color: #fff; border: 1px solid rgba(104, 230, 255, .48); background: linear-gradient(135deg, #0ea5e9, #2563eb); box-shadow: 0 9px 22px rgba(14, 165, 233, .24); }
.vsg-birthday-modal__save:disabled { cursor: wait; opacity: .65; }
@media (max-width: 480px) {
    .vsg-birthday-modal { align-items: end; padding: 12px; }
    .vsg-birthday-modal__panel { border-radius: 21px; }
    .vsg-birthday-modal__actions { justify-content: space-between; }
}

/* ============================================================= */
/* Menú de selección con logo (mobile-first): reemplaza filas de   */
/* botones/pestañas que no caben en móvil (roster, guías, reglas). */
/* Oculto por defecto (PC); mobile-app-foundation.css lo muestra   */
/* dentro de su @media(max-width:820px). Comportamiento en         */
/* vsg-ui-core.js. Ver ese archivo para el contrato de marcado.    */
/* ============================================================= */
.vsg-menu { position: relative; display: none; }
/* vsg-ui-core.js (vsgSyncTabOverflow) agrega esta clase en CUALQUIER ancho
   de pantalla cuando la fila de pestañas real no cabe y su scroll horizontal
   quedaría invisible (scrollbar-width:none). En escritorio se muestra como
   un control compacto y propio, no a ancho completo como en móvil. */
.vsg-menu.vsg-tabs-overflow { display: block; margin-top: 8px; }
.vsg-menu.vsg-tabs-overflow .vsg-menu-trigger { width: auto; min-width: 220px; max-width: 320px; }
@media (max-width: 820px) {
    .vsg-menu.vsg-tabs-overflow .vsg-menu-trigger { width: 100%; max-width: none; }
}
/* La fila de pestañas real se reemplaza por el desplegable (no coexisten).
   El ocultamiento en sí NO vive acá: vsg-ui-core.js (vsgSyncTabOverflow) lo
   aplica como !important directo sobre el elemento, porque una clase en esta
   hoja (capa vsg-universal) puede perder contra reglas !important de
   design-system.css/mobile.css según cómo se resuelvan las capas -- un
   !important puesto por JS en el propio elemento gana siempre, sin
   depender de eso. */
.vsg-menu-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 36px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    background: rgba(18, 20, 28, .65);
    color: #f1f5f9;
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}
.vsg-menu-trigger:hover { border-color: rgba(56, 189, 248, .35); }
.vsg-menu-trigger-logo { width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; object-fit: cover; }
.vsg-menu-trigger-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vsg-menu-caret { flex: 0 0 auto; font-size: .65rem; color: #64748b; transition: transform .15s ease; }
.vsg-menu-trigger[aria-expanded="true"] .vsg-menu-caret { transform: rotate(180deg); }
.vsg-menu-list {
    position: absolute;
    z-index: 60;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 60vh;
    overflow-y: auto;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    background: #0d1117;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
}
/* vsg-ui-core.js (vsgMenuPortal) cuelga la lista de <body> la primera vez
   que se abre, para que ningún overflow:hidden/auto de un ancestro (tarjetas,
   .mg-wrapper, etc.) la recorte -- antes se veía "abierta adentro" del
   contenedor en vez de flotar por encima de todo. top/left/width los pone el
   JS en cada apertura (calculados desde el trigger con getBoundingClientRect,
   coordenadas de viewport -- por eso position:fixed y no absolute). */
.vsg-menu-list.vsg-menu-list-portal {
    position: fixed;
    z-index: 9999;
    right: auto;
}
/* Ítem 20: presentación como bottom sheet en móvil (vsgMenuPositionList en
   vsg-ui-core.js agrega esta clase solo cuando html.vsg-mobile). */
@keyframes vsgMenuSheetIn {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
.vsg-menu-list.vsg-menu-sheet {
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0;
    width: 100% !important;
    max-height: 72vh !important;
    border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0;
    padding-top: 14px;
    box-shadow: 0 -18px 44px rgba(0, 0, 0, .55);
    animation: vsgMenuSheetIn .22s cubic-bezier(.22, .8, .25, 1);
}
.vsg-menu-list.vsg-menu-sheet::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    width: 36px;
    height: 4px;
    border-radius: var(--radius-pill, 999px);
    background: rgba(255, 255, 255, .22);
    transform: translateX(-50%);
}
.vsg-menu-list.vsg-menu-sheet .vsg-menu-option { min-height: 46px; }
.vsg-menu-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(2, 6, 20, .55);
    
    pointer-events: none;
    transition: opacity .18s ease;
}
.vsg-menu-sheet-backdrop.is-visible { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
    .vsg-menu-list.vsg-menu-sheet { animation: none; }
}
.vsg-menu-option {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #cbd5e1;
    font: inherit;
    font-size: .78rem;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
}
.vsg-menu-option:hover { background: rgba(255, 255, 255, .06); }
.vsg-menu-option.active { background: rgba(56, 189, 248, .16); color: #38bdf8; }
.vsg-menu-option-logo { width: 18px; height: 18px; flex: 0 0 18px; border-radius: 50%; object-fit: cover; }
.vsg-menu-option.admin-only::after {
    content: "Admin";
    margin-left: auto;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(248, 113, 113, .16);
    color: #fca5a5;
    font-size: .56rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Ítem 18: unificación visual de las 3 cabeceras que se declararon
   independientes de .universal-top-container (Guild, Mi Cuenta, Noticias --
   ver comentarios en cada .css explicando por qué). No se tocó su HTML/JS
   (alto riesgo, cada una tiene su propio menú móvil y comportamiento ya
   probado); esto solo nivela el ritmo visual (padding y radio) usando la
   misma escala de tokens que el resto del sitio. Deliberadamente NO fija
   background/border/box-shadow acá: cada sección conserva su identidad
   (Noticias tiene video de fondo, Guild un degradé propio, etc.) -- unificar
   eso sí requeriría la reescritura de HTML que se descartó por riesgo.
   Layer vsg-universal siempre gana sobre las reglas normales de
   vsg-sections, así que estos valores reemplazan a los de cada .css sin
   necesitar !important. */
.vsg-hero-header {
    padding: var(--space-5) var(--space-6);
    border-radius: var(--radius-lg);
}


/* Ítem 30: tour guiado (ver window.vsgStartTour en vsg-ui-core.js). El
   "agujero" de luz se logra con un box-shadow enorme sobre un recuadro del
   tamaño del elemento resaltado -- no bloquea el click al elemento real
   (pointer-events:none), así que el usuario puede interactuar con lo que
   se le está señalando sin que el tour se interponga. */
#vsgTourOverlay {
    position: fixed;
    z-index: 20000;
    border-radius: 10px;
    border: 2px solid rgba(56, 189, 248, .75);
    box-shadow: 0 0 0 9999px rgba(2, 6, 20, .78), 0 0 24px rgba(56, 189, 248, .35);
    pointer-events: none;
    transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
}
.vsg-tour-card {
    position: fixed;
    z-index: 20001;
    width: 300px;
    max-width: calc(100vw - 28px);
    padding: var(--space-4);
    border: 1px solid rgba(56, 189, 248, .35);
    border-radius: var(--radius-md);
    background: #0d1117;
    box-shadow: var(--shadow-3);
    transition: top .25s ease, left .25s ease;
}
.vsg-tour-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.vsg-tour-step-count { color: #7dd3fc; font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.vsg-tour-skip { border: 1px solid rgba(148,163,184,.28); background: rgba(255,255,255,.04); color: var(--text-muted); font-size: var(--fs-xs); font-weight: 700; padding: 5px 12px; border-radius: var(--radius-pill); cursor: pointer; text-decoration: none; transition: opacity .15s ease, transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }
.vsg-tour-skip:hover { border-color: rgba(148,163,184,.5); background: rgba(255,255,255,.09); color: var(--text-primary); }
.vsg-tour-title { display: block; margin-bottom: 4px; color: var(--text-primary); font-size: var(--fs-md); }
.vsg-tour-text { margin: 0 0 var(--space-3); color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.5; }
.vsg-tour-card-actions { display: flex; justify-content: flex-end; }
.vsg-tour-card-actions .vsg-tour-next { padding: 7px 16px; font-size: var(--fs-sm); }


/* Carrusel de tarjetas reutilizable (ver window.openVsgCarousel en
   vsg-ui-core.js). Vive dentro del modal genérico del sitio. Cada tarjeta
   trae su propio color de acento (--vsg-carousel-accent, seteado inline por
   card.accent) que tiñe el badge del ícono, el kicker, el brillo superior,
   la barra de progreso y el punto activo -- así cada tema se distingue de
   un vistazo, no solo por el texto. */
.vsg-carousel { display: flex; flex-direction: column; gap: var(--space-4); width: min(100%, 680px); }
.vsg-carousel-progress { height: 4px; border-radius: var(--radius-pill); background: rgba(255,255,255,.08); overflow: hidden; }
.vsg-carousel-progress-fill { height: 100%; border-radius: var(--radius-pill); background: var(--primary-color); transition: width .3s ease, background .3s ease; }
.vsg-carousel-viewport { overflow: hidden; border-radius: var(--radius-lg); }
.vsg-carousel-track { display: flex; align-items: stretch; transition: transform .32s cubic-bezier(.22,.8,.25,1); }
.vsg-carousel-slide {
    position: relative;
    flex: 0 0 100%;
    box-sizing: border-box;
    padding: var(--space-8) var(--space-5) var(--space-6);
    text-align: center;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: var(--radius-lg);
    /* La imagen de fondo (card.bg, una de img/fontu/fondoN.webp) es el
       protagonista visual de la tarjeta. Va en "contain" a propósito: son
       artes tipo marco/plantilla con elementos únicos en las esquinas
       (incluido el logo de la guild abajo a la derecha) -- con "cover" se
       recortaban según la altura de cada tarjeta y ese logo podía quedar
       fuera de cuadro. Con "contain" siempre se ve la imagen completa; el
       velo oscuro (mucho más liviano que antes) solo sirve de apoyo
       extra de contraste; el trabajo real de legibilidad lo hace el panel
       semitransparente detrás del texto (ver .vsg-carousel-slide-text). */
    background-image:
        radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--vsg-carousel-accent, #38bdf8) 10%, transparent) 0%, transparent 55%),
        linear-gradient(180deg, rgba(4,7,14,.5) 0%, rgba(4,7,14,.18) 30%, rgba(4,7,14,.2) 65%, rgba(4,7,14,.58) 100%),
        var(--vsg-carousel-slide-bg, none);
    background-size: auto, auto, contain;
    background-position: center, center, center;
    background-repeat: no-repeat;
    overflow: hidden;
}
.vsg-carousel-slide::before {
    content: "";
    position: absolute;
    top: 0; left: 12%; right: 12%;
    height: 3px;
    border-radius: 0 0 var(--radius-pill) var(--radius-pill);
    background: var(--vsg-carousel-accent, #38bdf8);
    box-shadow: 0 0 16px 1px var(--vsg-carousel-accent, #38bdf8);
}
.vsg-carousel-slide-icon {
    display: grid;
    place-items: center;
    width: 80px;
    height: 80px;
    margin-bottom: var(--space-3);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--vsg-carousel-accent, #38bdf8) 45%, #0d1117), #0d1117 78%);
    border: 1px solid color-mix(in srgb, var(--vsg-carousel-accent, #38bdf8) 55%, transparent);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--vsg-carousel-accent, #38bdf8) 30%, transparent);
}
.vsg-carousel-slide-icon span { font-size: 2.4rem; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.vsg-carousel-slide-icon img { width: 66px; height: 66px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
/* Panel semitransparente detrás de kicker+título+cuerpo: el text-shadow
   solo no alcanzaba contraste confiable sobre las zonas claras de las
   imágenes de fondo (cielo/nubes pastel). Esta "tarjeta de vidrio" oscura
   detrás del texto garantiza legibilidad sin importar qué haya debajo. */
.vsg-carousel-slide-text {
    width: 100%;
    max-width: 100%;
    background: rgba(6,10,18,.58);
    
    padding: var(--space-4) var(--space-4);
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-break: break-word;
}
.vsg-carousel-kicker { display: block; color: var(--vsg-carousel-accent, var(--primary-color)); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--space-2); }
.vsg-carousel-slide-title { margin: 0 0 var(--space-3); color: var(--text-primary); font-size: var(--fs-xl); text-shadow: 0 2px 10px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.55); text-wrap: balance; }
.vsg-carousel-slide-body { color: var(--text-muted); font-size: var(--fs-base); line-height: 1.6; text-align: left; width: 100%; max-width: 100%; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.vsg-carousel-slide-body p { margin: 0 0 var(--space-2); }
.vsg-carousel-slide-body p:last-child { margin-bottom: 0; }
.vsg-carousel-slide-body ul { margin: 0; padding-left: 1.15em; }
.vsg-carousel-slide-body li { margin-bottom: var(--space-1); }
.vsg-carousel-slide-body strong { color: var(--text-primary); }
.vsg-carousel-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.vsg-carousel-prev, .vsg-carousel-next {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(148,163,184,.3);
    border-radius: 50%;
    background: rgba(255,255,255,.04);
    color: var(--text-primary);
    font-size: 1.1rem;
    cursor: pointer;
    transition: transform .15s ease;
}
.vsg-carousel-prev:hover, .vsg-carousel-next:hover { transform: translateY(-1px); }
.vsg-carousel-next { width: auto; min-width: 38px; padding: 0 16px; border: none; border-radius: var(--radius-pill); color: #04121f; font-weight: 800; font-size: var(--fs-sm); }
.vsg-carousel-prev:disabled { opacity: .3; cursor: default; }
.vsg-carousel-dots { display: flex; gap: 7px; }
.vsg-carousel-dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: rgba(148,163,184,.3); cursor: pointer; transition: opacity .2s ease, transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; }
.vsg-carousel-dot.is-active { width: 22px; border-radius: 999px; }

/* Tarjeta de liderazgo */
.vsg-carousel-leaders-stage { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: var(--space-3); margin-top: var(--space-3); padding-top: 20px; }
.vsg-carousel-leader-render {
    position: relative;
    flex: 0 0 auto;
    width: 230px;
    height: 250px;
    display: none;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
}
.vsg-carousel-leader-render::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: 92%;
    height: 60%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--vsg-carousel-accent, #818cf8) 45%, transparent) 0%, transparent 72%);
    /* perf-optimized: removed redundant filter blur */
    z-index: 0;
}
/* Los renders de Blizzard traen un margen transparente enorme alrededor del
   personaje (parte del PNG en sí, no algo que controlemos). object-fit:cover
   ya recorta ese margen a los costados, pero el contenedor seguía siendo
   más alto de lo que el personaje necesita -- quedaba "aire" vacío arriba
   aunque técnicamente cubierto. El transform:scale() de más recorta ese
   sobrante vertical (ampliando desde la base, donde están los pies) sin
   volver a estirar el ancho ya resuelto por cover. */
.vsg-carousel-leader-render img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; transform: scale(1.22); transform-origin: center bottom; filter: brightness(1.16) contrast(1.08) saturate(1.05) drop-shadow(0 14px 18px rgba(0,0,0,.55)); }
.vsg-carousel-leader-render.has-render { display: flex; }
.vsg-carousel-leader-render-left img { transform: scale(-1.22, 1.22); transform-origin: center bottom; }
/* Columna que agrupa la etiqueta (avatar+nombre+clase) arriba del render
   grande -- antes esas etiquetas vivían en una lista aparte en el centro,
   amontonadas entre los dos renders sin relación visual con cada uno. */
.vsg-carousel-leader-col { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; }
.vsg-carousel-leader-caption { display: flex; align-items: center; gap: 7px; max-width: 100%; padding: 5px 12px 5px 5px; border-radius: var(--radius-pill); background: rgba(8,12,20,.55); border: 1px solid rgba(255,255,255,.1);  width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid var(--vsg-carousel-accent, var(--primary-color)); }
.vsg-carousel-leader-caption-info { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; overflow: hidden; }
.vsg-carousel-leader-caption-info strong { font-size: var(--fs-xs); color: var(--vsg-leader-color, var(--text-primary)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.vsg-carousel-leader-caption-info span { font-size: var(--fs-2xs); color: var(--text-muted); white-space: nowrap; }
.vsg-carousel-leaders { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; flex: 1 1 auto; align-self: center; }
.vsg-carousel-leader-card { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 108px; }
.vsg-carousel-leader-card img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 2px solid var(--vsg-carousel-accent, var(--primary-color)); }
.vsg-carousel-leader-card strong { font-size: var(--fs-sm); text-align: center; color: var(--vsg-leader-color, var(--text-primary)); }
.vsg-carousel-leader-card span { font-size: var(--fs-2xs); color: var(--text-muted); }
@media (max-width: 620px) {
    .vsg-carousel-leader-render { width: 128px; height: 148px; }
    .vsg-carousel-leader-caption { padding: 4px 9px 4px 4px; gap: 5px; }
    .vsg-carousel-leader-caption img { width: 26px; height: 26px; }
    .vsg-carousel-leader-caption-info strong { font-size: .68rem; max-width: 90px; }
    .vsg-carousel-leader-caption-info span { font-size: .58rem; }
}

/* Tarjeta de rangos: grilla de 2 columnas para que los 11 rangos entren
   completos de un vistazo -- antes era una sola columna con scroll interno
   (max-height + overflow-y), que obligaba a desplazarse para ver los
   últimos rangos. */
/* minmax(0, 1fr) en vez de 1fr a secas: sin el "0" explícito, una columna de
   grid nunca se encoge más allá del ancho natural (sin salto de línea) de su
   contenido -- con .vsg-carousel-rank-row usando white-space:nowrap en sus
   dos spans, eso significa que "3.500 Vanilla IO" empujaba la columna (y la
   fila entera) más ancha que su celda en pantallas angostas, desbordando la
   tarjeta. min-width:0 en la fila y en el nombre es lo que deja que
   overflow+ellipsis realmente entren en acción en vez de quedarse inertes
   (un hijo flex sin min-width:0 nunca se encoge por debajo de su ancho de
   contenido, sin importar overflow:hidden). overflow:hidden en la fila es
   el último respaldo: si el valor igual no entra, se recorta contenido
   DENTRO de la píldora en vez de desbordar visualmente fuera de ella. */
.vsg-carousel-rank-ladder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; }
.vsg-carousel-rank-row { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: var(--radius-sm); background: rgba(255,255,255,.05); font-size: var(--fs-xs); min-width: 0; overflow: hidden; }
.vsg-carousel-rank-row img { width: 22px; height: 22px; object-fit: contain; flex: 0 0 auto; }
.vsg-carousel-rank-row span:first-of-type { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vsg-carousel-rank-row span:last-child { flex: 0 0 auto; color: var(--vsg-carousel-accent, #7dd3fc); font-weight: 800; white-space: nowrap; }
/* "Vanilla " se oculta en el tutorial móvil (ver .vsg-rank-unit-full más
   abajo): en 2 columnas angostas "3.500 Vanilla IO" es demasiado texto --
   "3.500 IO" dice lo mismo en la mitad del espacio. */
.vsg-rank-unit-full { display: inline; }

/* Tarjeta de Puntos y Vanilla IO: imagen de cierre debajo del texto */
.vsg-carousel-points-badge { display: flex; justify-content: center; margin-top: var(--space-3); }
.vsg-carousel-points-badge img { width: min(200px, 48vw); height: auto; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0,0,0,.45)); }

/* Tarjeta de logros: grilla de insignias reales */
.vsg-carousel-badge-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: var(--space-2); }
.vsg-carousel-badge { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: var(--radius-sm); background: rgba(255,255,255,.03); transition: transform .15s ease, background .15s ease; cursor: default; }
.vsg-carousel-badge:hover { transform: translateY(-2px); background: rgba(255,255,255,.06); }
.vsg-carousel-badge img { width: 60px; height: 60px; object-fit: contain; filter: drop-shadow(0 3px 8px rgba(0,0,0,.4)); }
.vsg-carousel-badge span { font-size: .68rem; color: var(--text-muted); text-align: center; line-height: 1.25; }

/* Demo interactiva: publicación de Mundo Vanilla con like real */
.vsg-carousel-demo-post { border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-md); background: rgba(0,0,0,.22); padding: var(--space-3); margin-top: var(--space-2); }
.vsg-carousel-demo-post-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.vsg-carousel-demo-post-head img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.vsg-carousel-demo-post-head strong { font-size: var(--fs-sm); color: var(--text-primary); }
.vsg-carousel-demo-post-head span { display: block; font-size: var(--fs-2xs); color: var(--text-muted); }
.vsg-carousel-demo-post p { margin: 0 0 10px; font-size: var(--fs-sm); color: var(--text-muted); }
.vsg-carousel-demo-post-img { display: block; width: 100%; max-height: 110px; object-fit: cover; border-radius: var(--radius-sm); margin: 0 0 10px; }
.vsg-carousel-demo-post-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.vsg-carousel-demo-like { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid rgba(244,114,182,.35); border-radius: var(--radius-pill); background: transparent; color: #f7a1c8; font-size: var(--fs-xs); font-weight: 800; cursor: pointer; transition: opacity .15s ease, transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }
.vsg-carousel-demo-like:hover { background: rgba(244,114,182,.1); }
.vsg-carousel-demo-like.is-liked { background: rgba(244,114,182,.16); border-color: #f43f7e; color: #f43f7e; }
.vsg-carousel-demo-like .vsg-heart { display: inline-block; transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.vsg-carousel-demo-like.is-liked .vsg-heart { transform: scale(1.3); }
.vsg-carousel-demo-hint { display: block; margin-top: 6px; font-size: var(--fs-2xs); color: var(--text-muted); font-style: italic; }
.vsg-carousel-demo-post-actions .vsg-carousel-demo-hint { margin-top: 0; flex: 1 1 140px; }

/* Demo interactiva: color de acento de perfil en vivo */
.vsg-carousel-demo-profile { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-2); }
.vsg-carousel-demo-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 3px solid #38bdf8; flex: 0 0 auto; transition: border-color .2s ease; }
.vsg-carousel-demo-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.vsg-carousel-demo-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform .15s ease; }
.vsg-carousel-demo-swatch:hover { transform: scale(1.15); }
.vsg-carousel-demo-swatch.is-selected { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
.vsg-carousel-demo-avatar-option { width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 2px solid transparent; background: rgba(255,255,255,.05); cursor: pointer; overflow: hidden; transition: transform .15s ease; }
.vsg-carousel-demo-avatar-option img { width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; }
.vsg-carousel-demo-avatar-option:hover { transform: scale(1.12); }
.vsg-carousel-demo-avatar-option.is-selected { border-color: var(--vsg-carousel-accent, #f472b6); box-shadow: 0 0 0 2px color-mix(in srgb, var(--vsg-carousel-accent, #f472b6) 40%, transparent); }
.vsg-carousel-avatar-upload { margin-top: 2px; }
.vsg-carousel-avatar-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid color-mix(in srgb, var(--vsg-carousel-accent, #f472b6) 55%, transparent);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--vsg-carousel-accent, #f472b6) 12%, transparent);
    color: var(--text-primary);
    font-size: var(--fs-xs);
    font-weight: 800;
    cursor: pointer;
    transition: opacity .15s ease, transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.vsg-carousel-avatar-upload-btn:hover { background: color-mix(in srgb, var(--vsg-carousel-accent, #f472b6) 22%, transparent); transform: translateY(-1px); }
.vsg-carousel-avatar-upload-btn.is-uploading { opacity: .65; cursor: default; pointer-events: none; }

/* Tarjeta "¿Qué podés hacer?": grilla de acciones que navegan de verdad */
.vsg-carousel-action-subtitle { display: block; margin: var(--space-1) 0 var(--space-2); color: var(--text-primary); font-size: var(--fs-sm); font-weight: 800; text-align: left; width: 100%; }
.vsg-carousel-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; width: 100%; margin-top: var(--space-1); }
.vsg-carousel-action-chip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid rgba(148,163,184,.18);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,.03);
    color: var(--text-primary);
    font-size: var(--fs-2xs);
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: opacity .15s ease, transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.vsg-carousel-action-chip:hover { border-color: var(--vsg-carousel-accent, var(--primary-color)); background: color-mix(in srgb, var(--vsg-carousel-accent, var(--primary-color)) 10%, transparent); transform: translateY(-1px); }
.vsg-carousel-action-chip-icon { flex: 0 0 auto; width: 22px; height: 22px; object-fit: contain; margin-top: 1px; }
.vsg-carousel-action-chip-text { display: flex; flex-direction: column; gap: 1px; }
.vsg-carousel-action-chip-desc { font-size: .58rem; font-weight: 500; color: var(--text-muted); line-height: 1.25; }

/* Mini carrusel de videos de mecánicas dentro de la tarjeta de Raids */
.vsg-carousel-video-strip { position: relative; width: min(100%, 320px); margin: var(--space-3) auto 0; border-radius: var(--radius-md); overflow: hidden; background: #05070d; aspect-ratio: 16/9; }
.vsg-carousel-video-strip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; }
.vsg-carousel-video-strip video.is-active { opacity: 1; }
.vsg-carousel-video-strip-dots { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; justify-content: center; gap: 5px; }
.vsg-carousel-video-strip-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.35); transition: opacity .2s ease, transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; }
.vsg-carousel-video-strip-dots span.is-active { background: var(--vsg-carousel-accent, #f97316); width: 16px; border-radius: 999px; }
.vsg-carousel-video-strip-caption { position: absolute; top: 8px; left: 10px; padding: 3px 9px; border-radius: var(--radius-pill); background: rgba(0,0,0,.55); color: #fff; font-size: var(--fs-2xs); font-weight: 700; }

@media (max-width: 620px) {
    .vsg-carousel-slide { padding: var(--space-6) var(--space-3) var(--space-4); min-height: 340px; }
    .vsg-carousel-slide-body { font-size: var(--fs-sm); }
    .vsg-carousel-action-grid { grid-template-columns: 1fr; }
    .vsg-carousel-badge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vsg-carousel-demo-profile { flex-direction: column; }
}


/* Sección de bienvenida: capa 100% independiente (ver window.openVsgCarousel
   en vsg-ui-core.js). A propósito NO usa ninguna clase .modal-* del sitio --
   ese sistema compartido tiene demasiadas reglas de otros flujos (auth,
   confirmaciones, gp-shell) compitiendo por el mismo contenedor. Esta capa
   se agrega al <body> al abrir y se borra del DOM por completo al cerrar:
   existe únicamente mientras el tutorial está abierto. */
.vsg-carousel-section {
    position: fixed;
    inset: 0;
    z-index: 30000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 4vw, 40px);
    box-sizing: border-box;
    opacity: 0;
    transition: opacity .22s ease;
}
.vsg-carousel-section.is-visible { opacity: 1; }
.vsg-carousel-section-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 6, 16, .82);
    
    width: min(760px, 100%);
    max-height: min(88vh, 780px);
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(148,163,184,.18);
    border-radius: var(--radius-lg);
    background: radial-gradient(circle at 50% -10%, rgba(56,189,248,.1), transparent 55%), #0b0f1a;
    box-shadow: var(--shadow-3);
    overflow: hidden;
    transform: translateY(18px) scale(.98);
    transition: transform .26s cubic-bezier(.22,.8,.25,1);
}
.vsg-carousel-section.is-visible .vsg-carousel-section-panel { transform: translateY(0) scale(1); }
.vsg-carousel-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5) 0;
    flex: 0 0 auto;
}
.vsg-carousel-section-heading { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vsg-carousel-section-logo { flex: 0 0 auto; width: 30px; height: 30px; object-fit: contain; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
.vsg-carousel-section-head strong { color: var(--text-primary); font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vsg-carousel-section-close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 8px;
    background: rgba(255,255,255,.06);
    color: var(--text-primary);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}
.vsg-carousel-section-close:hover { background: rgba(255,255,255,.12); }
.vsg-carousel-section .vsg-carousel {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    padding: var(--space-4) var(--space-5) var(--space-5);
    box-sizing: border-box;
    overflow-y: auto;
}
@media (max-width: 620px) {
    .vsg-carousel-section-head { padding: var(--space-3) var(--space-3) 0; }
    .vsg-carousel-section .vsg-carousel { padding: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) {
    .vsg-carousel-section, .vsg-carousel-section-panel { transition: none; }
}
/* Bloquea el scroll de la página real detrás de la sección -- misma clase
   de protección que .vsg-modal-open (utils.js) ya usa para el modal
   genérico, incluido touch-action:none (antes solo tenía overflow:hidden,
   así que un gesto de swipe en el fondo todavía podía moverlo un poco en
   móvil). Se mantiene como clase propia a propósito, no fusionada con
   .vsg-modal-open: el carrusel/tour ya evita deliberadamente el sistema de
   modal genérico en todo lo demás (ver comentario de openVsgCarousel en
   vsg-ui-core.js) para no heredar sus reglas de otros flujos -- pero el
   bloqueo de scroll en sí debe comportarse igual de robusto en los dos. */
body.vsg-carousel-body-lock { overflow: hidden; touch-action: none; }

/* ── Versión móvil / app: TOTALMENTE INDEPENDIENTE del diseño de PC ──────
   No es el CSS de escritorio "encogido" por un @media -- es su propio juego
   de medidas, pensado para dedo y pantalla angosta (mismo contrato
   html.vsg-mobile que ya usa el resto del sitio a los 820px, ver
   syncVsgMobileMode en vsg-router-system.js, así que también cubre la app
   empaquetada, no solo el navegador angosto). Todo lo que esta sección no
   redefine sigue heredando el CSS de escritorio de más arriba tal cual. */
html.vsg-mobile .vsg-carousel-section { padding: 0; align-items: flex-end; }
html.vsg-mobile .vsg-carousel-section-panel {
    width: 100%;
    max-height: 94vh;
    border-radius: 18px 18px 0 0;
    border-width: 1px 0 0;
}
html.vsg-mobile .vsg-carousel-section-head { padding: 14px 14px 0; gap: 10px; }
html.vsg-mobile .vsg-carousel-section-heading { gap: 8px; }
html.vsg-mobile .vsg-carousel-section-logo { width: 26px; height: 26px; }
html.vsg-mobile .vsg-carousel-section-head strong { font-size: .92rem; }
html.vsg-mobile .vsg-carousel-section-close { width: 30px; height: 30px; font-size: 1.05rem; }
html.vsg-mobile .vsg-carousel-section .vsg-carousel { padding: 12px 14px 18px; gap: 12px; }
html.vsg-mobile .vsg-carousel-nav { gap: 10px; }
html.vsg-mobile .vsg-carousel-prev, html.vsg-mobile .vsg-carousel-next { width: 42px; height: 42px; }
html.vsg-mobile .vsg-carousel-next { min-width: 42px; padding: 0 14px; }

/* ── Tutorial móvil: historias verticales a pantalla completa ────────────
   Ver renderVsgCarouselMobile en vsg-ui-core.js. Reutiliza las mismas
   clases internas de contenido (.vsg-carousel-slide-icon/-kicker/-title/
   -body) -- por eso sus tamaños de arriba (html.vsg-mobile ...) ya aplican
   acá también, sin duplicar reglas. Lo que sigue es solo el armazón nuevo:
   overlay a pantalla completa, barra de progreso segmentada tipo historias,
   y un track vertical con scroll-snap nativo en vez del carrusel horizontal
   de escritorio con flechas. */
.vsg-mtour {
    position: fixed;
    inset: 0;
    z-index: 30000;
    display: none;
    flex-direction: column;
    background: #05070d;
    opacity: 0;
    transition: opacity .22s ease;
}
.vsg-mtour.is-visible { display: flex; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .vsg-mtour { transition: none; } }
.vsg-mtour-progress {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    left: 12px;
    right: 52px;
    z-index: 2;
    display: flex;
    gap: 4px;
}
.vsg-mtour-progress-seg { flex: 1 1 0; height: 3px; border-radius: 999px; background: rgba(255,255,255,.25); overflow: hidden; }
.vsg-mtour-progress-seg i { display: block; height: 100%; width: 0%; background: #fff; transition: width .2s ease; }
.vsg-mtour-progress-seg.is-done i { width: 100%; }
.vsg-mtour-close {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 4px);
    right: 8px;
    z-index: 3;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(0,0,0,.4);
    color: #fff;
    font-size: 1.15rem;
    line-height: 1;
    display: grid;
    place-items: center;
}
.vsg-mtour-heading {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 22px);
    left: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(255,255,255,.85);
    font-size: .72rem;
    font-weight: 700;
}
.vsg-mtour-heading strong { max-width: calc(100vw - 120px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vsg-mtour-heading img { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto; }
.vsg-mtour-track {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
}
.vsg-mtour-slide {
    width: 100%;
    max-width: 100vw;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-height: 100dvh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow-wrap: break-word;
    word-break: break-word;
    padding: calc(env(safe-area-inset-top, 0px) + 64px) 18px calc(env(safe-area-inset-bottom, 0px) + 84px);
    position: relative;
    /* Mismo criterio que .vsg-carousel-slide: la imagen completa (contain,
       nunca recortada) con un velo liviano solo para apoyar contraste --
       el panel semitransparente del texto hace el trabajo real de lectura. */
    background-image:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--vsg-carousel-accent, #38bdf8) 12%, transparent) 0%, transparent 55%),
        linear-gradient(180deg, rgba(4,7,14,.55) 0%, rgba(4,7,14,.2) 30%, rgba(4,7,14,.25) 65%, rgba(4,7,14,.6) 100%),
        var(--vsg-carousel-slide-bg, none);
    background-size: auto, auto, contain;
    background-position: center, center, center;
    background-repeat: no-repeat;
    background-color: #05070d;
}
.vsg-mtour-cta {
    margin-top: 22px;
    padding: 12px 26px;
    border: none;
    border-radius: 999px;
    background: var(--vsg-carousel-accent, #38bdf8);
    color: #04121f;
    font-weight: 800;
    font-size: .88rem;
    cursor: pointer;
}

html.vsg-mobile .vsg-carousel-slide { padding: 20px 14px 16px; min-height: 0; border-radius: 14px; }
html.vsg-mobile .vsg-carousel-slide-icon { width: 58px; height: 58px; margin-bottom: 10px; }
html.vsg-mobile .vsg-carousel-slide-icon img { width: 40px; height: 40px; }
html.vsg-mobile .vsg-carousel-slide-icon span { font-size: 1.55rem; }
html.vsg-mobile .vsg-carousel-kicker { font-size: .62rem; margin-bottom: 6px; }
html.vsg-mobile .vsg-carousel-slide-title { font-size: 1.02rem; margin-bottom: 8px; }
html.vsg-mobile .vsg-carousel-slide-body { font-size: .84rem; line-height: 1.5; }

html.vsg-mobile .vsg-carousel-leaders-stage { gap: 6px; padding-top: 10px; }
html.vsg-mobile .vsg-carousel-leader-render { width: 92px; height: 106px; }
html.vsg-mobile .vsg-carousel-leader-col { gap: 5px; }
html.vsg-mobile .vsg-carousel-leader-caption { padding: 3px 7px 3px 3px; gap: 4px; }
html.vsg-mobile .vsg-carousel-leader-caption img { width: 22px; height: 22px; }
html.vsg-mobile .vsg-carousel-leader-caption-info strong { font-size: .62rem; max-width: 70px; }
html.vsg-mobile .vsg-carousel-leader-caption-info span { font-size: .52rem; }
html.vsg-mobile .vsg-carousel-leaders { gap: 8px; }
html.vsg-mobile .vsg-carousel-leader-card { width: 82px; }
html.vsg-mobile .vsg-carousel-leader-card img { width: 46px; height: 46px; }
html.vsg-mobile .vsg-carousel-leader-card strong { font-size: .74rem; }
html.vsg-mobile .vsg-carousel-leader-card span { font-size: .6rem; }

html.vsg-mobile .vsg-carousel-rank-ladder { gap: 5px 6px; }
html.vsg-mobile .vsg-carousel-rank-row { padding: 4px 6px; gap: 4px; font-size: .64rem; }
html.vsg-mobile .vsg-carousel-rank-row img { width: 16px; height: 16px; }
html.vsg-mobile .vsg-rank-unit-full { display: none; }

html.vsg-mobile .vsg-carousel-badge-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
html.vsg-mobile .vsg-carousel-badge { padding: 7px 4px; }
html.vsg-mobile .vsg-carousel-badge img { width: 42px; height: 42px; }
html.vsg-mobile .vsg-carousel-badge span { font-size: .6rem; }

html.vsg-mobile .vsg-carousel-points-badge { margin-top: 10px; }
html.vsg-mobile .vsg-carousel-points-badge img { width: 40vw; }

html.vsg-mobile .vsg-carousel-demo-post-img { max-height: 90px; }

html.vsg-mobile .vsg-carousel-demo-profile { flex-direction: column; align-items: flex-start; gap: 10px; }
html.vsg-mobile .vsg-carousel-demo-avatar { width: 60px; height: 60px; }
html.vsg-mobile .vsg-carousel-avatar-upload-btn { padding: 9px 16px; font-size: .78rem; width: 100%; justify-content: center; }

html.vsg-mobile .vsg-carousel-action-subtitle { font-size: .82rem; margin-bottom: 6px; }
html.vsg-mobile .vsg-carousel-action-grid { grid-template-columns: 1fr; gap: 6px; }
html.vsg-mobile .vsg-carousel-action-chip { padding: 9px 10px; gap: 8px; }
html.vsg-mobile .vsg-carousel-action-chip-icon { width: 24px; height: 24px; }
html.vsg-mobile .vsg-carousel-action-chip-desc { font-size: .6rem; }

html.vsg-mobile .vsg-carousel-video-strip { width: min(100%, 220px); margin: 10px auto 0; }
html.vsg-mobile .vsg-carousel-video-strip-caption { font-size: .58rem; padding: 2px 8px; }
}