/*To Top Scroll Escritorio*/

.to-top-button {
    visibility: hidden;
    position: fixed;
    font-size: 26px;
    color: #fff;
    width: 32px;
    height: 26px;
    right: 30px;
    bottom: 30px;
    opacity: 0;
    padding: 10px 8px;
    cursor: pointer;
    transition: opacity .3s ease-in;
    box-sizing: content-box;
    background-color: #000;
    -webkit-border-radius: 5%;
    -moz-border-radius: 5%;
    border-radius: 5%;
    z-index: 9999;
}

.to-top-button.scroll-active {
    visibility: visible;
    opacity: 0.5;
}

/*To Top Scroll Movil*/

.to-top-button-movil {
    visibility: hidden;
    position: fixed;
    font-size: 26px;
    color: #fff;
    width: 32px;
    height: 26px;
    left: 30px;
    bottom: 30px;
    opacity: 0;
    padding: 10px 8px;
    cursor: pointer;
    transition: opacity .3s ease-in;
    box-sizing: content-box;
    background-color: #000;
    -webkit-border-radius: 5%;
    -moz-border-radius: 5%;
    border-radius: 5%;
    z-index: 9999;
}

.to-top-button-movil.scroll-active {
    visibility: visible;
    opacity: 0.5;
}

/*Social Icons 28px (svg)*/

/*Social icons (contenedor y titulo header)*/

.social-icons-contenedor {
    padding: 30px 30px 50px 30px;
}

.social-icons-contenedor .social-title {
    font-size: 16px;
    margin-bottom: 20px;
}

@media (min-width: 961px) {
    .social-icons-contenedor {
        display: none;
    }
}

/*Social Icons (Diseño general)*/

.social-icons {
    display: inline-block;
    border: 1px solid #ffc940 !important;
    border-radius: 50%;
    margin: 7px 12px;
}

.social-icons svg {
    width: 36px;
    height: 36px;
}

#facebook-icon {
    background-color: #2882ff50;
}

.solid #facebook-icon {
    background-color: #2882ff;
}

#facebook-icon svg {
    fill: #fff;
    margin-bottom: -8px;
}

#x-icon {
    background-color: #00000050;
}

.solid #x-icon {
    background-color: #000000;
}

#x-icon svg {
    fill: #fff;
    margin: 5.2px -5.5px -13px 5.5px;
    padding: 1px;
}

#youtube-icon {
    background-color: #FF003350;
}

.solid #youtube-icon {
    background-color: #FF0033;
}

#youtube-icon svg {
    margin: 9.2px -6.2px -17px 6.2px;
}

#instagram-icon {
    background: #833ab450;
    background: linear-gradient( to right, #833ab450, #fd1d1d50, #fcb04550);
}

.solid #instagram-icon {
    background: #833ab4;
    background: linear-gradient( to right, #833ab4, #fd1d1d, #fcb045);
}

#instagram-icon svg {
    fill: #fff;
    margin: 3.2px -5px -11px 5px;
    padding: 1px;
}

#tiktok-icon {
    background-color: #00000050;
}

.solid #tiktok-icon {
    background-color: #000000;
}

#tiktok-icon svg {
    margin: 0px 0px -8px 0px;
    padding: 2px;
}

#linkedin-icon {
    background-color: #1564e550;
}

.solid #linkedin-icon {
    background-color: #1564e5;
}

#linkedin-icon svg {
    fill: #fff;
    margin: 4.2px -4px -12px 4px;
    padding: 1px;
}

#whatsapp-icon {
    background-color: #25D36650;
}

.solid #whatsapp-icon {
    background-color: #25D366;
}

#whatsapp-icon svg {
    margin: 4.2px -4px -12px 4px;
    padding: 1px;
}

#telegram-icon {
    background-color: #5091fa50;
}

.solid #telegram-icon {
    background-color: #5091fa;
}

#telegram-icon svg {
    fill: #fff;
    margin: 3.2px -1.5px -11px 1.5px;
    padding: 1px;
}

#grupos-icon {
    background-color: #3072ed50;
}

.solid #grupos-icon {
    background-color: #3072ed;
}

#grupos-icon svg {
    fill: #fff;
    margin: 3.2px -4px -11px 4px;
    padding: 1px;
}

#newsletter-icon {
    background-color: #ca501450;
}

.solid #newsletter-icon {
    background-color: #ca5014;
}

#newsletter-icon svg {
    fill: #fff;
    margin: 4.2px -4.5px -12px 4.5px;
    padding: 1px;
}

#snapchat-icon {
    background-color: #ffff0050;
}

.solid #snapchat-icon {
    background-color: #ffff00;
}

#snapchat-icon svg {
    margin: 4.2px -3.5px -12px 3.5px;
    padding: 1px;
}

#twitch-icon {
    background-color: #b915f750;
}

.solid #twitch-icon {
    background-color: #b915f7;
}

#twitch-icon svg {
    margin: 5.2px -3px -13px 3px;
    padding: 1px;
}

#pinterest-icon {
    background-color: #E6002350;
}

.solid #pinterest-icon {
    background-color: #E60023;
}

#pinterest-icon svg {
    fill: #fff;
    margin: 0 0px -8px 0px;
    padding: 5px;
}

/*Regalo Icono en Header*/

/*Adaptación del header*/

@media (min-width: 961px) {
    .header #header-grid .header-main-inner .container .row {
        grid-template-columns: 185px calc(100% - 185px);
    }
    .header #header-grid .header-main-inner .container .row .hfg-slot.left {
        display: block;
    }
    .header #header-grid .header-main-inner .container .row .hfg-slot.left .builder-item--logo {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

@media only screen and (max-width: 960px) {
    .hfg-slot.left .builder-item.mobile-left {
        display: block !important;
        width: 185px;
    }
    .hfg-slot.left .builder-item.mobile-left .builder-item--logo {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

/*Caja de regalo*/

.caja-de-regalo-contenedor {
    display: block;
    width: 36px;
    height: 36px;
    cursor: pointer;
}

.caja-de-regalo-contenido {
    display: block;
    position: relative;
    width: 36px;
    height: 36px;
    margin: 0 auto;
    border: 2px solid #c59e25;
    border-radius: 50%;
    background-color: #ff000036;
    top: 0.5px;
}

.caja-de-regalo-cuerpo {
    display: block;
    position: relative;
    top: 13.5px;
    height: 12px;
    width: 17px;
    margin: auto;
    background-color: #cc231e;
    border-bottom-left-radius: 5%;
    border-bottom-right-radius: 5%;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.3);
    background: linear-gradient(#762c2c, #ff0303);
}

.caja-de-regalo-cuerpo::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 2.8px;
    background: linear-gradient(#ffffff, #ffefa0);
}

.caja-de-regalo-tapa {
    position: absolute;
    z-index: 1;
    left: -1px;
    bottom: 90%;
    height: 40px;
    background-color: #cc231e;
    height: 5px;
    width: 19px;
    border-radius: 5%;
    box-shadow: 0 8px 4px -4px rgba(0, 0, 0, 0.3);
}

.caja-de-regalo-tapa::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 2.8px;
    background: linear-gradient(#ffefa0, #fff);
}

.caja-de-regalo-liston {
    z-index: 1;
    height: 100%;
}

.caja-de-regalo-liston::before, .caja-de-regalo-liston::after {
    content: "";
    width: 5.333333px;
    height: 5.333333px;
    border: 1px solid white;
    border-radius: 50% 50% 0 50%;
    position: absolute;
    bottom: 99%;
    z-index: -1;
}

.caja-de-regalo-liston::before {
    left: 50%;
    -webkit-transform: translateX(-100%) skew(10deg, 10deg);
    transform: translateX(-100%) skew(10deg, 10deg);
}

.caja-de-regalo-liston::after {
    left: 50%;
    -webkit-transform: translateX(0%) rotate(90deg) skew(10deg, 10deg);
    transform: translateX(0%) rotate(90deg) skew(10deg, 10deg);
}

/*Animación tapa de regalo*/

.caja-de-regalo-tapa.sacudida {
  animation: sacudirTapa 0.2s ease-in-out 3;
}

@keyframes sacudirTapa {
  0% {
    transform: rotate(0deg);
  }
  33% {
    transform: rotate(10deg);
  }
  66% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/*Panel Caja de Regalo*/

.panel-caja-regalo-superior {
    position: absolute;
    display: none;
    top: 51px;
    padding-top: 57px;
    width: 210px;
    height: unset;
}

.panel-regalo-activo {
    display: block !important;
}

@media only screen and (max-width: 960px) {
    .panel-caja-regalo-superior {
        left: 27px;
    }
}

@media (min-width: 961px) {
    .panel-caja-regalo-superior {
        left: 27px;
    }
}

.panel-caja-regalo-superior .panel-caja-regalo-contenedor {
    display: block;
    width: 210px;
    height: unset;
    background-color: #eee;
}

.panel-caja-regalo-superior .panel-caja-regalo-contenedor .panel-caja-regalo-contenido {
    display: flex;
    width: 210px;
    height: unset;
    background-color: #ffd385;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(128, 128, 128, 0.75);
    -moz-box-shadow: 0px 0px 10px 0px rgba(128, 128, 128, 0.75);
    box-shadow: 0px 0px 10px 0px rgba(128, 128, 128, 0.75);
}

.panel-caja-regalo-superior .panel-caja-regalo-contenedor .panel-caja-regalo-contenido .panel-caja-regalo-triangulo {
    position: absolute;
    top: -1px;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #ffd28f;
    width: 0;
    height: 0;
    padding-top: 46px;
    background-color: transparent;
}

@media only screen and (max-width: 960px) {
    .panel-caja-regalo-superior .panel-caja-regalo-contenedor .panel-caja-regalo-contenido .panel-caja-regalo-triangulo {
        left: 95px;
    }
}

@media (min-width: 961px) {
    .panel-caja-regalo-superior .panel-caja-regalo-contenedor .panel-caja-regalo-contenido .panel-caja-regalo-triangulo {
        left: 95px;
    }
}

.panel-caja-regalo-superior .panel-caja-regalo-contenedor .panel-caja-regalo-contenido .panel-caja-regalo-seccion {
    display: flex;
    width: 210px;
    height: 350px;
    background-color: #ffd385;
}

/*Notificacion icono en Header*/

/*Adaptación del header*/

@media (min-width: 961px) {
    .header #header-grid .header-main-inner .container .row {
        grid-template-columns: 185px calc(100% - 185px);
    }
    .header #header-grid .header-main-inner .container .row .hfg-slot.left {
        display: block;
    }
    .header #header-grid .header-main-inner .container .row .hfg-slot.left .builder-item--logo {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

@media only screen and (max-width: 960px) {
    .hfg-slot.left .builder-item.mobile-left {
        display: block !important;
        width: 185px;
    }
    .hfg-slot.left .builder-item.mobile-left .builder-item--logo {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

/*Campana de notificación*/

.campana-notificacion-contenedor {
    display: block;
    width: 36px;
    height: 36px;
    cursor: pointer;
}

.campana-notificacion-contenedor .campana-notificacion-contenido {
    display: block;
    position: relative;
    width: 36px;
    height: 36px;
    margin: 0 auto;
    border: 2px solid #ff6332;
    border-radius: 50%;
    background-color: #ff000036;
    top: 0.5px;
}

.campana-notificacion-contenedor .campana-notificacion-contenido .campana-notificacion {
    display: flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
}

.campana-notificacion-contenedor .campana-notificacion-contenido .campana-notificacion .icono-campana {
    fill: #ffe345;
    width: 17px;
    height: 17px;
}

/*Animación Campana Notificacion*/

.campana-notificacion-contenedor .campana-notificacion-contenido .campana-notificacion .icono-campana.sacudida {
    animation: campanaSacudir .5s cubic-bezier(.36,.07,.19,.97) both;
    backface-visibility: hidden;
    transform-origin: top right;
}

@keyframes campanaSacudir {
  0% { transform: rotate(0); }
  15% { transform: rotate(5deg); }
  30% { transform: rotate(-5deg); }
  45% { transform: rotate(4deg); }
  60% { transform: rotate(-4deg); }
  75% { transform: rotate(2deg); }
  85% { transform: rotate(-2deg); }
  92% { transform: rotate(1deg); }
  100% { transform: rotate(0); }
}

/*Panel Campana Notificacion*/

.panel-notificacion-superior {
    position: absolute;
    display: none;
    top: 51px;
    padding-top: 57px;
    width: 210px;
    height: unset;
}

.panel-notificacion-activo {
    display: block !important;
}

@media only screen and (max-width: 960px) {
    .panel-notificacion-superior {
        left: 27px;
    }
}

@media (min-width: 961px) {
    .panel-notificacion-superior {
        left: 27px;
    }
}

.panel-notificacion-superior .panel-notificacion-contenedor {
    display: block;
    width: 210px;
    height: unset;
    background-color: #eee;
}

.panel-notificacion-superior .panel-notificacion-contenedor .panel-notificacion-contenido {
    display: flex;
    width: 210px;
    height: unset;
    background-color: #ffd385;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(128, 128, 128, 0.75);
    -moz-box-shadow: 0px 0px 10px 0px rgba(128, 128, 128, 0.75);
    box-shadow: 0px 0px 10px 0px rgba(128, 128, 128, 0.75);
}

.panel-notificacion-superior .panel-notificacion-contenedor .panel-notificacion-contenido .panel-notificacion-triangulo {
    position: absolute;
    top: -1px;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #ffd28f;
    width: 0;
    height: 0;
    padding-top: 46px;
    background-color: transparent;
}

@media only screen and (max-width: 960px) {
    .panel-notificacion-superior .panel-notificacion-contenedor .panel-notificacion-contenido .panel-notificacion-triangulo {
        left: 95px;
    }
}

@media (min-width: 961px) {
    .panel-notificacion-superior .panel-notificacion-contenedor .panel-notificacion-contenido .panel-notificacion-triangulo {
        left: 95px;
    }
}

.panel-notificacion-superior .panel-notificacion-contenedor .panel-notificacion-contenido .panel-notificacion-seccion {
    display: flex;
    width: 210px;
    height: 350px;
    background-color: #ffd385;
}