/* Scrollbar Chrome / Edge / Safari */

html {
  --sb-track-color: #111111;
  --sb-thumb-color: #820000;
  --sb-size: 10px;
}

/* ancho del scrollbar */
html::-webkit-scrollbar {
  width: var(--sb-size);
}

/* fondo del track */
html::-webkit-scrollbar-track {
  background: var(--sb-track-color);
}

/* barra (thumb) */
html::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 3px;
}

/* hover opcional */
html::-webkit-scrollbar-thumb:hover {
  background: #a30000;
}





/*==========================
ANCHO DE LA LINEA DEL MENU HOVER
==========================*/
.menu-imperio .elementor-item:after {
    width: 8% !important;
    left: 47% !important;
    transform: translateX(-50%);
}


/*==========================
BOTONES CON BORDE Y QUIEBRE
==========================*/

.imperio-btn .elementor-button {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto !important;
    max-height: 40px;
    padding: 10px 20px !important;
    background: transparent !important;
    border: none !important;
    overflow: visible;
    line-height: 1;
    text-align: center;
    color: var(--imperio-text) !important;
}

/* BORDE 2PX REAL */
.imperio-btn .elementor-button:before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--imperio-primary);
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - 18px),
        calc(100% - 18px) 100%,
        0 100%,
        0 calc(100% - 2px),
        calc(100% - 20px) calc(100% - 2px),
        calc(100% - 2px) calc(100% - 20px),
        calc(100% - 2px) 2px,
        2px 2px,
        2px calc(100% - 2px),
        0 calc(100% - 2px)
    );
    filter: 
        drop-shadow(0 0 3px var(--imperio-primary))
        drop-shadow(0 0 8px var(--imperio-primary));
    z-index: 0;
    pointer-events: none;
}

.imperio-btn .elementor-button-content-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.imperio-btn .elementor-button span,
.imperio-btn .elementor-button i,
.imperio-btn .elementor-button-text {
    position: relative;
    z-index: 1;
    color: var(--imperio-text) !important;
    transition: color 0.3s ease;
}

/* HOVER */
.imperio-btn .elementor-button:hover,
.imperio-btn .elementor-button:hover .elementor-button-text,
.imperio-btn .elementor-button:hover span,
.imperio-btn .elementor-button:hover i {
    color: var(--imperio-primary) !important;
}

/*==========================
DIVIDOR DE CONTENEDORES ABAJO
==========================*/

.divider-bottom {
  position: relative;
}

.divider-bottom::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);

  width: 99%;
  height: 2px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(96, 96, 96, 0.7),
    transparent
  );

  pointer-events: none;
}
/*==========================
DIVIDOR DERECHO PARA TODOS LOS DISPOSITIVOS
==========================*/

.divider-sides {
    position: relative;
}

.divider-sides::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;

    width: 3px;
    height: 100%;

    background: linear-gradient(
        180deg,
        transparent,
        rgba(96, 96, 96, 0.7),
        transparent
    );

    pointer-events: none;
    z-index: 999;
}


/*==========================
DIVIDOR DERECHO SOLO DESKTOP
==========================*/

@media (min-width: 1025px) {

    .divider-sides-desktop {
        position: relative;
    }

    .divider-sides-desktop::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;

        width: 3px;
        height: 100%;

        background: linear-gradient(
            180deg,
            transparent,
            rgba(96, 96, 96, 0.7),
            transparent
        );

        pointer-events: none;
        z-index: 999;
    }

}

/*==========================
BORDE LOOP ITEM
==========================*/

.dark-card{
    position: relative;
    background: #000;

    border: 2px solid transparent;

    border-image: linear-gradient(
        -25deg,
        #4a4a4a 0%,
        #2f2f2f 25%,
        #1f1f1f 50%,
        #121212 75%,
        #000000 100%
    ) 1;
}