/* =========================================================
   CRYSTAL CLEANING - HERO BALANCE V59
   Ajustes solicitados:
   1) Barra de beneficios vuelve a tamaño normal, premium y más arriba.
   2) Glass panel más proporcionado, elegante y con mejor respiración.
   Basado en V58 y cargado AL FINAL.
   ========================================================= */

:root{
    --crystal-hero-safe-top:160px;
    --crystal-hero-edge:36px;
}

/* ========================= DESKTOP ========================= */
@media (min-width:921px){

    .hero--premium-v53{
        position:relative!important;
        height:clamp(700px,100dvh,920px)!important;
        min-height:0!important;
        max-height:920px!important;
        overflow:hidden!important;
        background:#eef3e8!important;
        box-sizing:border-box!important;
    }

    .hero--premium-v53 .hero-slide--premium,
    .hero--premium-v53 .hero-slide--premium.is-active{
        position:absolute!important;
        inset:0!important;
        width:100%!important;
        height:100%!important;
        min-height:0!important;
        max-height:none!important;
        overflow:hidden!important;
    }

    .hero--premium-v53 .hero-slide__image--uhd{
        position:absolute!important;
        inset:0!important;
        width:100%!important;
        height:100%!important;
        max-width:none!important;
        object-fit:cover!important;
        object-position:var(--hero-position-x,right) var(--hero-position-y,center)!important;
        transform:none!important;
        image-rendering:auto!important;
    }

    .hero--premium-v53 .hero-slide__content--premium{
        position:relative!important;
        z-index:5!important;
        width:min(calc(100% - (var(--crystal-hero-edge) * 2)),1460px)!important;
        height:100%!important;
        min-height:0!important;
        max-height:none!important;
        margin-inline:auto!important;
        display:flex!important;
        align-items:flex-start!important;

        /* El JS V58 calcula la distancia real respecto al NAV */
        padding-top:var(--crystal-hero-safe-top)!important;

        /* Reserva limpia para la barra inferior subida */
        padding-bottom:166px!important;
        box-sizing:border-box!important;
    }

    .hero--premium-v53 .hero-slide--content-right .hero-slide__content--premium{
        justify-content:flex-end!important;
    }

    /* =====================================================
       NÚMERO 2 - GLASS PANEL
       Menos ancho/aplanado, más alto y proporcionado.
       ===================================================== */
    .hero--premium-v53 .hero-copy--premium{
        width:min(var(--hero-panel-width,44%),650px)!important;
        max-width:650px!important;
        max-height:calc(100% - 8px)!important;
        overflow:hidden!important;

        padding:27px 32px 25px!important;

        border:1px solid rgba(255,255,255,.78)!important;
        border-radius:26px!important;
        background:rgba(255,255,255,var(--hero-panel-opacity,.84))!important;

        -webkit-backdrop-filter:blur(var(--hero-panel-blur,22px)) saturate(132%)!important;
        backdrop-filter:blur(var(--hero-panel-blur,22px)) saturate(132%)!important;

        box-shadow:
            0 26px 68px rgba(13,29,26,.17),
            inset 0 1px 0 rgba(255,255,255,.88)!important;

        box-sizing:border-box!important;
    }

    .hero--premium-v53 .hero-kicker{
        margin-bottom:10px!important;
        font-size:9px!important;
        line-height:1.2!important;
        letter-spacing:.17em!important;
    }

    .hero--premium-v53 .hero-kicker__line{
        width:42px!important;
    }

    .hero--premium-v53 .hero-copy--premium h1{
        max-width:590px!important;
        margin:0!important;
        font-size:clamp(40px,3.15vw,55px)!important;
        line-height:.96!important;
        letter-spacing:-.045em!important;
        text-wrap:balance!important;
    }

    .hero--premium-v53 .hero-subtitle{
        margin-top:8px!important;
        font-size:clamp(20px,1.50vw,25px)!important;
        line-height:1.05!important;
    }

    .hero--premium-v53 .hero-description{
        max-width:575px!important;
        margin-top:14px!important;
        font-size:clamp(12px,.88vw,14px)!important;
        line-height:1.48!important;
    }

    .hero--premium-v53 .hero-actions{
        gap:12px!important;
        margin-top:18px!important;
    }

    .hero--premium-v53 .site-button--hero,
    .hero--premium-v53 .hero-secondary-button{
        min-width:160px!important;
        min-height:45px!important;
        padding:0 17px!important;
        border-radius:11px!important;
        font-size:10px!important;
    }

    .hero-bottom-note{
        gap:10px!important;
        margin-top:14px!important;
        font-size:7.2px!important;
        line-height:1.3!important;
        letter-spacing:.13em!important;
    }

    .hero-bottom-note>span{
        width:34px!important;
        flex:0 0 34px!important;
    }

    /* =====================================================
       NÚMERO 1 - BARRA DE BENEFICIOS
       Tamaño normal + más arriba + separación real de dots.
       ===================================================== */
    .hero-benefits-wrap{
        position:absolute!important;
        z-index:8!important;

        left:50%!important;
        bottom:48px!important;

        width:min(calc(100% - 92px),1450px)!important;
        max-width:1450px!important;

        margin:0!important;
        transform:translateX(-50%)!important;
    }

    .hero-benefits-premium{
        width:100%!important;

        height:94px!important;
        min-height:94px!important;

        display:grid!important;
        grid-template-columns:repeat(5,minmax(0,1fr))!important;
        align-items:stretch!important;

        padding:11px 16px!important;

        overflow:hidden!important;

        border:1px solid rgba(255,255,255,.84)!important;
        border-radius:22px!important;

        background:rgba(255,255,255,.94)!important;

        -webkit-backdrop-filter:blur(18px) saturate(128%)!important;
        backdrop-filter:blur(18px) saturate(128%)!important;

        box-shadow:
            0 22px 56px rgba(16,34,30,.15),
            inset 0 1px 0 rgba(255,255,255,.92)!important;

        box-sizing:border-box!important;
    }

    .hero-benefit-premium{
        position:relative!important;
        min-width:0!important;

        display:grid!important;
        grid-template-columns:46px minmax(0,1fr)!important;
        align-items:center!important;

        gap:11px!important;
        padding:6px 16px!important;

        border-right:0!important;
    }

    .hero-benefit-premium:not(:last-child)::after{
        content:''!important;
        position:absolute!important;
        top:12px!important;
        right:0!important;
        bottom:12px!important;
        width:1px!important;
        background:linear-gradient(
            180deg,
            transparent,
            rgba(19,43,38,.16),
            transparent
        )!important;
    }

    .hero-benefit-premium__icon{
        width:44px!important;
        height:44px!important;

        display:grid!important;
        place-items:center!important;

        border-radius:13px!important;

        color:#17375c!important;
        background:linear-gradient(
            145deg,
            rgba(238,247,225,.98),
            rgba(255,255,255,.98)
        )!important;

        box-shadow:
            inset 0 0 0 1px rgba(111,157,45,.11),
            0 5px 14px rgba(29,61,47,.04)!important;
    }

    .hero-benefit-premium__icon svg{
        width:30px!important;
        height:30px!important;
    }

    .hero-benefit-premium:last-child .hero-benefit-premium__icon{
        color:#6cad2b!important;
    }

    .hero-benefit-premium strong{
        display:block!important;
        color:#13213a!important;

        font-size:10px!important;
        line-height:1.08!important;
        font-weight:800!important;

        letter-spacing:.018em!important;
        text-transform:uppercase!important;
    }

    .hero-benefit-premium small{
        display:block!important;
        margin-top:3px!important;

        color:#33413e!important;

        font-size:8px!important;
        line-height:1.15!important;
        font-weight:600!important;

        text-transform:uppercase!important;
    }

    /* Dots quedan claramente debajo de la barra, sin montarse. */
    .hero-dots--premium{
        z-index:10!important;
        bottom:10px!important;
    }

    .hero-dots--premium button{
        width:8px!important;
        height:8px!important;
        background:rgba(255,255,255,.78)!important;
        box-shadow:0 2px 8px rgba(0,0,0,.08)!important;
    }

    .hero-dots--premium button.is-active{
        width:27px!important;
        background:#78b92c!important;
    }

    .hero--premium-v53 .hero-arrow--premium{
        z-index:12!important;

        width:52px!important;
        height:52px!important;

        border:2px solid rgba(255,255,255,.94)!important;

        background:rgba(22,38,31,.30)!important;

        -webkit-backdrop-filter:blur(12px)!important;
        backdrop-filter:blur(12px)!important;

        box-shadow:0 12px 30px rgba(0,0,0,.16)!important;
    }

    .hero--premium-v53 .hero-arrow span{
        font-size:34px!important;
    }

    .hero--premium-v53 .hero-arrow--prev{
        left:22px!important;
    }

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

/* ==================== STANDARD LAPTOPS ==================== */
@media (min-width:921px) and (max-height:820px){

    .hero--premium-v53{
        height:100dvh!important;
        min-height:660px!important;
    }

    .hero--premium-v53 .hero-slide__content--premium{
        padding-bottom:146px!important;
    }

    .hero--premium-v53 .hero-copy--premium{
        width:min(var(--hero-panel-width,45%),620px)!important;
        max-width:620px!important;
        padding:22px 26px 20px!important;
        border-radius:23px!important;
    }

    .hero--premium-v53 .hero-copy--premium h1{
        font-size:clamp(36px,2.85vw,47px)!important;
    }

    .hero--premium-v53 .hero-subtitle{
        font-size:19px!important;
    }

    .hero--premium-v53 .hero-description{
        margin-top:10px!important;
        font-size:11.2px!important;
        line-height:1.40!important;
    }

    .hero--premium-v53 .hero-actions{
        margin-top:13px!important;
    }

    .hero--premium-v53 .site-button--hero,
    .hero--premium-v53 .hero-secondary-button{
        min-height:41px!important;
        min-width:148px!important;
        font-size:9px!important;
    }

    .hero-bottom-note{
        margin-top:10px!important;
        font-size:6.5px!important;
    }

    .hero-benefits-wrap{
        bottom:42px!important;
    }

    .hero-benefits-premium{
        height:84px!important;
        min-height:84px!important;
        padding:9px 12px!important;
    }

    .hero-benefit-premium{
        grid-template-columns:38px minmax(0,1fr)!important;
        gap:9px!important;
        padding-inline:11px!important;
    }

    .hero-benefit-premium__icon{
        width:36px!important;
        height:36px!important;
    }

    .hero-benefit-premium__icon svg{
        width:25px!important;
        height:25px!important;
    }

    .hero-benefit-premium strong{
        font-size:8.4px!important;
    }

    .hero-benefit-premium small{
        font-size:6.9px!important;
    }

    .hero-dots--premium{
        bottom:8px!important;
    }
}

/* =================== VERY SHORT DESKTOP =================== */
@media (min-width:921px) and (max-height:690px){

    .hero--premium-v53{
        height:100dvh!important;
        min-height:590px!important;
    }

    .hero--premium-v53 .hero-slide__content--premium{
        padding-bottom:126px!important;
    }

    .hero--premium-v53 .hero-copy--premium{
        width:min(var(--hero-panel-width,46%),590px)!important;
        max-width:590px!important;
        padding:17px 22px!important;
    }

    .hero--premium-v53 .hero-kicker{
        font-size:7.2px!important;
        margin-bottom:6px!important;
    }

    .hero--premium-v53 .hero-copy--premium h1{
        font-size:clamp(32px,2.6vw,42px)!important;
    }

    .hero--premium-v53 .hero-subtitle{
        font-size:17px!important;
    }

    .hero--premium-v53 .hero-description{
        font-size:10.2px!important;
    }

    .hero-bottom-note{
        display:none!important;
    }

    .hero-benefits-wrap{
        bottom:35px!important;
    }

    .hero-benefits-premium{
        height:72px!important;
        min-height:72px!important;
    }

    .hero-dots--premium{
        bottom:6px!important;
    }
}

/* ==================== LARGE / ULTRAWIDE ==================== */
@media (min-width:1800px) and (min-height:950px){

    :root{
        --crystal-hero-edge:52px;
    }

    .hero--premium-v53{
        height:min(100dvh,970px)!important;
        max-height:970px!important;
    }

    .hero--premium-v53 .hero-slide__content--premium{
        padding-bottom:180px!important;
    }

    .hero--premium-v53 .hero-copy--premium{
        width:min(var(--hero-panel-width,43%),690px)!important;
        max-width:690px!important;
        padding:31px 36px 29px!important;
    }

    .hero--premium-v53 .hero-copy--premium h1{
        font-size:58px!important;
    }

    .hero--premium-v53 .hero-subtitle{
        font-size:27px!important;
    }

    .hero--premium-v53 .hero-description{
        font-size:15px!important;
    }

    .hero-benefits-wrap{
        bottom:52px!important;
    }

    .hero-benefits-premium{
        height:102px!important;
        min-height:102px!important;
    }

    .hero-benefit-premium__icon{
        width:48px!important;
        height:48px!important;
    }

    .hero-benefit-premium__icon svg{
        width:33px!important;
        height:33px!important;
    }

    .hero-benefit-premium strong{
        font-size:10.8px!important;
    }

    .hero-benefit-premium small{
        font-size:8.7px!important;
    }
}

/* ========================= TABLET ========================= */
@media (max-width:920px){

    .hero--premium-v53{
        height:auto!important;
        min-height:870px!important;
        max-height:none!important;
        overflow:hidden!important;
    }

    .hero--premium-v53 .hero-slide--premium.is-active{
        position:relative!important;
        inset:auto!important;
        height:auto!important;
        min-height:870px!important;
    }

    .hero--premium-v53 .hero-slide__content--premium{
        width:calc(100% - 28px)!important;
        min-height:870px!important;
        height:auto!important;

        margin-inline:auto!important;

        padding-top:118px!important;
        padding-bottom:166px!important;
    }

    .hero--premium-v53 .hero-copy--premium{
        width:100%!important;
        max-width:600px!important;

        margin-inline:auto!important;

        padding:24px 21px!important;

        border-radius:22px!important;
    }

    .hero--premium-v53 .hero-copy--premium h1{
        font-size:clamp(36px,8vw,50px)!important;
    }

    .hero--premium-v53 .hero-subtitle{
        font-size:clamp(21px,5.3vw,27px)!important;
    }

    .hero--premium-v53 .hero-description{
        font-size:12.5px!important;
    }

    .hero-benefits-wrap{
        width:calc(100% - 24px)!important;
        bottom:42px!important;
    }

    .hero-benefits-premium{
        height:auto!important;
        min-height:92px!important;

        padding:10px!important;

        border-radius:20px!important;

        display:flex!important;
        overflow-x:auto!important;
        scrollbar-width:none!important;
    }

    .hero-benefits-premium::-webkit-scrollbar{
        display:none!important;
    }

    .hero-benefit-premium{
        flex:0 0 175px!important;
        grid-template-columns:40px minmax(0,1fr)!important;
        padding-inline:11px!important;
    }

    .hero-dots--premium{
        bottom:10px!important;
    }

    .hero--premium-v53 .hero-arrow--premium{
        width:42px!important;
        height:42px!important;
        top:57%!important;
    }
}

/* ========================= PHONE ========================= */
@media (max-width:560px){

    .hero--premium-v53{
        min-height:825px!important;
    }

    .hero--premium-v53 .hero-slide--premium.is-active,
    .hero--premium-v53 .hero-slide__content--premium{
        min-height:825px!important;
    }

    .hero--premium-v53 .hero-slide__content--premium{
        padding-top:102px!important;
        padding-bottom:158px!important;
    }

    .hero--premium-v53 .hero-copy--premium{
        width:100%!important;

        padding:20px 16px!important;

        border-radius:20px!important;
    }

    .hero--premium-v53 .hero-kicker{
        font-size:7.5px!important;
    }

    .hero--premium-v53 .hero-copy--premium h1{
        font-size:clamp(31px,9.6vw,42px)!important;
    }

    .hero--premium-v53 .hero-subtitle{
        font-size:clamp(19px,5.6vw,24px)!important;
    }

    .hero--premium-v53 .hero-description{
        font-size:12px!important;
    }

    .hero--premium-v53 .hero-actions{
        display:grid!important;
        grid-template-columns:1fr 1fr!important;
        gap:7px!important;
        margin-top:12px!important;
    }

    .hero--premium-v53 .site-button--hero,
    .hero--premium-v53 .hero-secondary-button{
        width:100%!important;
        min-width:0!important;

        min-height:40px!important;

        padding-inline:8px!important;

        font-size:9px!important;
    }

    .hero-bottom-note{
        font-size:6.6px!important;
    }

    .hero-benefits-wrap{
        width:calc(100% - 16px)!important;
        bottom:37px!important;
    }

    .hero-benefits-premium{
        min-height:86px!important;
        border-radius:18px!important;
    }

    .hero-benefit-premium{
        flex:0 0 150px!important;
    }

    .hero-dots--premium{
        bottom:8px!important;
    }

    .hero--premium-v53 .hero-arrow--premium{
        width:38px!important;
        height:38px!important;
        top:60%!important;
    }
}

@media (max-width:390px){

    .hero--premium-v53{
        min-height:865px!important;
    }

    .hero--premium-v53 .hero-slide--premium.is-active,
    .hero--premium-v53 .hero-slide__content--premium{
        min-height:865px!important;
    }

    .hero--premium-v53 .hero-actions{
        grid-template-columns:1fr!important;
    }
}