@import url(/styles/colores.css);
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Moulpali&family=Oswald:wght@200..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Teko:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=News+Cycle:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Nerko+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Allura&family=Satisfy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Allura&family=Qwitcher+Grypen:wght@400;700&family=Satisfy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&family=Allura&family=Qwitcher+Grypen:wght@400;700&family=Satisfy&display=swap');

section {
    margin: 0;
    padding: 0;
    min-height: auto;
}

div {
    margin: 0;
}

/*Banners publicitarios de productos    |*/

.contenido {
    padding: 0;
    height: auto;
    top: 18rem;
    width: 100%;
    margin: 0;
    position: relative;
}

.top-container {
    height: auto;
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
    overflow-x: hidden;
    overflow-y: visible;

}

.top-box {
    margin: 0;
    height: auto;
    width: 100%;
    position: relative;
}

.top-box .top-producto {
    margin: 0;
    position: relative;
    width: 100%;
}

/*Banner de productos TOP*/

.contenido .box-banner {
    position: relative;
    margin: 0;
    height: 65rem;
    padding: 0;
    width: 100%;
    overflow: hidden;

}

.box-banner .img_banner {
    position: absolute;
    width: 60%;
    left: 75%;
    top: -5%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 1107;
    filter: drop-shadow(20px 20px 10px #000);
}

.circulo1,
.circulo2,
.circulo3,
.circulo4 {
    width: 50%;
    height: 50%;
    border-radius: 50%;
    position: absolute;
}


.circulo2 {
    width: 120%;
    height: 155%;
    left: 70%;
    top: -60%;
    transform: translateX(-50%);
    background: #0070FE;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    z-index: 1106;
}

.circulo3 {
    width: 115%;
    height: 140%;
    left: 85%;
    top: -60%;
    transform: translateX(-50%);
    background-image: linear-gradient(to right, #054be5, #0152ea, #0059ef, #0060f3, #0067f8, #006ff9, #0076fa, #007dfa, #0086f5, #008dee, #0094e6, #0099dc);
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    z-index: 1106;
}

.circulo4 {
    width: 115%;
    height: 140%;
    left: 85%;
    top: -60%;
    transform: translateX(-50%);
    background: rgba(6, 99, 238, 0.1);

    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    z-index: 1107;
}

.circulo1 {
    width: 160%;
    height: 140%;
    left: 50%;
    top: -50%;
    transform: translateX(-50%);
    background: #449fe0;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    z-index: 1005;
}

.box-banner .btn_banner {
    position: absolute;
    z-index: 3000;
    width: 18rem;
    height: 18rem;
    border-radius: 50%;
    background: #ff2849;
    top: 40%;
    left: 50%;
    transform: translate(-50%, 50%);
    outline: .6rem solid var(--whitecolor);
    font-size: 3rem;
    font-weight: 900;
    color: var(--whitecolor);
    text-align: center;
    align-content: center;
    font-family: "News Cycle", sans-serifs;
    animation-name: animation-button;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    transition: .5s ease-out;
}

.btn_banner:hover {
    background: #ff28483f;
    transition: .5s ease-out;
}

.box-banner .text-container_banner {
    width: 50%;
    position: relative;
    top: 40%;
    left: 0;
    transform: translateY(-50%);
    display: block;
    justify-content: space-between;
    z-index: 3000;
}

.text-container_banner h1 {
    font-family: "News Cycle", sans-serifs;
    color: var(--whitecolor);
    font-size: 6rem;
    letter-spacing: .3rem;

}

.text-container_banner h1 span {
    color: var(--orangecolor);
    text-transform: uppercase;
    letter-spacing: .1rem;
    
    font-weight: 600;
}

/*@keyframes animation-button {

    0%,
    100% {
        transform: translateY(0);
        animation-timing-function: ease-in;
    }

    50% {
        transform: translateY(-20px);
        animation-timing-function: ease-out;
    }
}*/

/*Galeria de fotos*/

.galeria-container {
    height: 100rem;
    top: 10%;
    position: relative;
}

.galeria-container h1 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    margin-top: 5rem;
    text-align: center;
}

.galeria-container .galeria {
    display: flex;
    overflow: visible;
    height: 50vw;
    background: var(--textcolor);
}

.galeria:hover img {
    opacity: 0.5;
}

.galeria img {
    max-width: 100%;
    width: 30rem;
    vertical-align: middle;
    border: .2rem solid var(--textcolor);
    box-sizing: border-box;
    transition: opacity .2s;
}

.galeria img:hover {
    opacity: 1;
    transition: .5s ease;
}

.galeria .column {
    animation: var(--animation, none) 35s infinite linear;
}

.galeria .column:hover {
    animation-play-state: paused;
}

.galeria .column:nth-of-type(odd) {
    align-self: flex-end;
    --direction: 50%;
}

@keyframes slide {
    to {
        transform: translateY(var(--direction, -50%))
    }
}

/*+++++++++++++++++++banner de promociones+++++++++++++++++++++++++++++++*/

.container-swiper {
    height: 100%;
    position: relative;
    display: flex;
}

.section-promociones {
    height: 40rem;
    max-height: 70rem;
    width: 100%;
    position: relative;
    overflow: hidden;
    padding: 0;
    margin: 0;
    top: 16.5rem;
}


.section-promociones .container-swiper .box-productos_descuentos {
    margin: 0;
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-image: linear-gradient(to bottom, #006db2, #20609c, #2a5386, #2d4771, #2c3c5c);


}

.container-swiper .box-productos_descuentos .img-promocion {
    width: 28%;
    top: 50%;
    position: absolute;
    left: 5%;
    transform: translatey(-50%);
    z-index: 2000;
    object-fit: contain;
    rotate: -10deg;
    border: .2rem solid var(--whitecolor);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.cuadro1,
.cuadro2,
.cuadro3,
.cuadro4,
.cuadro5 {
    position: absolute;
    width: 50%;
    height: 50%;
}

.cuadro1 {
    background-image: linear-gradient(to top, #006db2, #20609c, #2a5386, #2d4771, #2c3c5c);
    left: -1%;
    width: 100%;
    height: 100%;
    rotate: 45deg;
    z-index: 1000;

}

.cuadro2 {
    background-image: linear-gradient(to top, #006db2, #20609c, #2a5386, #2d4771, #2c3c5c);
    left: -1%;
    width: 100%;
    height: 100%;
    rotate: 135deg;
    z-index: 2001;

}

.cuadro3 {
    background-image: linear-gradient(to top, #006db2, #20609c, #2a5386, #2d4771, #2c3c5c);
    left: 15%;
    width: 100%;
    height: 180%;
    rotate: 90deg;
    z-index: 2200;

}

.cuadro5 {
    background-image: linear-gradient(to top, #006db2, #20609c, #2a5386, #2d4771, #2c3c5c);
    left: 5%;
    width: 100%;
    height: 90%;
    rotate: 90deg;
    z-index: 2200;
}

.cuadro4 {
    width: 40%;
    height: 110%;
    top: 50%;
    transform: translateY(-50%);
    background-image: linear-gradient(to bottom, #ff8c00, #ff9d00, #ffad00, #ffbd00, #ffcd00);

}

.container-swiper .box-productos_descuentos .text {
    position: absolute;
    z-index: 3000;
    width: 50%;
    right: 0;
    height: 100%;
}

.container-swiper .box-productos_descuentos .text h1 {
    letter-spacing: .2rem;
    text-align: center;
    font-size: 4.5rem;
    color: var(--whitecolor);
    text-transform: uppercase;
}

.text h2 {
    font-size: 4.1rem;
    color: var(--whitecolor);
    text-align: center;
    text-transform: uppercase;
}

.text h3 {
    position: absolute;
    color: var(--whitecolor);
    font-size: 2.5rem;
    top: 70%;
    left: 50%;
    transform: translateX(-50%);
    text-transform: uppercase;
    width: 100%;
    text-align: center;
}

.text h4 {
    color: var(--whitecolor);
    text-transform: uppercase;
    position: absolute;
    font-weight: 400;
    font-size: 1.3rem;
    bottom: 0;
    right: 0;
}

.text .raspadita {
    font-size: 10rem;
    font-family: "Luckiest Guy", cursive;
    text-transform: uppercase;
    letter-spacing: .4rem;
    color: var(--whitecolor);
    font-weight: 300;
    text-shadow: 9px 6px 3px var(--naranjatruper);
    rotate: -5deg;
    position: absolute;
    left: 20%;
    top: 30%;
    transform: translateX(-50%);
    animation-name: scaleAndColorChange;
    animation-duration: .5s;
    animation-timing-function: ease-in-out;
    animation-delay: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: both;
}


@keyframes scaleAndColorChange {
    0% {
        transform: scale(1);

    }

    100% {
        transform: scale(1.2);

    }
}

/*BANNER Asistencia técnica*/

.section-promociones .container-swiper .banner-asistencia {
    margin: 0;
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-image: linear-gradient(to left, #f66d05, #ea6a08, #de670b, #d2630e, #c76010);
}

.container-swiper .banner-asistencia .img-asistencia,
.container-swiper .banner-asistencia .img-asistencia2,
.container-swiper .banner-asistencia .img-asistencia3,
.container-swiper .banner-asistencia .img-asistencia4 {
    width: 15%;
    top: 50%;
    position: absolute;
    right: 5%;
    transform: translatey(-50%);
    z-index: 2000;
    object-fit: contain;
    border-radius: 2rem;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.container-swiper .banner-asistencia .img-asistencia {
    width: 18%;
    right: 23%;
    top: 60%;
    rotate: -15deg;
    z-index: 2988;
}

.container-swiper .banner-asistencia .img-asistencia2 {
    width: 20%;
    right: -1%;
    top: 25%;
    z-index: 2990;
    rotate: 15deg;
}

.container-swiper .banner-asistencia .img-asistencia3 {
    right: 14%;
    z-index: 2989;
}

.container-swiper .banner-asistencia .img-asistencia4 {
    right: 3%;
    width: 11%;
    top: 75%;
    z-index: 3000;
}

.banner-asistencia .cuadro1,
.banner-asistencia .cuadro2,
.banner-asistencia .cuadro3,
.banner-asistencia .cuadro4,
.banner-asistencia .cuadro5 {
    position: absolute;
    width: 50%;
    height: 50%;
}

.banner-asistencia .cuadro1 {
    background-image: linear-gradient(to bottom, #f66d05, #ea6a08, #de670b, #d2630e, #c76010);
    left: -1%;
    width: 100%;
    height: 100%;
    rotate: 45deg;
    z-index: 1000;
    border: solid var(--whitecolor);
}

.banner-asistencia .cuadro2 {
    background-image: linear-gradient(to bottom, #f66d05, #ea6a08, #de670b, #d2630e, #c76010);
    left: -1%;
    width: 100%;
    height: 100%;
    rotate: 135deg;
    z-index: 1980;
    border: solid var(--whitecolor);
}

.banner-asistencia .cuadro3 {
    background-image: linear-gradient(to bottom, #f66d05, #ea6a08, #de670b, #d2630e, #c76010);
    left: 15%;
    width: 100%;
    height: 180%;
    rotate: 90deg;
    z-index: 2200;

}

.banner-asistencia .cuadro5 {
    background-image: linear-gradient(to bottom, #f66d05, #ea6a08, #de670b, #d2630e, #c76010);
    left: 5%;
    width: 100%;
    height: 90%;
    rotate: 90deg;
    z-index: 2200;
}

.banner-asistencia .cuadro4 {
    width: 40%;
    height: 110%;
    top: 50%;
    transform: translateY(-50%);
    background: #3F3D3C;
}

.container-swiper .banner-asistencia .text {
    position: absolute;
    z-index: 3000;
    width: 50%;
    left: 27%;
    top: 50%;
    border-radius: 2rem;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.432);
    height: 90%;
    align-content: center;
    text-align: center;
}

.container-swiper .banner-asistencia .text h1 {

    text-align: center;
    font-size: 4rem;
    color: var(--whitecolor);
    font-weight: 600;
    font-family: "News Cycle", sans-serifs;
}

.container-swiper .banner-asistencia .text h2 {
    font-size: 2.5rem;
    color: var(--whitecolor);
    text-align: center;
    text-transform: uppercase;
}


.container-swiper .banner-asistencia .text h4 {
    color: var(--whitecolor);
    text-transform: uppercase;
    position: absolute;
    font-weight: 400;
    font-size: 1.3rem;
    bottom: 0;
    left: 50%;
}

.container-swiper .banner-asistencia .text span {
    font-size: 2rem;
    color: var(--whitecolor);
    font-weight: 600;
    text-align: center;
    left: 50%;
}


/*Cinta con lema de ferretería*/

.cinta-lema {
    top: 16.7rem;
    display: flex;
    height: auto;
    width: 100%;

    justify-content: center;
    position: relative;
    align-items: center;
    overflow: hidden;
}


.cinta-lema h1 {
    font-size: 4rem;
    color: var(--azulrugo);
    font-family: "Allura", system-ui;
    font-weight: 800;
}

.cinta-lema h1 span {
    color: var(--rojo2);
    font-family: "Allura", system-ui;
    font-weight: 800;
}

/*Banner navideño*/

.navidad-banner {
    min-height: 20rem;
    max-height: 40rem;
    height: 40rem;
    width: 100%;
    background-image: url(/src/Inicio/BanerNavidad.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.navidad-banner .navidad-box {

    width: 50%;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(143, 30, 30, 0.7);
    text-align: center;
    border-radius: 1.5rem;
    outline: .3rem solid goldenrod;
    border: 1rem solid var(--shadow-color);
    padding: .5rem;
}

.navidad-box .navidad-text h1 {
    font-family: "Qwitcher Grypen", serif;
    font-weight: 600;
    font-style: italic;
    font-size: 12rem;
    color: goldenrod;
}

.navidad-box .navidad-text h2 {
    font-family: "Satisfy", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: italic;
    font-variation-settings:
        "slnt" 0;
    font-size: 2.5rem;
    color: whitesmoke;
}

.navidad-box .navidad-img img {
    background-color: rgba(255, 255, 255, 0.7);
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    padding: 1rem;
    width: 30%;
    margin-top: 2rem;
    border-radius: 2rem;
}

/*BANNER RUGO*/

.box-productos_rugo {
    position: relative;
    margin-top: 15%;
    width: 100%;
    height: 70rem;
    background-image: url('/src/Inicio/Portada RUGO.jpg');
    background-color: #f6f5f1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 900;
    overflow: hidden;
}

.box-productos_rugo .text-rugo {
    width: 50%;
    position: relative;
    left: 25%;
    top: 10%;
    transform: translateX(-50%);

}

.box-productos_rugo .text-rugo h1 {
    font-size: 5rem;
    color: var(--rojo);
}

.box-productos_rugo .text-rugo h1:nth-child(2) {
    left: 10%;
    position: absolute;

}

.box-productos_rugo .text-rugo span {
    color: var(--azulrugo);
    font-weight: 600;
}

.box-productos_rugo .swiper-rugo {
    position: relative;
    width: 70%;
    top: 40%;
    height: auto;
    overflow: hidden;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0;
}

.box-productos_rugo .swiper-rugo .box-rugo {
    width: 100%;
}

.box-productos_rugo .swiper-rugo .slide-rugo {
    width: 100%;
    border: .2rem solid var(--textcolor);
    text-align: center;
    height: auto;
}

.box-productos_rugo .swiper-rugo .slide-rugo img {
    width: 100%;
    position: relative;
    display: block;
    object-fit: cover;
    left: 50%;
    transform: translateX(-50%);
}

.slide-rugo .text-rugo_slide {
    background: var(--azulrugo);
    position: relative;
    height: 9rem;
    display: block;
    justify-content: space-around;
    align-content: center;
    border-top: .2rem solid var(--rojo);
}

.slide-rugo .text-rugo_slide h2 {
    color: var(--whitecolor);
    font-size: 1.6rem;
    top: .1rem;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    position: absolute;
}

.slide-rugo .text-rugo_slide a {
    color: var(--whitecolor);
    background: var(--rojo);
    font-size: 1.5rem;
    border: solid .1rem var(--whitecolor);
    padding: .1rem .4rem;
    border-radius: 2rem;

    transition: .3s ease-in;
    bottom: .2rem;
    left: 50%;
    width: 55%;
    transform: translateX(-50%);
    position: absolute;
}

.text-rugo_slide a:hover {
    background: rgba(211, 6, 61, 0.63);
}

/*Cinta de direcciones de sucursales*/

.direccion_tiendas {
    padding: 1rem 0;
    display: grid;
    grid-template-columns: 30% 30% 30%;
    height: 18rem;
    width: 90%;
    column-gap: 1rem;
    position: relative;
    justify-content: center;
    border-radius: 2rem;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.direccion_tiendas .info_tienda {
    padding: 0 1rem;
    align-content: center;
    text-align: center;
    height: 100%;
    position: relative;
}

.direccion_tiendas .info_tienda:nth-child(1) {
    border-left: .3rem solid var(--secondarycolor);
}

.direccion_tiendas .info_tienda:nth-child(2) {
    border-left: .3rem solid var(--secondarycolor);
    border-right: .3rem solid var(--secondarycolor);
}

.direccion_tiendas .info_tienda:nth-child(3) {

    border-right: .3rem solid var(--secondarycolor);
}


.direccion_tiendas .info_tienda i {
    font-size: 3.5rem;
    color: var(--alternativecolor);
}

.direccion_tiendas .info_tienda h1 {
    font-size: 2rem;
    color: var(--rojo);
}

.direccion_tiendas .info_tienda h2 {
    font-size: 1.8rem;
    color: var(--secondarycolor);
}

/* BANNER SEGUNDO*/

.segundo-banner {
    margin-top: 10%;
    display: flex;
    padding: 0;
    margin-left: 20px;
    margin-right: 20px;
    position: relative;
    max-height: 450px;
    border-radius: 10px;
    overflow: hidden;
    background-image: linear-gradient(to top right, #015AEF 35%, #0096D0, #C9FCE9);
    box-shadow: black 8px 9px 10px;
    -webkit-box-shadow: -1px 0px 9px 7px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: -1px 0px 9px 7px rgba(0, 0, 0, 0.75);
    box-shadow: -1px 0px 9px 7px rgba(0, 0, 0, 0.75);
}


.container-banner {
    height: 350px;
    color: #fff;
    display: block;
    width: 98%;
    margin: 0;
    padding-right: 5%;
    padding-bottom: 10%;
    text-align: end;
}

.container-banner p {
    text-shadow: 2px 2px black;
    padding-bottom: 1rem;
    padding-right: 0;
    color: #ffc60a;
    position: relative;
    font-size: 22px;
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: right;
    padding-top: 7%;
}

.container-banner .info-click {
    background-color: rgba(255, 255, 255, 0.35);
    padding: 15px 18px;
    color: #fff;
    font-size: 17px;
    text-align: center;
    position: relative;
    border-radius: 30px;
    text-transform: uppercase;
    animation: boton-banner 4s infinite ease-in-out;
    z-index: 200;
    left: 65%;
    transform: translate(-75%, 50%);
    outline: .4rem solid var(--whitecolor);
    font-size: 3rem;
    font-weight: 300;
    text-align: end;
    align-content: end;
}

.boton-banner {
    display: flex;
}



@keyframes boton-banner {
    0% {
        transform: scale(1);
        background: blue;
        box-shadow: black 8px 9px;
    }

    33% {
        transform: scale(1.1);
        background: #db0e34;
        box-shadow: black 12px 12px;
    }

    66% {
        transform: scale(1.);
        background: rgb(233, 154, 6);
        box-shadow: black 8px 9px;
    }

    100% {
        transform: scale(1);
        background: blue;
        box-shadow: black 8px 9px;
    }
}


a.info-click:hover {
    background-color: rgba(255, 255, 255, 0.50);
}

.container-banner img {
    position: absolute;
    top: 8;
    bottom: -7%;
    left: 5%;
    border-radius: 50%;
}

svg {
    fill: rgba(0, 0, 0, 0.288);
    position: absolute;
}

.cirle-a {
    top: -10px;
    left: 0px;
}

.cirle-b {
    bottom: 10px;
    right: 0px;
}

.cirle-c {
    top: -10px;
    left: 0px;
}

.cirle-d {
    top: 10px;
    right: 0px;
}




/*Responsive de página de inicio*/
@media (max-width:1660px) {

    /*Banner de TOP*/
    .contenido .box-banner {
        position: relative;
        margin: 0;
        height: 55rem;
        padding: 0;
        width: 100%;
        overflow: hidden;
    }

    .text-container_banner h1 {
        font-family: "News Cycle", sans-serifs;
        color: var(--whitecolor);
        font-size: 4.5rem;
        letter-spacing: .2rem;

    }

    .box-banner .btn_banner {
        width: 15rem;
        height: 15rem;
        font-size: 2.5rem;
    }

    /*Banner de Raspadita*/

    .section-promociones {
        height: 35rem;
        max-height: 70rem;
        width: 100%;
        position: relative;
        overflow: hidden;
        padding: 0;
        margin: 0;
        border: .2rem solid var(--whitecolor);
    }

    .section-promociones .container-swiper .box-productos_descuentos .text h1 {
        font-size: 4rem;
    }

    .text h2 {
        font-size: 3.6rem;
    }

    .text h3 {
        font-size: 2rem;
    }

    .text h4 {
        font-size: .9rem;
    }

    .text .raspadita {
        font-size: 8rem;
    }

    /*Banner navideño*/

    .navidad-banner {

        height: 35rem;

    }

    .navidad-box .navidad-text h1 {

        font-size: 10rem;

    }

    .navidad-box .navidad-text h2 {

        font-size: 2rem;

    }

    .navidad-box .navidad-img img {

        width: 30%;

    }

    /*Banner RUGO*/

    .slide-rugo .text-rugo_slide a {
        font-size: 1.5rem;
        width: 75%;
    }

    /*Contenedor de galería*/
    .galeria-container {
        height: 85rem;
    }
}

@media (max-width: 1600px) {


    /*Banner de TOP*/
    .contenido .box-banner {
        position: relative;
        margin: 0;

        padding: 0;
        width: 100%;
        overflow: hidden;
    }

    .text-container_banner h1 {
        font-family: "News Cycle", sans-serifs;
        color: var(--whitecolor);
        font-size: 4.2rem;
        letter-spacing: .2rem;

    }



    /*Banner de Raspadita*/

    .section-promociones {
        height: 33rem;
        max-height: 70rem;
        width: 100%;
        position: relative;
        overflow: hidden;
        padding: 0;
        margin: 0;
        border: .2rem solid var(--whitecolor);
    }

    .section-promociones .container-swiper .box-productos_descuentos .text h1 {
        font-size: 3rem;
    }

    .text h2 {
        font-size: 3.4rem;
    }

    .text h3 {
        font-size: 1.8rem;
    }

    .text h4 {
        font-size: .8rem;
    }

    .text .raspadita {
        font-size: 7.5rem;
    }

}

@media (max-width:1440px) {

    /*Cinta lema*/

    .cinta-lema h1 {
        font-size: 4rem;
    }


    /*Banner de TOP*/
    .contenido .box-banner {
        position: relative;
        margin: 0;

        padding: 0;
        width: 100%;
        overflow: hidden;
    }

    .text-container_banner h1 {
        font-family: "News Cycle", sans-serifs;
        color: var(--whitecolor);
        font-size: 3.8rem;
        letter-spacing: .2rem;

    }

    .box-banner .btn_banner {
        width: 13rem;
        height: 13rem;
        font-size: 2rem;
    }

    /*Banner RUGO*/

    .box-productos_rugo {
        height: 65rem;
    }

    .box-productos_rugo .text-rugo h1 {
        font-size: 4.2rem;
    }



    /*Contenedor de galería*/
    .galeria-container {
        height: 70rem;
    }
}

@media (max-width:1366px) {



    /*Banner de TOP*/
    .contenido .box-banner {
        position: relative;
        margin: 0;

        padding: 0;
        width: 100%;
        overflow: hidden;
    }

    .box-banner .img_banner {

        width: 70%;
        left: 71%;
        top: -5%;
        transform: translateX(-50%);

    }

    .text-container_banner h1 {
        font-family: "News Cycle", sans-serifs;
        color: var(--whitecolor);
        font-size: 3.5rem;
        letter-spacing: .2rem;

    }

    .box-banner .btn_banner {
        width: 13rem;
        height: 13rem;
        font-size: 2rem;
    }

}

@media (max-width:1250px) {

    /*Banner de TOP*/

    .box-banner .img_banner {

        width: 72%;
        left: 74%;
        top: -5%;
        transform: translateX(-50%);

    }

    .text-container_banner h1 {
        font-family: "News Cycle", sans-serifs;
        color: var(--whitecolor);
        font-size: 3.2rem;
        letter-spacing: .2rem;

    }

    .box-banner .btn_banner {
        width: 12rem;
        height: 12rem;
        font-size: 1.8rem;
        outline: .3rem solid var(--whitecolor);
    }


    /*Banner Raspadita*/
    .section-promociones {
        height: 31rem;
        max-height: 70rem;
        width: 100%;
        position: relative;
        overflow: hidden;
        padding: 0;
        margin: 0;
        border: .2rem solid var(--whitecolor);
    }

    .container-swiper .box-productos_descuentos .img-promocion {
        width: 35%;
        z-index: 3000;
    }

    .section-promociones .container-swiper .box-productos_descuentos .text h1 {
        font-size: 2.7rem;
    }

    .text h2 {
        font-size: 3.1rem;
    }

    .text h3 {
        font-size: 1.5rem;
    }

    .text h4 {
        font-size: .8rem;
    }

    .text .raspadita {
        font-size: 7rem;
    }

    /*Cinta lema*/

    .cinta-lema h1 {
        font-size: 4rem;
    }

    /*Banner Asistencia técnica*/



    .container-swiper .banner-asistencia .text h1 {
        font-size: 3.6rem;
    }

    .container-swiper .banner-asistencia .text h2 {
        font-size: 2.1rem;
    }


    .container-swiper .banner-asistencia .text h4 {
        font-size: 1rem;
    }

    .container-swiper .banner-asistencia .text span {
        font-size: 1.6rem;
    }

    /*Banner RUGO*/


    .box-productos_rugo .text-rugo h1 {
        font-size: 3.5rem;

    }

    .slide-rugo .text-rugo_slide h2 {
        font-size: 1.5rem;
    }

    .slide-rugo .text-rugo_slide a {
        font-size: 1.3rem;
    }

    /*Cinta de direcciones*/

    .direccion_tiendas {
        height: 14rem;
    }

    .direccion_tiendas .info_tienda i {
        font-size: 2.5rem;
        color: var(--alternativecolor);
    }

    .direccion_tiendas .info_tienda h1 {
        font-size: 1.8rem;
        color: var(--rojo);
    }

    .direccion_tiendas .info_tienda h2 {
        font-size: 1.6rem;
        color: var(--secondarycolor);
    }

    /*Contenedor de galería*/
    .galeria-container {
        height: 62rem;
    }

}

@media (max-width:1200px) {

    /*Banner de TOP*/

    .box-banner .img_banner {

        width: 75%;
        left: 72%;
        top: -5%;
        transform: translateX(-50%);

    }


    /*Banner Raspadita*/
    .section-promociones {
        height: 29rem;
        max-height: 70rem;
        width: 100%;
        position: relative;
        overflow: hidden;
        padding: 0;
        margin: 0;
        border: .2rem solid var(--whitecolor);
    }

    .container-swiper .box-productos_descuentos .img-promocion {
        width: 33%;
        z-index: 2500;
    }


    .section-promociones .container-swiper .box-productos_descuentos .text h1 {
        font-size: 2.7rem;
    }

    .text h2 {
        font-size: 3.1rem;
    }

    .text h3 {
        font-size: 1.5rem;
    }

    .text h4 {
        font-size: .8rem;
    }

    .text .raspadita {
        font-size: 7rem;
    }

    /*Banner asistencia Técnica*/

    .container-swiper .banner-asistencia .text h1 {
        font-size: 3.3rem;
    }

    .container-swiper .banner-asistencia .text h2 {
        font-size: 1.9rem;
    }


    .container-swiper .banner-asistencia .text h4 {
        font-size: .8rem;
    }

    .container-swiper .banner-asistencia .text span {
        font-size: 1.4rem;
    }
}

@media(max-width:1160px) {



    /*Banner TOP*/


    .contenido .box-banner {
        height: 55rem;
    }

    .box-banner .img_banner {

        width: 78%;
        left: 72%;
        top: -5%;
        transform: translateX(-50%);

    }

}

@media (max-width:1100px) {

    /*Banner de TOP*/

    .box-banner .img_banner {

        width: 82%;
        left: 72%;
        top: -5%;
        transform: translateX(-50%);

    }

    .text-container_banner h1 {
        font-family: "News Cycle", sans-serifs;
        color: var(--whitecolor);
        font-size: 2.9rem;
        letter-spacing: .2rem;
    }

    .box-banner .btn_banner {
        width: 11rem;
        height: 11rem;
        font-size: 1.6rem;
        outline: .3rem solid var(--whitecolor);
        top: 40%;
    }

    /*Banner Raspadita*/
    .section-promociones {
        height: 26rem;
        max-height: 70rem;
        width: 100%;
        position: relative;
        overflow: hidden;
        padding: 0;
        margin: 0;
        border: .2rem solid var(--whitecolor);
    }

    .container-swiper .box-productos_descuentos .img-promocion {
        width: 35%;
        z-index: 3000;
    }

    .section-promociones .container-swiper .box-productos_descuentos .text h1 {
        font-size: 2.4rem;
    }

    .text h2 {
        font-size: 2.7rem;
    }

    .text h3 {
        font-size: 1.2rem;
    }

    .text h4 {
        font-size: .6rem;
    }

    .text .raspadita {
        top: 40%;
        font-size: 5rem;
    }

    /*Banner asistencia Técnica*/

    .container-swiper .banner-asistencia .text h1 {
        font-size: 3rem;
    }

    .container-swiper .banner-asistencia .text h2 {
        font-size: 1.8rem;
    }


    .container-swiper .banner-asistencia .text h4 {
        font-size: .9rem;
    }

    .container-swiper .banner-asistencia .text span {
        font-size: 1.6rem;
    }

    /*Contenedor de galería*/
    .galeria-container {
        height: 55rem;
    }
}

@media (max-width:1024px) {

    /*Banner de TOP*/

    .contenido .box-banner {
        position: relative;
        margin: 0;
        height: 47rem;
        padding: 0;
        width: 100%;
        overflow: hidden;
    }

    .box-banner .img_banner {

        width: 81%;
        left: 72%;
        top: -5%;
        transform: translateX(-50%);

    }


    /*Banner RUGO*/
    .box-productos_rugo {

        width: 100%;
        height: 50rem;

    }


    .box-productos_rugo .swiper-rugo {
        top: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
    }

    .slide-rugo .text-rugo_slide {
        height: 7.5rem;
    }

    .box-productos_rugo .text-rugo h1 {
        font-size: 3.2rem;
    }

    .slide-rugo .text-rugo_slide h2 {
        font-size: 1.5rem;
    }

    .slide-rugo .text-rugo_slide a {
        font-size: 1.3rem;
    }

    /*Banner Raspadita*/
    .section-promociones {
        height: 24rem;
        max-height: 70rem;
        width: 100%;
        position: relative;
        overflow: hidden;
        padding: 0;
        margin: 0;
        border: .2rem solid var(--whitecolor);
    }

    .container-swiper .box-productos_descuentos .img-promocion {
        width: 35%;
        z-index: 3000;
    }

    .section-promociones .container-swiper .box-productos_descuentos .text h1 {
        font-size: 2.2rem;
    }

    .text h2 {
        font-size: 2.3rem;
    }

    .text h3 {
        font-size: 1rem;
    }

    .text h4 {
        font-size: .6rem;
    }

    .text .raspadita {
        top: 30%;
        font-size: 5.2rem;
    }

    /*Banner asistencia Técnica*/

    .container-swiper .banner-asistencia .text h1 {
        font-size: 2.9rem;
    }

    .container-swiper .banner-asistencia .text h2 {
        font-size: 1.5rem;
    }


    .container-swiper .banner-asistencia .text h4 {
        font-size: .8rem;
    }

    .container-swiper .banner-asistencia .text span {
        font-size: 1.3rem;

    }

    /*Banner navideño*/

    .navidad-banner {

        height: 30rem;

    }

    .navidad-box .navidad-text h1 {

        font-size: 8rem;

    }

    .navidad-box .navidad-text h2 {

        font-size: 1.8rem;

    }

    .navidad-box .navidad-img img {

        width: 35%;

    }

    /* BANNER SEGUNDO*/
    /*
    .container-banner {
        height: 25rem;
    }

    .container-banner .info-click {
        font-size: 2rem;
    }
        */
}

@media (max-width:950px) {

    /*Banner de TOP*/
    .contenido .box-banner {
        position: relative;
        margin: 0;
        height: 45rem;
        padding: 0;
        width: 100%;
        overflow: hidden;
    }

    /*Banner Raspadita*/
    .section-promociones {
        height: 20rem;
        max-height: 70rem;
        width: 100%;
        position: relative;
        overflow: hidden;
        padding: 0;
        margin: 0;
        border: .2rem solid var(--whitecolor);
    }

    .img-promocion {
        width: 35%;
        z-index: 3000;
    }

    .section-promociones .container-swiper .box-productos_descuentos .text h1 {
        font-size: 2.2rem;
    }

    .text h2 {
        font-size: 2.3rem;
    }

    .text h3 {
        font-size: 1rem;
    }

    .text h4 {
        font-size: .6rem;
    }

    .text .raspadita {
        top: 30%;
        font-size: 5.2rem;
    }

    /*Banner asistencia Técnica*/


    /*Banner RUGO*/
    .box-productos_rugo {
        margin-top: 20%;
        width: 100%;
    }

    .box-productos_rugo .text-rugo h1 {
        font-size: 3rem;
    }

    .box-productos_rugo .swiper-rugo {
        width: 63%;
    }


    .slide-rugo .text-rugo_slide h2 {
        font-size: 1.5rem;
    }

    .slide-rugo .text-rugo_slide a {
        font-size: 1.3rem;
    }
}

@media (max-width:900px) {


    /*Cinta con lema*/
    .cinta-lema h1 {
        font-size: 3rem;
    }

    /*Banner Raspadita*/
    .section-promociones {
        height: 20rem;
        max-height: 70rem;
        width: 100%;
        position: relative;
        overflow: hidden;
        padding: 0;
        margin: 0;
        border: .2rem solid var(--whitecolor);
    }

    .img-promocion {
        width: 35%;
        z-index: 3000;
    }

    .section-promociones .container-swiper .box-productos_descuentos .text h1 {
        font-size: 2rem;
    }

    .text h2 {
        font-size: 2.1rem;
    }

    .text h3 {
        font-size: .9rem;
    }

    .text h4 {
        font-size: .6rem;
    }

    .text .raspadita {
        top: 30%;
        font-size: 5rem;
    }

    /*Banner navideño*/

    .navidad-banner {

        height: 26rem;

    }

    .navidad-banner .navidad-box {
        width: 60%;
    }

    .navidad-box .navidad-text h1 {

        font-size: 6.5rem;

    }

    .navidad-box .navidad-text h2 {

        font-size: 1.5rem;

    }

    .navidad-box .navidad-img img {

        width: 35%;

    }

    /*Banner RUGO*/


    .box-productos_rugo .text-rugo h1 {
        font-size: 2.7rem;
    }

    .slide-rugo .text-rugo_slide h2 {
        font-size: 1.5rem;
    }

    .slide-rugo .text-rugo_slide a {
        font-size: 1.3rem;
    }

    /*Cinta de direcciones*/

    .direccion_tiendas {
        height: 12rem;
    }

    .direccion_tiendas .info_tienda i {
        font-size: 2.2rem;
        color: var(--alternativecolor);
    }

    .direccion_tiendas .info_tienda h1 {
        font-size: 1.6rem;
        color: var(--rojo);
    }

    .direccion_tiendas .info_tienda h2 {
        font-size: 1.4rem;
        color: var(--secondarycolor);
    }

    /*Banner de TOP*/
    .contenido .box-banner {
        position: relative;
        margin: 0;
        height: 45rem;
        padding: 0;
        width: 100%;
        overflow: hidden;
    }

    .text-container_banner h1 {
        font-family: "News Cycle", sans-serifs;
        color: var(--whitecolor);
        font-size: 3rem;
        letter-spacing: .1rem;
    }

    .box-banner .btn_banner {
        width: 10rem;
        height: 10rem;
        font-size: 1.6rem;
        outline: .3rem solid var(--whitecolor);
        top: 50%;
    }

    /*Contenedor de galería*/
    .galeria-container {
        height: 45rem;
    }

    .galeria-container h1 {
        font-size: 2.2rem;
    }
}

@media(max-width:840px) {

    /*Banner TOP*/

    .box-banner .img_banner {

        width: 83%;
        left: 71%;
        top: -5%;
        transform: translateX(-50%);

    }



    /*Cinta con lema*/
    .cinta-lema h1 {
        font-size: 2.8rem;
    }

    /*Banner Raspadita*/
    .section-promociones {
        height: 20rem;
        max-height: 70rem;
        width: 100%;
        position: relative;
        overflow: hidden;
        padding: 0;
        margin: 0;
        border: .2rem solid var(--whitecolor);
    }

    .img-promocion {
        width: 35%;
        z-index: 3000;
    }

    .section-promociones .container-swiper .box-productos_descuentos .text h1 {
        font-size: 1.8rem;
    }

    .text h2 {
        font-size: 1.9rem;
    }

    .text h3 {
        font-size: .9rem;
    }

    .text h4 {
        font-size: .6rem;
    }

    .text .raspadita {
        top: 30%;
        font-size: 4.7rem;
    }

    /*Banner asistencia Técnica*/

    .container-swiper .banner-asistencia .text h1 {
        font-size: 2.3rem;
    }

    .container-swiper .banner-asistencia .text h2 {
        font-size: 1.4rem;
    }


    .container-swiper .banner-asistencia .text h4 {
        font-size: .8rem;
    }

    .container-swiper .banner-asistencia .text span {
        font-size: 1.4rem;
    }
}

@media (max-width:800px) {

    .cinta-lema {
        margin-top: -4rem;
    }

    /*Banner Raspadita*/
    .section-promociones {
        height: 20rem;
        max-height: 70rem;
        width: 100%;
        position: relative;
        overflow: hidden;
        padding: 0;
        margin: 0;
        border: .2rem solid var(--whitecolor);
    }

    .container-swiper .box-productos_descuentos .img-promocion {
        width: 40%;
        z-index: 3000;
    }

    .section-promociones .container-swiper .box-productos_descuentos .text h1 {
        font-size: 1.5rem;
    }

    .text h2 {
        font-size: 1.7rem;
    }

    .text h3 {
        font-size: .9rem;
    }

    .text h4 {
        font-size: .6rem;
    }

    .text .raspadita {
        top: 30%;
        font-size: 4.7rem;
    }

    /*Banner RUGO*/
    .box-productos_rugo {
        height: 40rem;
        margin-top: 20rem;
    }

    .box-productos_rugo .swiper-rugo {
        position: relative;
        top: 50%;

        width: 70%;
    }

    .slide-rugo .text-rugo_slide {
        height: 7rem;
    }

    .box-productos_rugo .text-rugo h1 {
        font-size: 2.3rem;
    }

    .slide-rugo .text-rugo_slide h2 {
        font-size: 1.3rem;
    }

    .slide-rugo .text-rugo_slide a {
        font-size: 1.1rem;
    }

    /*Cinta de direcciones*/

    .direccion_tiendas {
        height: 12rem;
    }

    .direccion_tiendas .info_tienda i {
        font-size: 2rem;
        color: var(--alternativecolor);
    }

    .direccion_tiendas .info_tienda h1 {
        font-size: 1.4rem;
        color: var(--rojo);
    }

    .direccion_tiendas .info_tienda h2 {
        font-size: 1.3rem;
        color: var(--secondarycolor);
    }

    /*Banner de TOP*/
    .contenido .box-banner {

        height: 38rem;

    }

    .text-container_banner h1 {
        font-size: 2.8rem;
        letter-spacing: .1rem;

    }

    .box-banner .btn_banner {
        width: 9rem;
        height: 9rem;
        font-size: 1.4rem;
        outline: .3rem solid var(--whitecolor);

    }
}

@media (max-width:720px) {

    /*Cinta con lema*/
    .cinta-lema {
        margin-bottom: 1.5%;
    }

    .cinta-lema h1 {
        font-size: 2.5rem;
    }

    /*Banner Raspadita*/
    .section-promociones {
        height: 22rem;
        max-height: 70rem;
        width: 100%;
        position: relative;
        overflow: hidden;
        padding: 0;
        margin: 0;
        border: .2rem solid var(--whitecolor);
    }

    .container-swiper .box-productos_descuentos .img-promocion {
        width: 44%;
        z-index: 3000;
    }

    .section-promociones .container-swiper .box-productos_descuentos .text h1 {
        font-size: 1.5rem;
    }

    .text h2 {
        font-size: 1.7rem;
    }

    .text h3 {
        font-size: .9rem;
    }

    .text h4 {
        font-size: .6rem;
    }

    .text .raspadita {
        top: 30%;
        font-size: 4.4rem;
    }

    /*Banner asistencia técnica*/
    .container-swiper .banner-asistencia .img-asistencia {
        width: 20%;
        right: 23%;
        top: 60%;
        rotate: -15deg;
        z-index: 2988;
    }

    .container-swiper .banner-asistencia .img-asistencia2 {
        width: 22%;
        right: -1%;
        top: 25%;
        z-index: 2990;
        rotate: 15deg;
    }

    .container-swiper .banner-asistencia .img-asistencia3 {
        width: 17%;
        right: 14%;
        z-index: 2989;
    }

    .container-swiper .banner-asistencia .img-asistencia4 {
        width: 13%;
        right: 3%;
        top: 75%;
        z-index: 3000;
    }

    /*Banner RUGO*/
    .box-productos_rugo {
        margin-top: 30%;
        width: 100%;
        height: 38rem;
        background-image: url('/src/Inicio/Portada RUGO.jpg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 900;
        overflow: hidden;
    }

    .box-productos_rugo .swiper-rugo {
        position: relative;
        width: 80%;
    }

    .slide-rugo .text-rugo_slide {
        height: 7rem;
    }

    .box-productos_rugo .text-rugo h1 {
        font-size: 2.2rem;
    }

    .slide-rugo .text-rugo_slide h2 {
        font-size: 1.3rem;
    }

    .slide-rugo .text-rugo_slide a {
        font-size: 1.2rem;
    }

    /*Cinta de direcciones*/

    .direccion_tiendas .info_tienda:nth-child(1) {
        border-left: .2rem solid var(--secondarycolor);
    }

    .direccion_tiendas .info_tienda:nth-child(2) {
        border-left: .2rem solid var(--secondarycolor);
        border-right: .2rem solid var(--secondarycolor);
    }

    .direccion_tiendas .info_tienda:nth-child(3) {

        border-right: .2rem solid var(--secondarycolor);
    }

    /*Banner de TOP*/
    .contenido .box-banner {
        height: 36rem;
    }

    .box-banner .img_banner {

        width: 85%;
        left: 71%;
        top: -5%;
        transform: translateX(-50%);

    }

    .text-container_banner h1 {
        font-size: 2.8rem;
        letter-spacing: .1rem;
    }

    .box-banner .btn_banner {
        width: 9rem;
        height: 9rem;
        font-size: 1.4rem;
        outline: .3rem solid var(--whitecolor);
        top: 40%;
    }

    /*contenedor de galería*/
    .galeria-container {
        height: 35rem;
    }
}

@media (max-width:700px) {

    

    /*Banner Raspadita*/
    .section-promociones .container-swiper .box-productos_descuentos .text h1 {
        font-size: 1.5rem;
    }

    .text h2 {
        font-size: 1.7rem;
    }

    .text h3 {
        font-size: .9rem;
    }

    .text h4 {
        font-size: .6rem;
    }

    .text .raspadita {
        top: 30%;
        font-size: 4.1rem;
    }

    /*Banner asistencia Técnica*/

    .container-swiper .banner-asistencia .text h1 {
        font-size: 2.1rem;
    }

    .container-swiper .banner-asistencia .text h2 {
        font-size: 1.3rem;
    }


    .container-swiper .banner-asistencia .text h4 {
        font-size: .8rem;
    }

    .container-swiper .banner-asistencia .text span {
        font-size: 1.2rem;
    }

    /*Banner RUGO*/


    .box-productos_rugo .swiper-rugo {
        position: relative;
        top: 45%;
        width: 50%;
    }

    .slide-rugo .text-rugo_slide {
        height: 7rem;
    }

    .box-productos_rugo .text-rugo h1 {
        font-size: 2.2rem;
    }

    .slide-rugo .text-rugo_slide h2 {
        font-size: 1.4rem;
    }

    .slide-rugo .text-rugo_slide a {
        font-size: 1.2rem;
    }

    /*contenedor de galeria*/
    .galeria-container h1 {
        font-size: 1.5rem;
    }

}

@media (max-width:640px) {

    /*Banner TOP*/

    .contenido .box-banner {
        height: 35rem;
    }

    .box-banner .img_banner {

        width: 90%;
        left: 71%;
        top: -5%;
        transform: translateX(-50%);

    }

    /*Banner RUGO*/
    .box-productos_rugo {


        height: 36rem;

    }

    .box-productos_rugo .swiper-rugo {
        position: relative;
        width: 50%;
    }
}

@media (max-width:600px) {


    /*Banner Raspadita*/

    .container-swiper .box-productos_descuentos .img-promocion {
        width: 65%;
        z-index: 3000;
        top: 70%;
        left: 30%;
        rotate: 12deg;
    }

    .section-promociones .container-swiper .box-productos_descuentos .text {

        left: 0;

    }

    .section-promociones .container-swiper .box-productos_descuentos .text h1 {
        font-size: 2.5rem;
        color: var(--naranjatruper);
        -webkit-text-stroke: .5px var(--whitecolor);

    }

    .text h2 {
        font-size: 2.3rem;
        color: var(--naranjatruper);
        font-weight: 600;
        -webkit-text-stroke: .45px var(--whitecolor);
    }

    .text h3 {
        font-size: 1.2rem;
        color: var(--naranjatruper);
        font-weight: 800;
        -webkit-text-stroke: .2px var(--textcolor);
        background: white;
    }

    .section-promociones .container-swiper .box-productos_descuentos .text h4 {
        font-size: .7rem;
        left: 0;
        background: var(--azulrugo);
        width: auto;
    }

    .text .raspadita {
        top: 40%;
        font-size: 3.7rem;
        left: 10%;
        color: #ff8c00;
        text-shadow: 9px 6px 3px var(--textcolor);
        display: none;
    }

    /*Banner asistencia técnica*/
    .container-swiper .banner-asistencia .img-asistencia {
        width: 24%;
        right: 24%;
        top: 60%;
        rotate: -15deg;
        z-index: 2988;
    }

    .container-swiper .banner-asistencia .img-asistencia2 {
        width: 26%;
        right: -2%;
        top: 25%;
        z-index: 2990;
        rotate: 15deg;
    }

    .container-swiper .banner-asistencia .img-asistencia3 {
        width: 21%;
        right: 15%;

        z-index: 2989;
    }

    .container-swiper .banner-asistencia .img-asistencia4 {
        width: 17%;
        right: 4%;
        top: 75%;
        z-index: 3000;
    }

    .container-swiper .banner-asistencia .text h1 {
        -webkit-text-stroke: .2px var(--textcolor);
        font-size: 2rem;
    }

    .container-swiper .banner-asistencia .text h2 {
        font-size: 1.2rem;
    }

    .container-swiper .banner-asistencia .text h4 {
        font-size: .8rem;
        left: 0;
    }

    .container-swiper .banner-asistencia .text span {
        font-size: 1.1rem;
    }

    /*Banner navideño*/

    .navidad-banner {

        height: 15rem;

    }

    .navidad-box .navidad-text h1 {

        font-size: 5.5rem;

    }

    .navidad-box .navidad-text h2 {

        font-size: 1.8rem;

    }

    .navidad-box .navidad-img img {
        display: none;
        width: 35%;

    }

    /*Banner RUGO*/
    .box-productos_rugo {
        margin-top: 22rem;
        height: 35rem;

    }

    .box-productos_rugo .swiper-rugo {
        position: relative;
        width: 75%;
    }

    /*Banner de TOP*/
    .contenido .box-banner {
        position: relative;
        margin: 0;
        height: 34.5rem;
        padding: 0;
        width: 100%;
        
    }

    .box-banner .img_banner {

        width: 92%;
        left: 71%;
        top: -5%;
        transform: translateX(-50%);

    }

    .text-container_banner h1 {
        font-size: 2.1rem;
        letter-spacing: .1rem;
    }

    .box-banner .btn_banner {
        width: 7.5rem;
        height: 7.5rem;
        font-size: 1.2rem;
        outline: .2rem solid var(--whitecolor);
        top: 40%;
    }

    /*Contenedor de galería*/

    .galeria-container {
        height: 28rem;
    }

    .galeria-container .galeria {
        display: flex;
        height: 48vw;
        background: var(--textcolor);
    }

    .galeria img {
        max-width: 100%;
        width: 30rem;
        vertical-align: middle;
        border: .1rem solid var(--textcolor);
        box-sizing: border-box;
        transition: opacity .2s;
    }
}

@media (max-width:540px) {

    /*Cinta con lema*/
    .cinta-lema h1 {
        font-size: 2.3rem;
    }

    /*Banner Raspadita*/
    .section-promociones .container-swiper .box-productos_descuentos .text h1 {
        font-size: 2.2rem;
        color: var(--naranjatruper);
        -webkit-text-stroke: .5px var(--whitecolor);
    }

    .text h2 {
        font-size: 2.1rem;
        color: var(--naranjatruper);
        font-weight: 600;
        -webkit-text-stroke: .45px var(--whitecolor);
    }

    .text h3 {
        font-size: 1rem;
        color: var(--naranjatruper);
        font-weight: 800;
        -webkit-text-stroke: .2px var(--textcolor);
        background: white;
    }

    .section-promociones .container-swiper .box-productos_descuentos .text h4 {
        font-size: .7rem;
        left: 0;
        background: var(--azulrugo);
        width: auto;
    }

    /*Banner RUGO*/

    .box-productos_rugo .text-rugo h1 {
        font-size: 2rem;
    }

    .box-productos_rugo .swiper-rugo {

        position: relative;
        top: 45%;
        width: 80%;
    }

    /*Cinta de direcciones*/
    .direccion_tiendas {
        height: 10rem;
    }

    .direccion_tiendas .info_tienda i {
        font-size: 1.8rem;
        color: var(--alternativecolor);
    }

    .direccion_tiendas .info_tienda h1 {
        font-size: 1.2rem;
        color: var(--rojo);
    }

    .direccion_tiendas .info_tienda h2 {
        font-size: 1.1rem;
        color: var(--secondarycolor);
    }

    /*Banner de TOP*/

    .contenido .box-banner {
        position: relative;
        margin: 0;
        height: 33rem;
        padding: 0;
        width: 100%;
        
    }

    .box-banner .img_banner {

        width: 94%;
        left: 71%;
        top: -2%;
        transform: translateX(-50%);

    }

    .text-container_banner h1 {
        font-size: 2rem;
        letter-spacing: .1rem;
    }

    .box-banner .btn_banner {
        width: 6.8rem;
        height: 6.8rem;
        font-size: 1rem;
        outline: .1rem solid var(--whitecolor);
        top: 40%;
    }
}

@media (max-width:500px) {


    /*Banner asistencia técnica*/
    .container-swiper .banner-asistencia .img-asistencia {
        width: 28%;
        z-index: 2988;
    }

    .container-swiper .banner-asistencia .img-asistencia2 {
        width: 28%;
        z-index: 2990;
    }

    .container-swiper .banner-asistencia .img-asistencia3 {
        width: 27%;
        z-index: 2989;
    }

    .container-swiper .banner-asistencia .img-asistencia4 {
        width: 21%;
        z-index: 3000;
    }

    .container-swiper .banner-asistencia .text {
        left: 27%;
        top: 50%;
        border-radius: 2rem;
    }

    .container-swiper .banner-asistencia .text h1 {
        -webkit-text-stroke: .2px var(--textcolor);
        color: white;
        font-size: 2rem;
        font-weight: 800;
    }

    .container-swiper .banner-asistencia .text h2 {
        font-size: 1rem;
        color: white;
        -webkit-text-stroke: .2px var(--textcolor);
    }


    .container-swiper .banner-asistencia .text h4 {
        font-size: .6rem;
        color: white;
        left: 0;
    }

    .container-swiper .banner-asistencia .text span {
        font-size: 1rem;
        color: white;
    }

    /*Banner navideño*/

    .navidad-banner {
        min-height: 8rem;
        height: 15rem;

    }

    .navidad-banner .navidad-box {
        width: 80%;
        outline: .2rem solid goldenrod;
        border: .7rem solid var(--shadow-color);
    }

    .navidad-box .navidad-text h1 {

        font-size: 3.8rem;

    }

    .navidad-box .navidad-text h2 {

        font-size: 1.3rem;

    }

    .navidad-box .navidad-img img {

        width: 20%;

    }

    /*Banner RUGO*/

    .box-productos_rugo .text-rugo h1 {
        font-size: 2.1rem;
    }

    .slide-rugo .text-rugo_slide h2 {
        font-size: 1.2rem;
    }

    .slide-rugo .text-rugo_slide a {
        font-size: 1.1rem;
    }

    /*Banner de TOP*/

    .contenido .box-banner {
        position: relative;
        margin: 0;
        height: 33.9rem;
        padding: 0;
        width: 100%;
        overflow-x: hidden;
        overflow-y: visible;
    }

    .box-banner .img_banner {
        position: absolute;
        left: 66%;
        top: -2%;
        width: 98%;
    }

    .text-container_banner h1 {
        font-size: 1.8rem;
        letter-spacing: .1rem;
    }

    .box-banner .btn_banner {
        width: 6.8rem;
        height: 6.8rem;
        font-size: 1.2rem;
        outline: .1rem solid var(--whitecolor);
        top: 40%;
    }

    /*Contenedor de galería*/

    .galeria-container {
        height: 22rem;
    }
}

@media (max-width:450px) {



    /*Cinta con lema*/
    .cinta-lema h1 {
        font-size: 2.1rem;
    }

    /*Banner Raspadita*/

    .section-promociones {
        height: 20rem;
    }

    .section-promociones .container-swiper .box-productos_descuentos .text h1 {
        font-size: 2rem;
        color: var(--naranjatruper);
        -webkit-text-stroke: .5px var(--whitecolor);
    }

    .text h2 {
        font-size: 2rem;
        color: var(--naranjatruper);
        font-weight: 600;
        -webkit-text-stroke: .45px var(--whitecolor);
    }

    .text h3 {
        font-size: .8rem;
        color: var(--naranjatruper);
        font-weight: 800;
        -webkit-text-stroke: .2px var(--textcolor);
        background: white;
    }

    .section-promociones .container-swiper .box-productos_descuentos .text h4 {
        font-size: .5rem;
        left: 0;
        background: var(--azulrugo);
        width: auto;
    }

    /*Banner asistencia técnica*/

    .container-swiper .banner-asistencia .text h1 {
        -webkit-text-stroke: .2px var(--textcolor);
        color: white;
        font-size: 1.8rem;
        font-weight: 800;
    }

    .container-swiper .banner-asistencia .text h2 {
        font-size: 1.1rem;
        color: white;
        -webkit-text-stroke: .2px var(--textcolor);
    }


    .container-swiper .banner-asistencia .text h4 {
        font-size: .7rem;
        color: white;
        left: 0;
    }

    .container-swiper .banner-asistencia .text span {
        font-size: 1rem;
        color: white;
    }

    /*Banner RUGO*/

    .box-productos_rugo .text-rugo h1 {
        font-size: 1.8rem;
    }

    .box-productos_rugo .swiper-rugo {
        position: relative;
        top: 52%;
    }

    .slide-rugo .text-rugo_slide {
        height: 6rem;
    }

    .slide-rugo .text-rugo_slide h2 {
        font-size: 1.1rem;
    }

    .slide-rugo .text-rugo_slide a {
        font-size: 1rem;
    }

    /*Cinta de direcciones*/
    .direccion_tiendas {
        height: 8rem;
    }

    .direccion_tiendas .info_tienda i {
        font-size: 1.8rem;
        color: var(--alternativecolor);
    }

    .direccion_tiendas .info_tienda h1 {
        font-size: 1rem;
        color: var(--rojo);
    }

    .direccion_tiendas .info_tienda h2 {
        font-size: 1rem;
        color: var(--secondarycolor);
    }

    .direccion_tiendas .info_tienda:nth-child(1) {
        border-left: .1rem solid var(--secondarycolor);
    }

    .direccion_tiendas .info_tienda:nth-child(2) {
        border-left: .1rem solid var(--secondarycolor);
        border-right: .1rem solid var(--secondarycolor);
    }

    .direccion_tiendas .info_tienda:nth-child(3) {

        border-right: .1rem solid var(--secondarycolor);
    }

    /*Banner de TOP*/

    .contenido .box-banner {
        position: relative;
        margin: 0;
        height: 32rem;
        padding: 0;
        width: 100%;
        
    }

    .box-banner .img_banner {
        position: absolute;
        left: 66%;
        top: 1%;
        width: 100%;
    }

    .text-container_banner h1 {
        font-size: 1.9rem;
        letter-spacing: .1rem;
    }

    .box-banner .btn_banner {
        width: 7rem;
        height: 7rem;
        font-size: 1rem;
        outline: .1rem solid var(--whitecolor);
        top: 40%;
    }

    /*contenedor de galeria*/
    .galeria-container h1 {
        font-size: 1.4rem;
    }
}

@media (max-width:400px) {

    /*Banner de TOP*/

    .contenido .box-banner {
        position: relative;
        margin: 0;
        height: 30rem;
        padding: 0;
        width: 100%;
        
    }

    .box-banner .img_banner {
        position: absolute;
        left: 66%;
        top: 4%;
        width: 110%;
    }


    /*Banner navideño*/

    .navidad-banner {
        height: 13rem;
    }

    .navidad-box .navidad-text h1 {

        font-size: 3.1rem;

    }

    .navidad-box .navidad-text h2 {
        font-size: .9rem;
    }

    /*Banner RUGO*/

    .box-productos_rugo {
        margin-top: 18rem;
        height: 35rem;

    }

    .box-productos_rugo .text-rugo h1 {
        font-size: 1.8rem;
    }

    .box-productos_rugo .swiper-rugo {
        position: relative;
        top: 48%;
    }

    .slide-rugo .text-rugo_slide h2 {
        font-size: 1rem;
    }

    .slide-rugo .text-rugo_slide a {
        font-size: 1rem;
    }

    /*Cinta de direcciones*/
    .direccion_tiendas {
        top: 10%;
        height: auto;
        border: .1rem solid red;
        position: relative;

    }

    .direccion_tiendas .info_tienda i {
        font-size: 1.5rem;
        color: var(--alternativecolor);
    }

    .direccion_tiendas .info_tienda h1 {
        font-size: .9rem;
        color: var(--rojo);
    }

    .direccion_tiendas .info_tienda h2 {
        font-size: .9rem;
        color: var(--secondarycolor);
    }
}

@media (max-width:380px) {

    /*Banner Raspadita*/
    .section-promociones {
        height: 17rem;
    }

    .section-promociones .container-swiper .box-productos_descuentos .text h1 {
        font-size: 1.8rem;
        color: var(--naranjatruper);
        -webkit-text-stroke: .4px var(--whitecolor);
    }

    .text h2 {
        font-size: 1.8rem;
        color: var(--naranjatruper);
        font-weight: 600;
        -webkit-text-stroke: .4px var(--whitecolor);
    }

    .text h3 {
        font-size: .8rem;
        color: var(--naranjatruper);
        font-weight: 800;
        -webkit-text-stroke: .2px var(--textcolor);
        background: white;
    }

    /*Banner asistencia técnica*/

    .container-swiper .banner-asistencia .text h1 {
        -webkit-text-stroke: .2px var(--textcolor);
        color: white;
        font-size: 1.6rem;
        font-weight: 800;
    }

    .container-swiper .banner-asistencia .text h2 {
        font-size: .8rem;
        color: white;
        -webkit-text-stroke: .2px var(--textcolor);
    }


    .container-swiper .banner-asistencia .text h4 {
        font-size: .6rem;
        color: white;
        left: 0;
    }

    .container-swiper .banner-asistencia .text span {
        font-size: .8rem;
        color: white;
    }

    /*Banner RUGO*/

    .box-productos_rugo .text-rugo h1 {
        font-size: 1.5rem;
    }

    .box-productos_rugo .swiper-rugo {
        position: relative;
        top: 51%;
        width: 90%;
    }

    /*Cinta de direcciones*/
    .direccion_tiendas {
        height: 9rem;
    }

    .direccion_tiendas .info_tienda i {
        font-size: 1.7rem;
        color: var(--alternativecolor);
    }

    .direccion_tiendas .info_tienda h1 {
        font-size: .8rem;
        color: var(--rojo);
    }

    .direccion_tiendas .info_tienda h2 {
        font-size: .7rem;
        color: var(--secondarycolor);
    }

    /*Banner de TOP*/

    .contenido .box-banner {
        position: relative;
        margin: 0;
        height: 30rem;
        padding: 0;
        width: 100%;

    }

    .box-banner .img_banner {
        position: absolute;
        width: 115%;
    }


    .text-container_banner h1 {
        font-size: 1.8rem;
        letter-spacing: .1rem;
    }

    .box-banner .btn_banner {
        width: 5.7rem;
        height: 5.7rem;
        font-size: 1rem;
        outline: .1rem solid var(--whitecolor);
        top: 50%;
    }

    /*Contenedor de galería*/

    .galeria-container {
        height: 17rem;
    }
}

@media (max-width:350px) {


    /*Banner Raspadita*/
    .section-promociones {
        height: 17rem;
    }

    .section-promociones .container-swiper .box-productos_descuentos .text h1 {
        font-size: 1.5rem;
        color: var(--naranjatruper);
        -webkit-text-stroke: .2px var(--whitecolor);
    }

    .text h2 {
        font-size: 1.5rem;
        color: var(--naranjatruper);
        font-weight: 600;
        -webkit-text-stroke: .2px var(--whitecolor);
    }

    .text h3 {
        font-size: .6rem;
        color: var(--naranjatruper);
        font-weight: 800;
        -webkit-text-stroke: .2px var(--textcolor);
        background: white;
    }

    /*Banner asistencia técnica*/

    .container-swiper .banner-asistencia .text h1 {
        -webkit-text-stroke: .2px var(--textcolor);
        color: white;
        font-size: 1.4rem;
        font-weight: 800;
    }

    .container-swiper .banner-asistencia .text h2 {
        font-size: .7rem;
        color: white;
        -webkit-text-stroke: .2px var(--textcolor);
    }

    .container-swiper .banner-asistencia .text h4 {
        font-size: .5rem;
        color: white;
        left: 0;
    }

    .container-swiper .banner-asistencia .text span {
        font-size: .9rem;
        color: white;
    }

    /*Banner RUGO*/

    .box-productos_rugo .swiper-rugo {
        position: relative;
        top: 49%;

    }

    .slide-rugo .text-rugo_slide {
        height: 5rem;
    }

    .slide-rugo .text-rugo_slide h2 {
        font-size: .9rem;
    }

    .slide-rugo .text-rugo_slide a {
        font-size: .9rem;
    }

    /*Banner de TOP*/

    .contenido .box-banner {
        position: relative;
        margin: 0;
        height: 27rem;
        padding: 0;
        width: 100%;

    }

    .box-banner .img_banner {
        position: absolute;
        width: 118%;
        left: 75%;
    }

    .text-container_banner h1 {
        font-size: 1.6rem;
        letter-spacing: .1rem;
    }

    .box-banner .btn_banner {
        width: 5rem;
        height: 5rem;
        font-size: .7rem;
        outline: .1rem solid var(--whitecolor);
        top: 50%;
    }

    /*Contenedor de galería*/

    .galeria-container {
        height: 14rem;
    }
}

@media (max-width:320px) {

    /*Banner Raspadita*/
    .section-promociones {
        height: 15rem;
    }

    .section-promociones .container-swiper .box-productos_descuentos .text h1 {
        font-size: 1.3rem;
        color: var(--naranjatruper);
        -webkit-text-stroke: .15px var(--whitecolor);
    }

    .text h2 {
        font-size: 1.3rem;
        color: var(--naranjatruper);
        font-weight: 600;
        -webkit-text-stroke: .15px var(--whitecolor);
    }

    .text h3 {
        font-size: .6rem;
        color: var(--naranjatruper);
        font-weight: 800;
        -webkit-text-stroke: .2px var(--textcolor);
        background: white;
    }

    .section-promociones .container-swiper .box-productos_descuentos .text h4 {
        font-size: .45rem;
    }

    /*Banner asistencia técnica*/

    .container-swiper .banner-asistencia .text h1 {
        -webkit-text-stroke: .2px var(--textcolor);
        color: white;
        font-size: 1.3rem;
        font-weight: 800;
    }

    .container-swiper .banner-asistencia .text h2 {
        font-size: .6rem;
        color: white;
        -webkit-text-stroke: .2px var(--textcolor);
    }

    .container-swiper .banner-asistencia .text h4 {
        font-size: .4rem;
        color: white;
        left: 0;
    }

    .container-swiper .banner-asistencia .text span {
        font-size: .8rem;
        color: white;
    }

    /*Banner RUGO*/
    .box-productos_rugo {

        height: 27rem;
        background-image: url('/src/Inicio/Portada RUGO.jpg');

    }

    .box-productos_rugo .swiper-rugo {
        position: relative;
        top: 40%;
        width: 90%;
    }



    /*Cinta de direcciones*/
    .direccion_tiendas {
        height: 10rem;
    }


}