/* =========================================================
   CRYSTAL CLEANING - SLIDER PANEL POSITION LOCK V61
   BLINDAJE DEL POSICIONAMIENTO DEL GLASS PANEL
   ---------------------------------------------------------
   Esta hoja DEBE permanecer como la última hoja CSS del sitio.
   Objetivos:
   1. Conservar el centrado vertical conseguido en V60.
   2. Separar el panel de la flecha izquierda.
   3. Aplicar la misma separación al moverlo a la derecha.
   4. Evitar regresiones por futuras hojas de estilo.
   ========================================================= */

@media (min-width:921px){

    :root{
        --crystal-panel-arrow-clearance:58px;
    }

    /*
     * BLOQUEO DEL CENTRADO VERTICAL
     * Se mantiene la zona útil calculada en V60/V58.
     */
    html body .hero--premium-v53 .hero-slide__content--premium{
        display:flex!important;
        align-items:center!important;
        box-sizing:border-box!important;
    }

    html body .hero--premium-v53 .hero-copy--premium{
        align-self:center!important;
        flex:0 0 auto!important;
    }

    /*
     * POSICIÓN IZQUIERDA / DEFAULT
     * Se corre hacia adentro para que la flecha jamás toque el panel.
     */
    html body .hero--premium-v53
    .hero-slide--content-left
    .hero-slide__content--premium,
    html body .hero--premium-v53
    .hero-slide--content-default
    .hero-slide__content--premium{
        justify-content:flex-start!important;
    }

    html body .hero--premium-v53
    .hero-slide--content-left
    .hero-copy--premium,
    html body .hero--premium-v53
    .hero-slide--content-default
    .hero-copy--premium{
        margin-left:var(--crystal-panel-arrow-clearance)!important;
        margin-right:0!important;
    }

    /*
     * POSICIÓN DERECHA
     * Misma separación visual, pero espejada.
     */
    html body .hero--premium-v53
    .hero-slide--content-right
    .hero-slide__content--premium{
        justify-content:flex-end!important;
    }

    html body .hero--premium-v53
    .hero-slide--content-right
    .hero-copy--premium{
        margin-left:0!important;
        margin-right:var(--crystal-panel-arrow-clearance)!important;
    }

    /*
     * Si por alguna razón un slide antiguo no trae clase explícita
     * de posición, se protege como LEFT por defecto.
     */
    html body .hero--premium-v53
    .hero-slide--premium:not(.hero-slide--content-right):not(.hero-slide--content-left):not(.hero-slide--content-default)
    .hero-copy--premium{
        margin-left:var(--crystal-panel-arrow-clearance)!important;
        margin-right:0!important;
    }

    /*
     * Las flechas mantienen su propia zona y no invaden el glass.
     */
    html body .hero--premium-v53 .hero-arrow--prev{
        left:22px!important;
    }

    html body .hero--premium-v53 .hero-arrow--next{
        right:22px!important;
    }
}

/* Laptop medio: un poco menos de desplazamiento para conservar espacio. */
@media (min-width:921px) and (max-width:1280px){
    :root{
        --crystal-panel-arrow-clearance:48px;
    }
}

/* Laptop estrecho / baja resolución. */
@media (min-width:921px) and (max-width:1080px){
    :root{
        --crystal-panel-arrow-clearance:38px;
    }
}

/*
 * TABLET / MÓVIL
 * No forzamos desplazamiento lateral porque el panel ocupa prácticamente
 * todo el ancho disponible. Se conserva el centrado responsive existente.
 */
@media (max-width:920px){
    html body .hero--premium-v53 .hero-copy--premium{
        margin-left:auto!important;
        margin-right:auto!important;
    }
}