:root {
    /* Variables generales */


    /* Variables Card Electricidad */
    --electric-border-color: #dd8448;
    --electric-light-color: oklch(from var(--electric-border-color) l c h);
    --gradient-color: oklch(from var(--electric-border-color) 0.3 calc(c / 2) h / 0.4);
    --color-neutral-900: oklch(0.185 0 0);
    --alto-card-electric: 248px;

    --alto-card-ofertas: 250px;
}


/*******************************************************************************************/
/*   SLIDER OFERTAS                                                                        */
/*******************************************************************************************/

.slider-ofertas {
    display: flex;
    position: relative;
    justify-self: center;
    animation: slide-card-ofertas 2s forwards;
    padding: 0px;
    margin: 0px;
    z-index: 1;
    top: 0px;
    overflow: hidden;
}

@keyframes slide-card-ofertas {
    from {
        transform: translateY(-5%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.slider-ofertas .container-ofertas {
    width: 100%;
    margin: 10px;
    height: auto;
    border-radius: 7px;
    /*border: 1px solid #33333370;*/
    box-shadow: 0px 0px 10px 2.5px rgb(from var(--color-base-Negro) r g b / 80%);
    padding-bottom: 20px;
    justify-content: center;
    gap: 20px;
    overflow: hidden;
}

.slider-ofertas .container-ofertas .title-card-ofertas {
    margin-bottom: 15px;
    border-bottom: 1px solid var(--color-base-Negro);
    background: var(--color-base-Negro);
    color: var(--color-base-Blanco);
    margin: 0px;
    padding: 5px 20px;
    border-radius: 7px 7px 0px 0px;
    text-align: left;

    span {
        color: var(--color-base-Blanco);
        font-weight: bold;
        font-size: 12px;
    }

    i {
        color: var(--color-base-Blanco);
        font-weight: bold;
        font-size: 16px;
        padding-left: 10px;
    }

    hr {
        margin: 0px 0px 1px 0px;
    }
}

.slider-ofertas .container-ofertas .title-card-ofertas:hover {

    span,
    i {
        color: var(--color-base-Dorado);
    }

    hr {
        background: var(--color-base-Dorado);
    }
}

.slider-ofertas .container-ofertas h1 {
    font-size: 14px;
    font-weight: normal;
    display: flex;
    position: relative;
    margin: 5px 0 0 0;
    padding: 0;
    justify-content: center;
}

.slider-ofertas .container-ofertas .home-title span {
    position: relative;
    overflow: hidden;
    display: block;
    line-height: 1.2;
    padding: 5px 20px;
    margin: 0;
    background: var(--color-base-Azul);
    color: var(--color-base-Blanco);
}

.slider-ofertas .container-ofertas .home-title span::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 101%;
    background: var(--color-base-Blanco);
    animation: a-ltr-after 2s cubic-bezier(.77, 0, .18, 1) forwards;
    transform: translateX(-101%);
}

.slider-ofertas .container-ofertas .home-title span::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 101%;
    background: var(--color-base-Blanco);
    animation: a-ltr-before 5s cubic-bezier(.77, 0, .18, 1) forwards infinite;
    transform: translateX(0);
}

.slider-ofertas .container-ofertas .home-title span:nth-of-type(1)::before,
.slider-ofertas .container-ofertas .home-title span:nth-of-type(1)::after {
    animation-delay: 1s;
}

.slider-ofertas .container-ofertas .home-title span:nth-of-type(2)::before,
.slider-ofertas .container-ofertas .home-title span:nth-of-type(2)::after {
    animation-delay: 1.5s;
}

@keyframes a-ltr-after {
    0% {
        transform: translateX(-100%)
    }

    100% {
        transform: translateX(101%)
    }
}

@keyframes a-ltr-before {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(200%)
    }
}

.slider-ofertas .container-ofertas .c-slider-ofertas {
    display: flex;
    flex-wrap: wrap;
    flex-grow: row wrap;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: 0px;
    padding: 0px;
    justify-self: center;
    width: 100%;
}

.slider-ofertas .container-ofertas .c-slider-ofertas .c-slider-cards-ofertas {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;

    width: 100%;
    padding: 0px;
    margin: 0px;
    height: auto;
}

.slider-ofertas .container-ofertas .footer-card {
    display: flex;
    position: absolute;
    align-items: flex-start;
    justify-content: center;
    justify-self: center;
    margin: 0;
    padding: 0;
    border-radius: 200px 200px 0px 0px;
    background: rgb(from var(--color-base-Azul) r g b / 100%);
    color: var(--color-base-Blanco);
    height: 50px;
    width: 70%;
    bottom: -25px;
    content: var(--title-app);
    font-size: 11px;
    font-weight: 600;
    border: 1px solid rgb(from var(--color-base-Negro) r g b / 10%);
    box-shadow: 0px 0px 5px 1px rgb(from var(--color-base-Negro) r g b / 70%);
}

.slider-ofertas .container-ofertas .footer-card::before {
    content: var(--title-app);
}

/******************************************************************************************/
/* Card Ofertas - slider */
/******************************************************************************************/

.card-oferta {
    display: flex;
    position: relative;
    justify-self: center;
    aspect-ratio: 10 / 16;
    width: 510px;
    height: 250px;
    margin: 5px 10px 10px 10px;
    padding: 10px;
    border-radius: 7px;
    box-shadow: 0px 0px 7px 0.5px rgb(from var(--color-base-Negro) r g b / 60%);
    overflow: hidden;
}

.card-oferta-electricidad-flotante {
    display: flex;
    position: relative;
    justify-self: center;
    aspect-ratio: 10 / 16;
    width: 510px;
    height: 250px;
    margin: 5px 10px 10px 10px;
    padding: 0px;
    border-radius: 7px;
    box-shadow: 0px 0px 7px 0.5px rgb(from var(--color-base-Negro) r g b / 60%);
    overflow: visible;

}

.card-oferta .card-oferta-electricidad {
    display: flex;
    position: relative;
    justify-self: center;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 10px;
    border-radius: 7px;
    overflow: hidden;
    z-index: -1;

}

/* Contenedor de las Líneas en movimiento vertical ascendente de la Card CCTV */
/**********************************************************************/
.screen-overlay {
    background: linear-gradient(rgb(from var(--color-base-Azul) r g b / 0.15),
            rgb(from var(--color-base-Azul) r g b / 0.15) 3px,
            transparent 3px,
            transparent 9px);
    background-size: 100% 9px;
    height: 100%;
    width: 100%;
    animation: pan-overlay 22s infinite linear;
    position: absolute;
    z-index: 2;
    left: 0px;
    top: 0px;
}

/* Efecto del movimiento vertical ascendente de las líneas de la Card CCTV */
@keyframes pan-overlay {
    from {
        background-position: 0% 0%;
    }

    to {
        background-position: 0% -100%;
    }
}


/* Efecto de Movimiento de la Imagen de la Card */
@keyframes pan-image {
    0% {
        background-position: 36% 42%;
        background-size: 106%;
    }

    20% {
        background-position: 30% 35%;
        background-size: 106%;
    }

    20.0001% {
        /* -- View 2 -- */
        background-position: 60% 85%;
        background-size: 200%;
    }

    40% {
        background-position: 49% 81%;
        background-size: 200%;
    }

    40.0001% {
        /* -- View 3 -- */
        background-position: 80% 42%;
        background-size: 200%;
    }

    60% {
        background-position: 84% 33%;
        background-size: 200%;
    }

    60.0001% {
        /* -- View 4 -- */
        background-position: 0% 0%;
        background-size: 106%;
    }

    80% {
        background-position: 15% 4%;
        background-size: 150%;
    }

    80.0001% {
        /* -- View 5 -- */
        background-position: 80% 10%;
        background-size: 130%;
    }

    100% {
        background-position: 72% 14%;
        background-size: 106%;
    }
}


/* Contenedor Overlay */
/**********************************************************************/
.card-oferta .container-overlay {
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.card-oferta .container-overlay-oferta-cctv {
    background-color: rgb(from var(--color-base-Azul) r g b / 70%);
}

.card-oferta .container-overlay-oferta-diseño {
    background: rgb(from var(--color-base-Negro) r g b / 20%);
}


/* Contenedor de la Imagen */
/**********************************************************************/
.card-oferta .screen-image {
    display: flex;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 1;
    left: 0px;
    top: 0px;
    background-size: 300%;
    background-position: 0% 0%;
    animation: pan-image 15s linear infinite;
    margin: 0;
    padding: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    object-fit: cover;
}

.card-oferta .screen-img-oferta-cctv {
    background-image: url("/img/CCTV-cards.png");
    filter: sepia(100%) hue-rotate(160deg);
    opacity: 0.6;
    display: flex;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 1;
}

.card-oferta .screen-img-oferta-diseño {
    background-image: url("/img/diseño-general-ofertas.png");
    filter: sepia(0%) hue-rotate(0deg);
    opacity: 1;
    border: 0px;
    top: 6px;
    left: 6px;
    height: calc(100% - 12px);
    width: calc(100% - 12px);
    display: flex;
}

.card-oferta .screen-img-oferta-electricidad {
    /*background: linear-gradient(-30deg,
            var(--gradient-color),
            transparent,
            var(--gradient-color)),
        linear-gradient(to bottom,
            var(--color-neutral-900),
            var(--color-neutral-900));
    background-image: url("/img/electricidad-card.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;*/

    background-image: url("/img/electricidad-card.png");
    filter: sepia(0%) hue-rotate(0deg);
    opacity: 1;
}

.card-oferta .screen-img-oferta-informatica {
    background-image: url("/img/informatica-general.png");
    filter: sepia(0%) hue-rotate(0deg);
    opacity: 1;
    border: 20px solid var(--color-base-Negro);
    border-bottom: 25px solid var(--color-base-Negro);
}

.card-oferta .screen-img-oferta-antena-wifi {
    background-image: url("/img/antena-wifi-conexion.png");
    filter: sepia(0%) hue-rotate(0deg);
    opacity: 1;
}

.card-oferta .screen-img-oferta-bicicleta {
    background-image: url("/img/bicicletas-bg.png");
    filter: sepia(0%) hue-rotate(0deg);
    opacity: 1;
}
.card-oferta .screen-img-oferta-homologacion-celular {
    background-image: url("/img/homologacion-celular.png");
    filter: sepia(0%) hue-rotate(0deg);
    opacity: 1;
}
.card-oferta .screen-img-oferta-termofusion-ppr {
    background-image: url("/img/termofusion-ppr-oferta.png");
    filter: sepia(0%) hue-rotate(0deg);
    opacity: 1;
}


/* Contenedor del Borde de la Card */
/**********************************************************************/
.card-oferta .screen-border {
    display: flex;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 0;
    left: 0px;
    top: 0px;
}

.card-oferta .screen-border-oferta-diseño {
    background: radial-gradient(circle at top left, red, yellow, blue);
    border: 7px solid transparent;
}

/*
.card-oferta .screen-border-oferta-electricidad {
    background: transparent;
    border: 10px solid rgb(from var(--color-base-Blanco) r g b / 90%);
    z-index: 1;   
}*/

.card-oferta .screen-border-oferta-antena-wifi {
    background: transparent;
    border: 10px solid rgb(from var(--color-base-Blanco) r g b / 80%);
    z-index: 1;
}

.card-oferta .screen-border-oferta-bicicleta {
    background: transparent;
    border: 10px solid rgb(from var(--color-base-Blanco) r g b / 80%);
    z-index: 1;
}
.card-oferta .screen-border-oferta-homologacion-celular {
    background: transparent;
    border: 10px transparent;
    z-index: 1;
}
.card-oferta .screen-border-oferta-termofusion-ppr {
    background: transparent;
    border: 10px transparent;
    z-index: 1;
}


/* Contenedor de la Cinta - Ribbon */
/**********************************************************************/
.card-oferta .ribbon {
    position: absolute;
    top: -3px;
    left: -25px;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* El texto en diagonal */
.card-oferta .ribbon span {
    display: flex;
    position: absolute;
    width: 145px;
    padding: 4px 10px 4px 25px;
    /*background-color: #ff0000;
    color: #fff;*/
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    justify-content: center;
    text-transform: uppercase;
    transform: rotate(-55deg);
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);*/
    z-index: 200;
}

/* Pestaña inferior: Doblez 3D izquierdo */
/*
.card-oferta .ribbon::before {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 0;
    border-left: 35px solid transparent;
    border-top: 40px solid #ff0fff;
     transform: rotate(35deg);
    z-index: 201;
}*/

/* Pestaña superior: Doblez 3D de arriba */
/*
.card-oferta .ribbon::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #0000ff;
    z-index: 1;
}*/

.card-oferta .ribbon-oferta-cctv span {
    background: rgb(from var(--color-base-Azul) r g b /90%);
    color: var(--color-base-Blanco);
    box-shadow: 0px 0px 10px 1px var(--color-base-Blanco);
}

.card-oferta .ribbon-oferta-diseño span {
    background: rgb(from var(--color-purple) r g b / 90%);
    color: var(--color-base-Blanco);
    box-shadow: 0px 0px 10px 1px var(--color-base-Blanco);
}

.card-oferta .ribbon-oferta-electricidad span {
    background: rgb(from var(--color-base-Dorado) r g b / 90%);
    color: var(--color-base-Negro);
    border: 1px solid var(--color-base-Blanco);
    box-shadow: 0px 0px 10px 1px var(--color-base-Blanco);
}

.card-oferta .ribbon-oferta-informatica span {
    background: var(--color-base-SelecNavBar);
    color: var(--color-base-Negro);
    border: 1px solid var(--color-base-Negro);
    box-shadow: 0px 0px 10px 1px var(--color-base-Blanco);
}

.card-oferta .ribbon-oferta-antena-wifi span {
    background: var(--color-A1);
    color: var(--color-base-Negro);
    border: 1px solid var(--color-base-Blanco);
    box-shadow: 0px 0px 10px 1px var(--color-base-Blanco);
}

.card-oferta .ribbon-oferta-bicicleta span {
    background: var(--color-B);
    color: var(--color-base-Blanco);
    border: 1px solid var(--color-base-Blanco);
    box-shadow: 0px 0px 10px 1px var(--color-base-Blanco);
}
.card-oferta .ribbon-oferta-homologacion-celular span {
    background: var(--color-M-Y1);
    color: var(--color-base-Blanco);
    border: 1px solid var(--color-base-Blanco);
    box-shadow: 0px 0px 10px 1px var(--color-base-Blanco);
}
.card-oferta .ribbon-oferta-termofusion-ppr span {
    background: var(--color-M-M1);
    color: var(--color-base-Blanco);
    border: 1px solid var(--color-base-Blanco);
    box-shadow: 0px 0px 10px 1px var(--color-base-Blanco);
}



/* Contenedor del Contenido de la Card */
/**********************************************************************/
.card-oferta .screen-content {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
    z-index: 3;
    padding: 10px;
    border-radius: 4px;
    height: 100%;
    width: 100%;
    gap: 15px;
}

.card-oferta .screen-content-oferta-cctv {
    border: 1px solid rgb(from var(--color-base-Azul) r g b / 95%);
}

.card-oferta .screen-content-oferta-cctv:before {
    content: "";
    height: 8px;
    width: 8px;
    position: absolute;
    border-radius: 100px 100px 0px 0px;
    background: rgb(from var(--color-base-Blanco) r g b / 50%);
    width: 70%;
    height: 30px;
    margin: 0;
    bottom: -30px;
    left: cal(50% - 50px);
}

.card-oferta .screen-content-oferta-diseño {
    border: none;
}

.card-oferta .screen-content-oferta-electricidad {
    border: none;
}

.card-oferta .screen-content-oferta-informatica {
    border: none;
    margin: 5px 15px 40px 15px;
}

.card-oferta .screen-content-oferta-antena-wifi {
    border: none;
}

.card-oferta .screen-content-oferta-bicicleta {
    border: none;
}
.card-oferta .screen-content-oferta-homologacion-celular {
    border: none;
}
.card-oferta .screen-content-oferta-termofusion-ppr {
    border: none;
}
.card-oferta .screen-content-oferta-termofusion-ppr:before {
    content: "";
    height: 8px;
    width: 8px;
    position: absolute;
    border-radius: 100px 100px 0px 0px;
    background: rgb(from #86986E r g b / 80%);
    /*border: 1px solid var(--color-base-Blanco);*/
    box-shadow: 0px 0px 7px 1px var(--color-base-Blanco);
    width: 90%;
    height: 30px;
    margin: 0;
    bottom: -30px;
    left: cal(50% - 50px);
}







/* Contenedor del Titulo de la Card (Icono y Nombre) */
.card-oferta .screen-content .title-ofertas {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    /*justify-self: flex-start;*/
    flex-direction: row;
    gap: 20px;
    border-radius: 4px;
    width: 100%;
    padding: 5px;
    margin: 0;
}

.card-oferta .screen-content .title-oferta-cctv {
    border: 1px solid rgb(from var(--color-base-Azul) r g b / 95%);
}

.card-oferta .screen-content .title-oferta-diseño {
    border: 1px solid rgb(from var(--color-base-Blanco) r g b / 50%);
}

.card-oferta .screen-content .title-oferta-electricidad {
    border: 1px solid rgb(from var(--color-base-Dorado) r g b / 30%);
}

.card-oferta .screen-content .title-oferta-informatica {
    border: 1px solid rgb(from var(--color-base-Blanco) r g b / 50%);
}

.card-oferta .screen-content .title-oferta-antena-wifi {
    border: 1px solid rgb(from var(--color-base-Blanco) r g b / 50%);
}

.card-oferta .screen-content .title-oferta-bicicleta {
    border: 1px solid rgb(from var(--color-base-Blanco) r g b / 50%);
}

.card-oferta .screen-content .title-oferta-homologacion-celular {
    border: 1px solid rgb(from var(--color-base-Blanco) r g b / 50%);
}
.card-oferta .screen-content .title-oferta-termofusion-ppr {
    border: 1px solid rgb(from var(--color-base-Blanco) r g b / 50%);
}


/* Icono del Titulo de la Card */
.card-oferta .screen-content .title-ofertas .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    font-size: 20px;
}

.card-oferta .screen-content .title-ofertas .icon-oferta-cctv {
    background: var(--color-base-Azul);
    color: var(--color-base-Blanco);
    border: 1px solid rgb(from var(--color-base-Negro) r g b / 15%);
    box-shadow: 0px 0px 10px 1px var(--color-base-Blanco);
}

.card-oferta .screen-content .title-ofertas .icon-oferta-diseño {
    background: var(--color-base-Negro);
    color: var(--color-base-Blanco);
    border: 1px solid rgb(from var(--color-base-Negro) r g b / 15%);
    box-shadow: 0px 0px 10px 1px var(--color-base-Blanco);
}

.card-oferta .screen-content .title-ofertas .icon-oferta-electricidad {
    background: var(--color-base-Dorado);
    color: var(--color-base-Negro);
    border: 1px solid rgb(from var(--color-base-Negro) r g b / 15%);
    box-shadow: 0px 0px 10px 1px var(--color-base-Blanco);
}

.card-oferta .screen-content .title-ofertas .icon-oferta-informatica {
    background: var(--color-base-SelecNavBar);
    color: var(--color-base-Negro);
    border: 1px solid rgb(from var(--color-base-Negro) r g b / 15%);
    box-shadow: 0px 0px 10px 1px var(--color-base-Blanco);
}

.card-oferta .screen-content .title-ofertas .icon-oferta-antena-wifi {
    background: var(--color-A1);
    color: var(--color-base-Negro);
    border: 1px solid rgb(from var(--color-base-Negro) r g b / 15%);
    box-shadow: 0px 0px 10px 1px var(--color-base-Blanco);
}

.card-oferta .screen-content .title-ofertas .icon-oferta-bicicleta {
    background: var(--color-B);
    color: var(--color-base-Blanco);
    border: 1px solid rgb(from var(--color-base-Negro) r g b / 15%);
    box-shadow: 0px 0px 10px 1px var(--color-base-Blanco);
}
.card-oferta .screen-content .title-ofertas .icon-oferta-homologacion-celular {
    background: var(--color-M-Y1);
    color: var(--color-base-Blanco);
    border: 1px solid rgb(from var(--color-base-Negro) r g b / 15%);
    box-shadow: 0px 0px 10px 1px var(--color-base-Blanco);
}
.card-oferta .screen-content .title-ofertas .icon-oferta-termofusion-ppr {
    background: var(--color-M-M1);
    color: var(--color-base-Blanco);
    border: 1px solid rgb(from var(--color-base-Negro) r g b / 15%);
    box-shadow: 0px 0px 10px 1px var(--color-base-Blanco);
}

/* Nombre del Titulo de la Card */
.card-oferta .screen-content .title-ofertas .name {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    line-height: 15px;
    letter-spacing: 0.5px;
    padding: 7px 15px;
    background: rgb(from var(--color-base-Negro) r g b /90%);
    color: var(--color-base-Blanco);
    border: 1px solid var(--color-base-Dorado);
    margin: 0;
}

/*
.card-cctv .screen-content .title-ofertas .name:before,
.card-cctv .screen-content .title-ofertas .name:after {
  content: "";
  height: 8px;
  width: 8px;
  position: absolute;
  border: 2px solid var(--color-base-Blanco);
  border-radius: 50%;
  margin: 0;
}

.card-cctv .screen-content .title-ofertas .name:before {
  top: 55%;
  right: -1.5rem;
}

.card-cctv .screen-content .title-ofertas .name:after {
  top: 45%;
  left: -1.5rem;
}
*/

/* Contenedor de la descripcion de % descuento de la oferta de la Card */
.card-oferta .screen-content .descripcion-oferta {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.card-oferta .screen-content .descripcion-oferta .porcentaje-oferta {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    border-radius: 4px 0px 0px 4px;
    font-size: 48px;
    font-weight: bold;
    color: var(--color-base-Dorado);
    background: rgb(from var(--color-base-Negro) r g b / 85%);
    height: 100%;
}

.card-oferta .screen-content .descripcion-oferta .text-oferta {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: left;
    text-align: justify;
    padding: 10px 15px;
    border-radius: 0px 4px 4px 0px;
    border-left: 1px solid var(--color-base-Blanco);
    color: var(--color-base-Blanco);
    font-size: 12px;
    line-height: 15px;
    text-align: justify;
    background: rgb(from var(--color-base-Negro) r g b / 85%);
    height: 100%;
    width: 100%;
}

/* Boton de la Card */
.card-oferta .screen-content .btn-oferta {
    font-size: 12px;
    font-weight: 400;
    text-decoration: none;
    padding: 7px 10px;
    border-radius: 4px;
}

/* card CCTV */
.card-oferta .screen-content .btn-oferta-cctv {
    background: rgb(from var(--color-base-Azul) r g b / 90%);
    color: var(--color-base-Blanco);
    border: 0.5px solid var(--color-base-Blanco);
    box-shadow: 0px 0px 10px 0.5px var(--color-base-Blanco);
}

.card-oferta .screen-content .btn-oferta-cctv:is(:hover, :focus) {
    background: var(--color-base-Azul);
    color: var(--color-base-Blanco);
    border: 2px solid var(--color-base-Blanco);
}

/* Card Diseño */
.card-oferta .screen-content .btn-oferta-diseño {
    background: rgb(from var(--color-base-Negro) r g b / 90%);
    color: var(--color-base-Blanco);
    border: 0.5px solid var(--color-base-Blanco);
    box-shadow: 0px 0px 10px 0.5px var(--color-base-Blanco);
}

.card-oferta .screen-content .btn-oferta-diseño:is(:hover, :focus) {
    background: var(--color-base-Negro);
    color: var(--color-base-Blanco);
    border: 2px solid var(--color-base-Dorado);
}

/* Card Electricidad */
.card-oferta .screen-content .btn-oferta-electricidad {
    background: rgb(from var(--color-base-Dorado) r g b / 90%);
    color: var(--color-base-Negro);
    border: 0.5px solid var(--color-base-Blanco);
    box-shadow: 0px 0px 10px 0.5px var(--color-base-Blanco);
}

.card-oferta .screen-content .btn-oferta-electricidad:is(:hover, :focus) {
    background: var(--color-base-Dorado);
    color: var(--color-base-Negro);
    border: 2px solid var(--color-base-Negro);
    box-shadow: 0px 0px 10px 0.5px var(--color-base-Blanco);
}

/* Card Informática */
.card-oferta .screen-content .btn-oferta-informatica {
    background: rgb(from var(--color-base-SelecNavBar) r g b / 85%);
    color: var(--color-base-Negro);
    border: 0.5px solid var(--color-base-Blanco);
    box-shadow: 0px 0px 2px 0.5px var(--color-base-Negro);
    margin-top: -5px;
    margin-bottom: 15px;
}

.card-oferta .screen-content .btn-oferta-informatica:is(:hover, :focus) {
    background: var(--color-base-Blanco);
    color: var(--color-base-Negro);
    border: 2px solid var(--color-base-Negro);
    box-shadow: 0px 0px 10px 0.5px var(--color-base-Blanco);
}

/* Card Antena Wifi */
.card-oferta .screen-content .btn-oferta-antena-wifi {
    background: rgb(from var(--color-A1) r g b / 85%);
    color: var(--color-base-Negro);
    border: 0.5px solid var(--color-base-Blanco);
    box-shadow: 0px 0px 10px 0.5px var(--color-base-Blanco);
}

.card-oferta .screen-content .btn-oferta-antena-wifi:is(:hover, :focus) {
    background: var(--color-A1);
    color: var(--color-base-Negro);
    border: 2px solid var(--color-base-Negro);
    box-shadow: 0px 0px 10px 0.5px var(--color-base-Blanco);
}

/* Card bicicleta */
.card-oferta .screen-content .btn-oferta-bicicleta {
    background: rgb(from var(--color-B) r g b / 85%);
    color: var(--color-base-Blanco);
    border: 0.5px solid var(--color-base-Blanco);
    box-shadow: 0px 0px 10px 0.5px var(--color-base-Blanco);
}

.card-oferta .screen-content .btn-oferta-bicicleta:is(:hover, :focus) {
    background: var(--color-B);
    color: var(--color-base-Blanco);
    border: 2px solid var(--color-base-Blanco);
    box-shadow: 0px 0px 10px 0.5px var(--color-base-Blanco);
}

/* Card homologación celular */
.card-oferta .screen-content .btn-oferta-homologacion-celular {
    background: rgb(from var(--color-M-Y1) r g b / 85%);
    color: var(--color-base-Blanco);
    border: 0.5px solid var(--color-base-Blanco);
    box-shadow: 0px 0px 10px 0.5px var(--color-base-Blanco);
}

.card-oferta .screen-content .btn-oferta-homologacion-celular:is(:hover, :focus) {
    background: var(--color-M-Y1);
    color: var(--color-base-Blanco);
    border: 2px solid var(--color-base-Blanco);
    box-shadow: 0px 0px 10px 0.5px var(--color-base-Blanco);
}

/* Card Termofusión PPR */
.card-oferta .screen-content .btn-oferta-termofusion-ppr {
    background: rgb(from var(--color-M-M1) r g b / 85%);
    color: var(--color-base-Blanco);
    border: 0.5px solid var(--color-base-Blanco);
    box-shadow: 0px 0px 10px 0.5px var(--color-base-Blanco);
}

.card-oferta .screen-content .btn-oferta-termofusion-ppr:is(:hover, :focus) {
    background: var(--color-M-M1);
    color: var(--color-base-Blanco);
    border: 2px solid var(--color-base-Blanco);
    box-shadow: 0px 0px 10px 0.5px var(--color-base-Blanco);
}

/* Icono del Boton de la Card */
.card-oferta .screen-content .btn-oferta i {
    font-size: 14px;
}




/* Elementos Extras en la Card */
/****************************************************************************/

.card-oferta .cam-equipo {
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    justify-self: center;
    z-index: 10;
    border-radius: 50%;
    height: 15px;
    width: 15px;
    top: 3px;
    left: calc(50% - 5px);
    background: rgb(from var(--color-base-SelecNavBar) r g b /50%);
}

.card-oferta .cam-equipo span {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    margin: 3px;
    padding: 1px;
    border-radius: 50%;
    background: rgb(from var(--color-base-Blanco) r g b /40%);
    border: 1px solid var(--color-base-Negro);
}

.card-oferta .cam-equipo span>span {
    display: flex;
    position: relative;
    margin: 1px;
    border-radius: 50%;
    background: var(--color-base-Negro);
}


.card-oferta .screen-content .btn-power {
    display: flex;
    position: absolute;
    z-index: 10;
    font-size: 12px;
    color: var(--color-base-Blanco);
    bottom: 2px;
    right: 20px;
}

.card-oferta .screen-content .footer-text {
    display: flex;
    position: absolute;
    z-index: 10;
    font-size: 10px;
    color: var(--color-base-Blanco);
    bottom: -4px;
}



/**********************************************************************/
/* Card Electricidad - Efecto electrico                               */
/**********************************************************************/

/* SVG positioning */

.card-oferta .svg-container-electric {
    position: absolute;
    z-index: 1;
}

.card-oferta .card-container {
    display: flex;
    border-radius: 7px;
    position: absolute;
    top: 0;
    left: 0;

    background: transparent;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.card-oferta .card-container .inner-container {
    display: flex;
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    width: 100%;
    border-radius: 7px;
}

.card-oferta .card-container .inner-container .border-outer {
    border: 3px solid rgba(221, 132, 72, 0.5);
    /*border: 5px solid rgb(from var(--color-base-Negro) r g b / 30%);*/
    border-radius: 7px;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.card-oferta .card-container .inner-container .border-outer .main-card {
    width: 99%;
    height: 97%;
    height: var(--alto-card-electric);
    border-radius: 7px;
    border: 2px solid var(--electric-border-color);
    margin-top: -2px;
    margin-left: -2px;
    filter: url(#turbulent-displace);
}



/**************************************************************************************/
/* Tamaño de Pantalla de Dispositivos */
/**************************************************************************************/

@media only screen and (min-width: 0px) and (max-width: 475px) {
    .slider-ofertas {
        top: -90px;
        margin: 5px 0px;
        display: flex;
        justify-self: center;
        width: 100%;
        overflow: hidden;
    }

    .slider-ofertas .container-ofertas {
        width: 100%;
    }

    .slider-ofertas .container-ofertas .main-container-ofertas {
        margin: 0;
        width: 100%;
    }

    .slider-ofertas .container-ofertas .c-slider-ofertas {
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .slider-ofertas .container-ofertas .c-slider-ofertas .c-slider-cards-ofertas {
        width: 100%;
        margin: 0;
        padding: 0px 5px;
        justify-content: center;
        justify-self: center;
    }

    .slider-ofertas .card-oferta {
        width: 100%;
        margin: 5px;
    }

    .card-oferta .screen-content .title-ofertas .name {
        font-size: 11px;
    }

    .card-oferta .screen-content .descripcion-oferta .porcentaje-oferta {
        font-size: 16px;
        margin: 0;
        padding: 10px 5px;
    }
}

@media only screen and (min-width: 475px) and (max-width: 576px) {
    .slider-ofertas {
        top: 10px;
    }

    .slider-ofertas .container-ofertas {
        max-width: 610px;
    }

    .card-oferta .screen-content .descripcion-oferta .porcentaje-oferta {
        font-size: 30px;
        margin: 0;
        padding: 10px 5px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .slider-ofertas {
        top: -70px;
        /*background: #ff0000;*/
    }

    .slider-ofertas .container-ofertas {
        max-width: 720px;
    }

    .slider-ofertas .container-ofertas .c-slider-ofertas .c-slider-cards-ofertas .card-oferta {
        width: 100%;
        height: var(--alto-card-ofertas);
    }

    .card-oferta .screen-content .descripcion-oferta .porcentaje-oferta {
        font-size: 36px;
        margin: 0;
        padding: 10px 5px;
    }
}

@media only screen and (min-width: 767px) and (max-width: 991px) {
    .slider-ofertas {
        top: -90px;
        margin: 0px;
        padding: 0px;
        margin-bottom: -10px;
        width: 100%;
        /*background: #dd8448;*/
    }

    .slider-ofertas .container-ofertas {
        width: 100%;
        margin: 15px;
        /*max-width: 960px;*/
    }

    .slider-ofertas .container-ofertas .main-container-ofertas {
        margin: 0px 10px;
        padding: 0;
        width: 98%;
    }

    .slider-ofertas .container-ofertas .home-title {
        margin: 0px;
        margin-top: 5px;
        padding: 0px;
    }

    .slider-ofertas .container-ofertas .home-title span {
        margin: 0px;
    }

    .slider-ofertas .container-ofertas .c-slider-ofertas {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .slider-ofertas .container-ofertas .c-slider-ofertas .c-slider-cards-ofertas {
        width: 100%;
        margin: 0;
        padding: 0px 10px;
        display: flex;
        position: relative;
        justify-self: center;
    }

    .slider-ofertas .container-ofertas .c-slider-ofertas .c-slider-cards-ofertas .card-oferta {
        width: 100%;
        height: var(--alto-card-ofertas);
    }

    .card-oferta .screen-content .descripcion-oferta .porcentaje-oferta {
        font-size: 40px;
        margin: 0;
        padding: 10px 5px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .slider-ofertas {
        top: -90px;
        margin: 0;
        padding: 5px;
        /*background: #ff0fff;*/
    }

    .slider-ofertas .container-ofertas {
        max-width: 1140px
    }

    .slider-ofertas .container-ofertas .c-slider-ofertas .c-slider-cards-ofertas {
        width: 100%;
        margin: 0px;
        padding: 0px 5px;
        display: flex;
        position: relative;
        justify-content: center;
        justify-self: center;
    }

    .slider-ofertas .container-ofertas .c-slider-ofertas .c-slider-cards-ofertas .card-oferta {
        width: 100%;
        height: var(--alto-card-ofertas);
    }

    .card-oferta .screen-content .descripcion-oferta .porcentaje-oferta {
        font-size: 40px;
        margin: 0;
        padding: 10px 10px;
    }

}

@media only screen and (min-width: 1200px) and (max-width: 1920px) {
    .slider-ofertas {
        top: -107px;
        margin: 0;
        padding: 5px;
        margin-bottom: -10px;
    }

    .slider-ofertas .container-ofertas {
        margin: 10px;
        height: auto;
        border-radius: 7px;
        /*border: 1px solid #33333370;*/
        box-shadow: 0px 0px 10px 2.5px rgb(from var(--color-base-Negro) r g b / 80%);
        justify-content: center;
        gap: 20px;
        max-width: 1140px
    }

    .slider-ofertas .container-ofertas .c-slider-ofertas .c-slider-cards-ofertas {
        width: 100%;
        margin: 0px;
        padding: 5px 10px 5px 10px;
        display: flex;
        position: relative;
        justify-content: center;
        justify-self: center;        
    }

    .slider-ofertas .container-ofertas .c-slider-ofertas .c-slider-cards-ofertas .card-oferta {
        width: 97%;
        height: var(--alto-card-ofertas);
        margin: 5px 10px;
        /*
        display: flex;
        position: relative;
        align-items: center;
        justify-content: space-between;
        justify-self: center;
        left: calc(50% -50px);*/
    }
    .card-oferta .screen-content .descripcion-oferta .porcentaje-oferta {
        font-size: 48px;
        margin: 0;
        padding: 10px;
    }
}