/* =========================================================
   CRYSTAL CLEANING - HERO CENTER POSITION V60
   Objetivo:
   - Centrar verticalmente el glass panel en el lado izquierdo.
   - Respetar la separación con el NAV superior y la barra de beneficios.
   - Permitir que la misma posición centrada funcione al mover el panel
     al lado derecho desde el panel administrativo.
   - Mantener responsividad y estética premium.
   ========================================================= */

@media (min-width: 921px){

    /* Zona útil del hero: centrada verticalmente entre NAV y barra */
    .hero--premium-v53 .hero-slide__content--premium{
        position: relative !important;
        display: flex !important;
        align-items: center !important;      /* centra de abajo hacia arriba */
        justify-content: flex-start !important;
        width: min(calc(100% - 72px), 1460px) !important;
        height: 100% !important;
        margin-inline: auto !important;
        box-sizing: border-box !important;

        /* espacio real superior e inferior */
        padding-top: calc(var(--crystal-hero-safe-top) + 14px) !important;
        padding-bottom: 172px !important;
    }

    /* Si el admin mueve el contenido a la derecha, sigue centrado */
    .hero--premium-v53 .hero-slide--content-right .hero-slide__content--premium{
        justify-content: flex-end !important;
    }

    .hero--premium-v53 .hero-slide--content-left .hero-slide__content--premium,
    .hero--premium-v53 .hero-slide--content-default .hero-slide__content--premium{
        justify-content: flex-start !important;
    }

    /* Glass panel más equilibrado */
    .hero--premium-v53 .hero-copy--premium{
        width: min(var(--hero-panel-width, 45%), 650px) !important;
        max-width: 650px !important;
        margin: 0 !important;
        align-self: center !important;
        transform: translateY(-8px) !important; /* pequeña subida visual */

        padding: 28px 32px 26px !important;
        border-radius: 28px !important;

        max-height: calc(100dvh - var(--crystal-hero-safe-top) - 235px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: thin;
    }

    .hero--premium-v53 .hero-copy--premium h1{
        max-width: 590px !important;
    }

    .hero--premium-v53 .hero-description{
        max-width: 560px !important;
    }

    /* Evita que el panel se vea aplanado en laptops */
    @media (max-height: 820px){
        .hero--premium-v53 .hero-slide__content--premium{
            padding-top: calc(var(--crystal-hero-safe-top) + 8px) !important;
            padding-bottom: 150px !important;
        }

        .hero--premium-v53 .hero-copy--premium{
            width: min(var(--hero-panel-width, 46%), 620px) !important;
            max-width: 620px !important;
            padding: 24px 28px 22px !important;
            transform: translateY(-4px) !important;
            max-height: calc(100dvh - var(--crystal-hero-safe-top) - 210px) !important;
        }
    }

    @media (max-height: 690px){
        .hero--premium-v53 .hero-slide__content--premium{
            padding-top: calc(var(--crystal-hero-safe-top) + 4px) !important;
            padding-bottom: 132px !important;
        }

        .hero--premium-v53 .hero-copy--premium{
            width: min(var(--hero-panel-width, 47%), 590px) !important;
            max-width: 590px !important;
            padding: 20px 24px !important;
            transform: none !important;
            max-height: calc(100dvh - var(--crystal-hero-safe-top) - 185px) !important;
        }
    }

    /* Pantallas grandes: sigue centrado y respira más */
    @media (min-width: 1800px) and (min-height: 950px){
        .hero--premium-v53 .hero-slide__content--premium{
            width: min(calc(100% - 92px), 1580px) !important;
            padding-bottom: 186px !important;
        }

        .hero--premium-v53 .hero-copy--premium{
            width: min(var(--hero-panel-width, 43%), 700px) !important;
            max-width: 700px !important;
            padding: 32px 36px 30px !important;
            transform: translateY(-10px) !important;
            max-height: calc(100dvh - var(--crystal-hero-safe-top) - 255px) !important;
        }
    }
}

/* Tablets y móviles: no rompemos el comportamiento actual */
@media (max-width: 920px){
    .hero--premium-v53 .hero-copy--premium{
        transform: none !important;
        max-height: none !important;
        overflow: visible !important;
    }
}