/* ============================================================
   ESTADOS BÁSICOS — Sidebar
============================================================ */
#bariz.closing {
    transform: translateX(-18px);
    opacity: 0.35;
    transition: transform .25s ease, opacity .25s ease;
}

#bariz.open {
    transform: translateX(0);
    opacity: 1;
    transition: transform .25s ease, opacity .25s ease;
}


/* ============================================================
   OVERLAY VISIONOS
============================================================ */
#bariz-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.28);
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 998;
}

#bariz.open ~ #bariz-overlay {
    opacity: 1;
    pointer-events: auto;
}


/* ============================================================
   ANIMACIONES — sacadas fuera del @media (solución Dreamweaver)
============================================================ */
@keyframes visionOpen {
    0% {
        transform: translateX(-40px) scale(0.94);
        opacity: 0;
        filter: blur(8px);
    }
    60% {
        transform: translateX(4px) scale(1.02);
        opacity: 1;
        filter: blur(2px);
    }
    100% {
        transform: translateX(0) scale(1);
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes visionClose {
    0% {
        transform: translateX(0) scale(1);
        opacity: 1;
        filter: blur(0);
    }
    100% {
        transform: translateX(-35px) scale(0.96);
        opacity: 0.35;
        filter: blur(6px);
    }
}


/* ============================================================
   SOLO MÓVIL — Activación de animaciones
============================================================ */
@media (max-width: 980px) {

    /* abrir */
    #bariz.open {
        animation: visionOpen .38s cubic-bezier(0.18, 0.84, 0.32, 1) forwards;
    }

    /* cerrar */
    #bariz.closing {
        animation: visionClose .32s cubic-bezier(0.33, 0, 0.33, 1) forwards;
    }

    /* overlay activo */
    #bariz.open ~ #bariz-overlay {
        opacity: 1;
        pointer-events: auto;
    }
}



/* ============================================================
   GOLD SHIMMER APPLE STYLE — LENTO + ACTIVO
============================================================ */

.acorbariz > button {
    font-weight: 600;
    position: relative;
    overflow: hidden; /* para contener el brillo */
}

/* Capa de shimmer */
.acorbariz > button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 35%;
    height: 100%;

    background: linear-gradient(
        100deg,
        rgba(255,255,255,0) 0%,
        rgba(255,240,200,0.45) 45%,
        rgba(255,255,255,0) 100%
    );

    opacity: 0;
    transform: skewX(-18deg);
}

/* Activación en hover */
.acorbariz > button:hover::before {
    opacity: 1;
    animation: appleShimmerSlow 1.05s ease-out forwards;
}

/* Activación cuando está activo (clic) */
.acorbariz > button.active::before {
    opacity: 1;
    animation: appleShimmerSlow 1.05s ease-out forwards;
}

/* Movimiento lento y elegante */
@keyframes appleShimmerSlow {
    0% {
        left: -120%;
    }
    100% {
        left: 165%;
    }
}







/* ============================================================
   SUBMENÚ — TIPOGRAFÍA ELEGANTE + BULLET PREMIUM
============================================================ */


/* Texto del submenú */
.barizpanel a,
.barizpanel button {
    width: 100%;
    display: block;
   font-weight: 400 !important;

    background: transparent;
    border: none;
    text-align: left;

    padding: 10px 14px;
    margin: 4px 0;

    border-radius: 10px;

    font-family: "Inter", sans-serif;
    font-size: 15.5px;

    color: #4a3c3c;
    letter-spacing: -0.15px;

    cursor: pointer;

    transition: background .25s ease, color .25s ease, padding-left .25s ease;
}

/* Hover submenú */
.barizpanel a:hover,
.barizpanel button:hover {
    background: rgba(210,184,134,0.22);
    color: var(--vino);
    padding-left: 18px;
}

/* Bullet institucional */
.barizpanel a::before,
.barizpanel button::before {
    content: "•";
    color: rgba(210,184,134,0.85);
    margin-right: 8px;
    font-size: 15px;
}

/* Estado ACTIVO — tanto en menú principal como submenú */
#bariz .active-item {
    background: rgba(210,184,134,0.25);
    color: var(--vino) !important;
    font-weight: 700 !important;
    border-radius: 12px;

    box-shadow: inset 0 0 0 1.4px rgba(210,184,134,0.55),
                0 2px 6px rgba(0,0,0,0.10);

    padding-left: 20px;
}


























/* ============================================================
   VISIONOS — WEIGHT DROP + SOFT PARALLAX (PREMIUM)
============================================================ */

/* Panel cerrado */
.barizpanel {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform-origin: top;

    transform: translateY(-12px); /* peso hacia arriba */
    filter: brightness(0.92);

    transition:
        max-height .70s cubic-bezier(.32,.02,.24,1),   /* sin rebotes */
        opacity .55s ease-out,
        transform .70s cubic-bezier(.32,.02,.24,1),
        filter .65s ease-out;
}

/* Panel abierto */
.barizpanel.weight-open {
    max-height: 900px;     /* suficiente */
    opacity: 1;

    /* " caída elegante " */
    transform: translateY(0);

    /* ligera recuperación lumínica tipo VisionOS */
    filter: brightness(1);

    /* SEGUNDA capa: aureola premium */
    position: relative;
}

.barizpanel.weight-open::before {
    /* halo dorado sedoso */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 46px;

    background: linear-gradient(
        to bottom,
        rgba(255,226,170,0.28),
        rgba(255,226,170,0.06),
        transparent
    );

    opacity: 0;
    transform: translateY(-18px) scaleY(.85);
    pointer-events: none;

    transition:
        opacity .75s ease-out,
        transform .75s cubic-bezier(.32,.02,.24,1);
}

.barizpanel.weight-open.loaded::before {
    opacity: 1;
    transform: translateY(0) scaleY(1);
}