/* ═══════════════════════════════════════════════════════════
   SIGNARIO — responsive  v3.0
═══════════════════════════════════════════════════════════ */

/* ── Tablet ancha (≤ 1280px) ──────────────────────────────── */
@media (max-width: 1280px) {
    #signarioArchive {
        padding: 0 48px;
        gap: 16px;
    }
    .signario__track {
        gap: 48px;
    }
}

/* ── Tablet (≤ 1024px) ────────────────────────────────────── */
@media (max-width: 1024px) {
    #signarioArchive {
        padding: 0 36px;
        gap: 12px;
    }
    .signario__track {
        gap: 32px;
    }
    .cluster-stage {
        width: 260px;
        height: 220px;
    }
    .sgn-holo {
        width: 210px;
        height: 136px;
    }
}

/* ── Mobile grande (≤ 768px) ──────────────────────────────── */
@media (max-width: 768px) {
    #signario {
        padding: 60px 0 80px !important;
    }
    .signario__header {
        margin-bottom: 40px;
    }

    /* Ocultar flechas — el JS muestra 1 cluster por página,
       la navegación es scroll horizontal nativo              */
    .signario__arrow {
        display: none !important;
    }

    /* Archive: block para que el stage ocupe todo el ancho */
    #signarioArchive {
        padding: 0 !important;
        gap: 0 !important;
        display: block !important;
    }

    /* Stage: scroll horizontal con snap centrado.
       padding-left/right = (50% del stage) − (mitad del card = 120px)
       → el primer cluster arranca centrado; el scroll mueve al siguiente. */
    .signario__stage {
        overflow-x: auto !important;
        overflow-y: visible !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-left:  calc(50% - 120px) !important;
        padding-right: calc(50% - 120px) !important;
        box-sizing: border-box !important;
    }
    .signario__stage::-webkit-scrollbar { display: none !important; }

    /* Track: empieza desde el borde izquierdo del stage (el padding lo centra) */
    .signario__track {
        justify-content: flex-start !important;
        gap: 20px !important;
        padding: 16px 0 48px !important;
    }

    /* Cada cluster: snap en center + no se encoge */
    .signario-cluster {
        flex-shrink: 0 !important;
        scroll-snap-align: center !important;
    }

    .cluster-stage {
        width: 240px;   /* mitad = 120px → coincide con el padding del stage */
        height: 200px;
    }
    .sgn-holo {
        width: 194px;
        height: 126px;
    }

    /* Panel */
    .signario-panel__sheet {
        padding: 24px 20px;
        max-height: 90vh;
    }
    .signario-panel__grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Mobile (≤ 480px) ─────────────────────────────────────── */
@media (max-width: 480px) {
    /* cluster-stage: 220px → mitad = 110px → ajustar padding del stage */
    .signario__stage {
        padding-left:  calc(50% - 110px) !important;
        padding-right: calc(50% - 110px) !important;
    }
    .signario__track {
        gap: 16px !important;
        padding: 12px 0 40px !important;
    }
    .cluster-stage {
        width: 220px;
        height: 185px;
    }
    .sgn-holo {
        width: 178px;
        height: 115px;
    }
    .signario-panel__grid {
        grid-template-columns: 1fr;
    }

    /* Player */
    .signario-player__close {
        top: -40px;
    }
}