/* ============================================================
   UPSEX — V3.25
   Solo agrupa Cuenta + Carrito y oscurece la fila principal.
   Solo tablet y PC.
   ============================================================ */

@media (min-width:768px){

    /*
     * Fondo exclusivo de la fila que contiene:
     * logo + buscador + cuenta + carrito.
     * Chocolate medio oscuro, sin tonalidad verde.
     */
    html body
    #upsex-desktop-header-v1
    .upsex-v325-mainrow,

    html body
    #upsex-desktop-header-v1
    .upsex-v325-mainrow > .container,

    html body
    #upsex-desktop-header-v1
    .upsex-v325-mainrow > .container-fluid{
        position:relative!important;

        background-color:#4d423f!important;
        background-image:
            radial-gradient(
                circle at 23% 20%,
                rgba(184,138,0,.10) 0,
                rgba(184,138,0,0) 34%
            ),
            linear-gradient(
                105deg,
                #3f322e 0%,
                #4d423f 48%,
                #584a46 100%
            )!important;

        background-blend-mode:normal!important;
    }

    /*
     * Nuevo grupo real.
     * Los dos elementos son movidos aquí mediante JavaScript.
     */
    html body
    #upsex-desktop-header-v1
    .upsex-v325-actions-fixed{
        position:absolute!important;
        z-index:100!important;

        top:50%!important;
        right:clamp(24px,3.2vw,56px)!important;
        bottom:auto!important;
        left:auto!important;

        display:flex!important;
        align-items:center!important;
        justify-content:flex-end!important;
        gap:14px!important;

        width:auto!important;
        min-width:126px!important;
        max-width:none!important;
        height:auto!important;

        margin:0!important;
        padding:0!important;

        background:transparent!important;
        border:0!important;
        box-shadow:none!important;

        transform:translateY(-50%)!important;
    }

    /*
     * Anula las posiciones antiguas que estaban separando
     * Cuenta y Carrito en columnas diferentes.
     */
    html body
    #upsex-desktop-header-v1
    .upsex-v325-actions-fixed
    > .upsex-v325-action-unit{
        position:relative!important;

        top:auto!important;
        right:auto!important;
        bottom:auto!important;
        left:auto!important;

        display:flex!important;
        align-items:center!important;
        justify-content:center!important;

        float:none!important;

        width:56px!important;
        min-width:56px!important;
        max-width:56px!important;
        height:auto!important;

        margin:0!important;
        padding:0!important;

        flex:0 0 56px!important;

        transform:none!important;
    }

    html body
    #upsex-desktop-header-v1
    .upsex-v325-actions-fixed
    > .upsex-v325-action-unit
    > a,

    html body
    #upsex-desktop-header-v1
    .upsex-v325-actions-fixed
    > .upsex-v325-action-unit
    > button{
        position:relative!important;

        display:flex!important;
        flex-direction:column!important;
        align-items:center!important;
        justify-content:center!important;
        gap:3px!important;

        width:56px!important;
        min-width:56px!important;
        max-width:56px!important;

        margin:0!important;
        padding:2px 0!important;

        transform:none!important;
        text-align:center!important;
    }

    /*
     * Estado de sesión:
     * gris = no conectado
     * dorado = conectado
     * nunca verde.
     */
    html body
    #upsex-desktop-header-v1
    .upsex-v325-action-unit
    .upsex-v322-login-status{
        position:absolute!important;
        z-index:120!important;

        top:0!important;
        right:5px!important;
        bottom:auto!important;
        left:auto!important;

        display:block!important;
        visibility:visible!important;
        opacity:1!important;

        width:9px!important;
        height:9px!important;

        margin:0!important;
        padding:0!important;

        border:2px solid #4d423f!important;
        border-radius:50%!important;

        transform:none!important;

        box-shadow:
            0 0 0 1px rgba(255,250,241,.80),
            0 2px 6px rgba(28,18,15,.24)!important;
    }

    html body
    #upsex-desktop-header-v1
    .upsex-v325-action-unit.is-logged-out
    .upsex-v322-login-status{
        background:#9b8e88!important;
    }

    html body
    #upsex-desktop-header-v1
    .upsex-v325-action-unit.is-logged-in
    .upsex-v322-login-status{
        background:#FEC400!important;
    }
}

@media (min-width:768px) and (max-width:991px){

    html body
    #upsex-desktop-header-v1
    .upsex-v325-actions-fixed{
        right:16px!important;
        gap:9px!important;
        min-width:110px!important;
    }

    html body
    #upsex-desktop-header-v1
    .upsex-v325-actions-fixed
    > .upsex-v325-action-unit{
        width:50px!important;
        min-width:50px!important;
        max-width:50px!important;
        flex-basis:50px!important;
    }
}

/* UPSEX_V325_COMPACT_BACKGROUND_FIX_START */

@media (min-width:768px){

    /*
     * Un solo fondo continuo.
     * El degradado ya no se repite dentro del contenedor.
     */
    html body
    #upsex-desktop-header-v1
    .upsex-v325-mainrow{
        background-color:#3b2e2b!important;

        background-image:
            radial-gradient(
                circle at 20% 18%,
                rgba(184,138,0,.07) 0,
                rgba(184,138,0,0) 32%
            ),
            linear-gradient(
                105deg,
                #332724 0%,
                #3e302d 48%,
                #493a36 100%
            )!important;

        background-repeat:no-repeat!important;
        background-size:cover!important;

        border:0!important;
        border-top:0!important;
        border-right:0!important;
        border-bottom:0!important;
        border-left:0!important;

        border-radius:0!important;
        outline:0!important;
        box-shadow:none!important;
    }

    html body
    #upsex-desktop-header-v1
    .upsex-v325-mainrow::before,

    html body
    #upsex-desktop-header-v1
    .upsex-v325-mainrow::after{
        content:none!important;
        display:none!important;
        border:0!important;
        background:none!important;
        box-shadow:none!important;
    }

    /*
     * El contenedor interior queda transparente.
     * Así no aparecen cambios de color en los laterales.
     */
    html body
    #upsex-desktop-header-v1
    .upsex-v325-mainrow > .container,

    html body
    #upsex-desktop-header-v1
    .upsex-v325-mainrow > .container-fluid{
        background:transparent!important;
        background-color:transparent!important;
        background-image:none!important;

        border:0!important;
        border-top:0!important;
        border-right:0!important;
        border-bottom:0!important;
        border-left:0!important;

        outline:0!important;
        box-shadow:none!important;
    }

    html body
    #upsex-desktop-header-v1
    .upsex-v325-mainrow > .container::before,

    html body
    #upsex-desktop-header-v1
    .upsex-v325-mainrow > .container::after,

    html body
    #upsex-desktop-header-v1
    .upsex-v325-mainrow > .container-fluid::before,

    html body
    #upsex-desktop-header-v1
    .upsex-v325-mainrow > .container-fluid::after{
        content:none!important;
        display:none!important;
    }

    /*
     * Elimina separadores antiguos de la cuadrícula
     * únicamente dentro de la fila principal.
     */
    html body
    #upsex-desktop-header-v1
    .upsex-v325-mainrow > .container > .row,

    html body
    #upsex-desktop-header-v1
    .upsex-v325-mainrow > .container-fluid > .row{
        background:transparent!important;
        border:0!important;
        outline:0!important;
        box-shadow:none!important;
    }

    html body
    #upsex-desktop-header-v1
    .upsex-v325-mainrow
    > .container
    > .row
    > [class*="col-"],

    html body
    #upsex-desktop-header-v1
    .upsex-v325-mainrow
    > .container-fluid
    > .row
    > [class*="col-"]{
        background:transparent!important;
        background-image:none!important;

        border:0!important;
        border-top:0!important;
        border-right:0!important;
        border-bottom:0!important;
        border-left:0!important;

        outline:0!important;
        box-shadow:none!important;
    }

    html body
    #upsex-desktop-header-v1
    .upsex-v325-mainrow
    > .container
    > .row
    > [class*="col-"]::before,

    html body
    #upsex-desktop-header-v1
    .upsex-v325-mainrow
    > .container
    > .row
    > [class*="col-"]::after,

    html body
    #upsex-desktop-header-v1
    .upsex-v325-mainrow
    > .container-fluid
    > .row
    > [class*="col-"]::before,

    html body
    #upsex-desktop-header-v1
    .upsex-v325-mainrow
    > .container-fluid
    > .row
    > [class*="col-"]::after{
        content:none!important;
        display:none!important;
    }

    /*
     * Conserva Cuenta + Carrito juntos,
     * pero sin caja, líneas ni fondo independiente.
     */
    html body
    #upsex-desktop-header-v1
    .upsex-v325-actions-fixed,

    html body
    #upsex-desktop-header-v1
    .upsex-v325-action-unit,

    html body
    #upsex-desktop-header-v1
    .upsex-v321-actions,

    html body
    #upsex-desktop-header-v1
    .upsex-v323-actions{
        background:transparent!important;
        background-image:none!important;

        border:0!important;
        border-top:0!important;
        border-right:0!important;
        border-bottom:0!important;
        border-left:0!important;

        outline:0!important;
        box-shadow:none!important;
    }

    html body
    #upsex-desktop-header-v1
    .upsex-v325-actions-fixed::before,

    html body
    #upsex-desktop-header-v1
    .upsex-v325-actions-fixed::after,

    html body
    #upsex-desktop-header-v1
    .upsex-v325-action-unit::before,

    html body
    #upsex-desktop-header-v1
    .upsex-v325-action-unit::after{
        content:none!important;
        display:none!important;
    }

    /*
     * Limpieza puntual de los envoltorios del logo.
     * No modifica tamaño ni posición.
     */
    html body
    #upsex-desktop-header-v1
    .upsex-v325-mainrow
    .upsex-v32-logo,

    html body
    #upsex-desktop-header-v1
    .upsex-v325-mainrow
    [class*="logo-wrap"]{
        border:0!important;
        outline:0!important;
        box-shadow:none!important;
        background:transparent!important;
    }
}

/* UPSEX_V325_COMPACT_BACKGROUND_FIX_END */

/* UPSEX_V327_FULLWIDE_LAYOUT_START */

@media (min-width:768px){

    /*
     * Mantiene intacta la distribución V325.
     * Solo crea el fondo chocolate extendido.
     */
    html body
    #upsex-desktop-header-v1
    .upsex-v325-mainrow{
        position:relative!important;
        z-index:1!important;
        isolation:isolate!important;

        background-color:#382b28!important;
        background-image:
            radial-gradient(
                circle at 18% 18%,
                rgba(184,138,0,.06) 0,
                rgba(184,138,0,0) 34%
            ),
            linear-gradient(
                105deg,
                #302421 0%,
                #392b28 50%,
                #433330 100%
            )!important;

        border:0!important;
        outline:0!important;
        box-shadow:none!important;
    }

    /*
     * Extensión visual hasta los dos bordes.
     * No cambia tamaños, columnas ni posiciones.
     */
    html body
    #upsex-desktop-header-v1
    .upsex-v325-mainrow::before{
        content:""!important;

        position:absolute!important;
        top:0!important;
        bottom:0!important;
        left:50%!important;

        width:100vw!important;
        margin-left:-50vw!important;

        background-color:#382b28!important;
        background-image:
            radial-gradient(
                circle at 18% 18%,
                rgba(184,138,0,.06) 0,
                rgba(184,138,0,0) 34%
            ),
            linear-gradient(
                105deg,
                #302421 0%,
                #392b28 50%,
                #433330 100%
            )!important;

        border:0!important;
        outline:0!important;
        box-shadow:none!important;

        z-index:-1!important;
        pointer-events:none!important;
    }

    /*
     * Fuerza cuenta y carrito en una sola fila,
     * nuevamente a la derecha.
     */
    html body
    #upsex-desktop-header-v1
    .upsex-v325-actions-fixed{
        position:absolute!important;
        top:50%!important;
        right:clamp(24px,3.5vw,68px)!important;
        left:auto!important;
        bottom:auto!important;

        display:flex!important;
        flex-direction:row!important;
        flex-wrap:nowrap!important;
        align-items:center!important;
        justify-content:flex-end!important;

        width:auto!important;
        min-width:132px!important;
        max-width:190px!important;
        height:auto!important;

        margin:0!important;
        padding:0!important;
        gap:14px!important;

        transform:translateY(-50%)!important;

        background:transparent!important;
        border:0!important;
        outline:0!important;
        box-shadow:none!important;

        z-index:20!important;
    }

    html body
    #upsex-desktop-header-v1
    .upsex-v325-actions-fixed
    .upsex-v321-account-item,

    html body
    #upsex-desktop-header-v1
    .upsex-v325-actions-fixed
    .upsex-v321-cart-item,

    html body
    #upsex-desktop-header-v1
    .upsex-v325-actions-fixed
    .upsex-v323-account-item,

    html body
    #upsex-desktop-header-v1
    .upsex-v325-actions-fixed
    .upsex-v323-cart-item{
        position:relative!important;

        display:flex!important;
        flex:0 0 auto!important;
        align-items:center!important;
        justify-content:center!important;

        width:auto!important;
        min-width:54px!important;
        max-width:72px!important;

        margin:0!important;
        padding:0!important;

        float:none!important;
        clear:none!important;

        background:transparent!important;
        border:0!important;
        outline:0!important;
        box-shadow:none!important;
    }

    /*
     * Quita cortes verticales sin afectar
     * la cuadrícula interna.
     */
    html body
    #upsex-desktop-header-v1
    .upsex-v325-mainrow
    [class*="col-"],

    html body
    #upsex-desktop-header-v1
    .upsex-v325-mainrow
    .upsex-v32-logo{
        border-left:0!important;
        border-right:0!important;
        outline:0!important;
        box-shadow:none!important;
    }
}

/* UPSEX_V327_FULLWIDE_LAYOUT_END */

/* UPSEX_V328_LATERALES_START */

@media (min-width:768px){

    /*
     * Fondo exterior verdadero.
     * Sin 100vw, sin desplazamientos y sin desbordamiento.
     */
    html body #upsex-desktop-header-v1{
        width:100%!important;
        max-width:none!important;

        margin-left:0!important;
        margin-right:0!important;

        background:#382b28!important;

        border-left:0!important;
        border-right:0!important;
        outline:0!important;
        box-shadow:none!important;
    }

    /*
     * Toda la fila del logo, buscador e íconos
     * usa exactamente el mismo chocolate.
     */
    html body
    #upsex-desktop-header-v1
    .upsex-v325-mainrow{
        background:#382b28!important;

        border-left:0!important;
        border-right:0!important;
        outline:0!important;
        box-shadow:none!important;
    }

    /*
     * Elimina el pseudo-elemento 100vw que estaba
     * causando cortes y problemas de desbordamiento.
     */
    html body
    #upsex-desktop-header-v1
    .upsex-v325-mainrow::before{
        content:none!important;
        display:none!important;
        width:0!important;
        height:0!important;
        background:none!important;
        box-shadow:none!important;
    }

    /*
     * Los contenedores internos quedan transparentes.
     * Conservan completamente sus columnas y posiciones.
     */
    html body
    #upsex-desktop-header-v1
    .upsex-v325-mainrow > .container,

    html body
    #upsex-desktop-header-v1
    .upsex-v325-mainrow > .container-fluid,

    html body
    #upsex-desktop-header-v1
    .upsex-v325-mainrow > .row{
        background:transparent!important;

        border-left:0!important;
        border-right:0!important;
        outline:0!important;
        box-shadow:none!important;
    }

    /*
     * Conserva cuenta y carrito juntos a la derecha.
     * No permite que bajen debajo del logo.
     */
    html body
    #upsex-desktop-header-v1
    .upsex-v325-actions-fixed{
        position:absolute!important;

        top:50%!important;
        right:clamp(24px,3.5vw,68px)!important;
        bottom:auto!important;
        left:auto!important;

        display:flex!important;
        flex-direction:row!important;
        flex-wrap:nowrap!important;
        align-items:center!important;
        justify-content:flex-end!important;

        width:auto!important;
        min-width:132px!important;
        max-width:190px!important;

        margin:0!important;
        padding:0!important;
        gap:14px!important;

        transform:translateY(-50%)!important;

        background:transparent!important;
        border:0!important;
        box-shadow:none!important;

        z-index:30!important;
    }
}

/* UPSEX_V328_LATERALES_END */