/* --- CONTENEDOR PRINCIPAL --- */
.grk-outer { position: relative; max-width: 1165px; margin: 10px auto; overflow: hidden; }
.grk-track { display: flex; transition: transform 0.6s cubic-bezier(0.65,0,0.35,1); will-change: transform; }
.grk-slide { flex: 0 0 100%; width: 100%; }

/* --- STORIES --- */
.grk-stories-outer { position: relative; background: #fff; }
.grk-stories-track { display: flex; gap: 20px; padding-bottom: 10px; justify-content: center; }
.grk-card { width: 355px; height: 629px; border-radius: 12px; overflow: hidden; flex-shrink: 0; background: #111; box-shadow: 0 8px 24px rgba(0,0,0,0.10); position: relative; }

/* --- VIDEOS Y SKELETON --- */
.grk-video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.7s ease; display: block; }
.grk-video.is-ready { opacity: 1 !important; }
.grk-skeleton { position: absolute; inset: 0; background: linear-gradient(110deg,#1a1a1a 30%,#2a2a2a 50%,#1a1a1a 70%); background-size: 200% 100%; animation: grk-shimmer 1.4s infinite; z-index: 1; transition: opacity 0.5s ease; }
.grk-skeleton.is-hidden { opacity: 0; pointer-events: none; }
@keyframes grk-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* --- SPLIT BANNER --- */
.grk-split { height: 629px; display: flex; border-radius: 12px; overflow: hidden; background: #fff; }
.grk-split-video { width: 50%; height: 100%; background: #f4f4f4; display: flex; align-items: center; justify-content: center; }
.grk-split-video-inner { width: 315px; height: 560px; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 28px rgba(0,0,0,0.12); background: #111; position: relative; }
.grk-split-text { width: 50%; display: flex; align-items: center; justify-content: center; padding: 50px 44px; position: relative; text-align: left; }
.grk-badge { background: #000; color: #fff; padding: 5px 14px; border-radius: 50px; font-size: 10px; font-weight: 700; text-transform: uppercase; display: inline-block; margin-bottom: 18px; }
.grk-title { font-size: 3rem; font-weight: 800; color: #1a1a1a; line-height: 1.1; margin-bottom: 12px; }
.grk-subtitle { font-size: 0.95rem; color: #666; margin-bottom: 28px; line-height: 1.65; }
.grk-link { display: inline-block; background: #000; color: #fff; padding: 13px 28px; border-radius: 6px; text-decoration: none; font-weight: 700; font-size: 0.88rem; transition: opacity 0.2s; }
.grk-link:hover { opacity: 0.85; color: #fff; }

/* --- DOTS --- */
.grk-dots { display: flex; justify-content: center; gap: 8px; margin-top: 15px; }
.grk-dot { width: 10px; height: 10px; border-radius: 50%; background: #ccc; border: none; cursor: pointer; transition: 0.3s; padding: 0; }
.grk-dot.is-active { background: #000; transform: scale(1.2); }

/* --- NAV INFERIOR (escritorio) --- */
.grk-main-nav { position: absolute; bottom: 20px; right: 20px; display: flex; gap: 8px; z-index: 50; }
.grk-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.12); background: rgba(255,255,255,0.92); color: #222; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; font-size: 20px; line-height: 1; }
.grk-btn:hover { background: #000; color: #fff; }

/* --- FLECHAS LATERALES (solo escritorio) --- */
.grk-nav-side {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 60;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    color: #222;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
    pointer-events: auto;
}
.grk-nav-side:hover { background: #000; color: #fff; }
.grk-nav-side--prev { left: 14px; }
.grk-nav-side--next { right: 14px; }

/* --- LABELS --- */
.grk-card-label { position: absolute; bottom: 20px; left: 20px; color: #fff; background: rgba(0,0,0,0.55); padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: 1.1rem; z-index: 3; text-decoration: none; line-height: 1; transition: all 0.2s ease; }
.grk-card-label:hover { background: #fff; color: #000; }
.grk-card-label.grk-label-mobile { display: none; }

/* =========================================
   TABLET Y MOVIL
========================================= */
@media (max-width: 992px) {
    .grk-outer { max-width: 100%; margin: 10px auto; overflow: hidden; position: relative; }
    .grk-track { display: flex !important; transition: transform 0.45s ease !important; will-change: transform; }
    .grk-slide { flex: 0 0 100% !important; width: 100% !important; display: flex !important; justify-content: center; align-items: center; }
    .grk-stories-outer { width: 100%; background: transparent; }
    .grk-stories-track { display: flex; justify-content: center; align-items: center; gap: 0; padding-bottom: 0; }
    .grk-card { width: 75vw !important; max-width: 320px; height: 133vw !important; max-height: 568px; border-radius: 12px; margin: 0 auto; }
    .grk-card:not(:first-child) { display: none !important; }
    .grk-card-label { bottom: 18px; left: 18px; font-size: 1rem; }
    .grk-split { width: 100%; height: auto !important; display: flex; justify-content: center; align-items: center; background: transparent; border-radius: 12px; overflow: visible; }
    .grk-split-video { width: 100% !important; height: auto !important; padding: 15px 0 !important; background: transparent; display: flex; align-items: center; justify-content: center; }
    .grk-split-video-inner { width: 75vw !important; max-width: 320px; height: 133vw !important; max-height: 568px; margin: 0 auto; background: #000; border-radius: 12px; overflow: hidden; position: relative; box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
    .grk-split-text { display: none !important; }
    .grk-video { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; }

    /* En movil: flechas abajo, laterales OCULTAS */
    .grk-main-nav { display: flex !important; position: absolute; bottom: 16px; left: 50%; right: auto; transform: translateX(-50%); z-index: 50; gap: 12px; }
    .grk-btn { width: 42px; height: 42px; background: rgba(255,255,255,0.94); box-shadow: 0 4px 14px rgba(0,0,0,0.12); }
    .grk-nav-side { display: none !important; }
    .grk-dots { display: none !important; }
}

@media (max-width: 768px) {
    .grk-card-label.grk-label-mobile { display: inline-block; position: absolute; left: 12px; bottom: 12px; z-index: 3; }
}

@media (max-width: 430px) {
    .grk-card, .grk-split-video-inner { width: 75vw !important; height: 133vw !important; max-width: none; max-height: none; }
    .grk-main-nav { bottom: 12px; }
    .grk-btn { width: 40px; height: 40px; font-size: 18px; }
}