:root {
    --font-size: 1rem;
    --line-height: 1.4em;
    --font-color: #222;
    --primary: #00559F; /* Color precios, títulos...*/
    --secondary: #E22019; /*Color botones, link*/
    --primary-invert: #fff; /*Texto de los botones*/
    --secondary-invert: #fff; /*Texto de los botones*/
    --radius1: 4px; /*Border-radius de los botones*/
    --weight-fa: 300; /*Weight de los iconos*/
    --font1: 'Open Sans';
    --font2: 'Changa';
    --bold1: 700;
    --bold2: 600;
    --radius-default: 0px; /*Border-radius de las imágenes de los paneles*/
    --padding-panelsimple: 20px; /*Distancia alrededor del panel simple. Debemos poner "px". Recomendado cuando hay borde-radius: 16px*/
    --mosaico-margin: 8px; /*Espacio entre elementos de los mosaicos y box2 [Se puede cambiar en 768px]*/
    --descriptivo-margin: 40px; /*Espacio entre elementos de los paneles descriptivos [Se puede cambiar en 768px]*/
    --descriptivo-reverse: column; /*[PC](column/column-reverse) Configura si interesa alternar elementos con imagen y texto revertidos*/
    --menu-height: 40px; /*Altura del menú en slide (categs2)*/
    --menu-bg: #fff; /*Color de fondo del menú en slide (categs2)*/
    --productos-margin: 16px; /*Espacio entre elementos de los productos de portada, resultados, box3, box4 y box6)*/
    --section-margin: 60px; /* Margen entre secciones de la portada */
    --max-width: 1280px; /* Ancho máximo de la tienda */
}

/* Titulos */
.title1 { font-family: var(--font2); color: var(--primary)}
.title2 {
    font-family: var(--font2);
    color: var(--primary)
}
.title3 { font-family:  var(--font2);}

#PORT01 .title1:after, #PORT01 .title2:after {
    content: '';
    width: 160px;
    height: 2px;
    display: block;
    margin: 0.4em auto 0;
    background: var(--secondary);
}

.panel__desc--skin1 .boxItem .bicTitle {
    color: var(--primary)
}
.panel__desc--skin1 .boxItem .bicTitle:after {
    content: '';
    width: 160px;
    height: 2px;
    display: block;
    margin-top: 0.4em;
    background: var(--secondary);
}

.panel__simple--skin1 .switem .switeminfo .switemtitle .titulo2,
.panel__simple--skin2 .switem .switeminfo .switemtitle .titulo2,
.panel__simple--skin3 .switem .switeminfo .switemtitle .titulo2,
.panel__simple--skin4 .switem .switeminfo .switemtitle .titulo2,
.panel__simple--skin5 .switem .switeminfo .switemtitle .titulo2 {
    font-family: var(--font1);
}

/* PORTADA */
#PORT01 > .box4.flash{background: var(--primary); background-image:linear-gradient(rgba(255,255,255,0.90),rgba(255,255,255,0.90)); border:0;}
#PORT01 > .slideCupones3.flash{background: var(--primary); background-image:linear-gradient(rgba(255,255,255,0.90),rgba(255,255,255,0.90)); border:0;}

.panel--nogap-up{
    padding-top:0;
}

/* Tamaños de las imagenes en los paneles*/
@supports (aspect-ratio: 8 / 3) {
    .panel__simple--skin2 .switem .switemimg:last-child{padding:0; aspect-ratio: 8 / 3;}
}
@supports (aspect-ratio: 4 / 3) {
    .panel__simple--skin2 .switem .switemimg:not(:last-child){padding:0; aspect-ratio: 4 / 3;}
    .mosaico--skin1 .boxCont .boxItem .boxItemImg img{aspect-ratio: 4 / 3;}
    .panel__doble--skin1 .boxCont .boxItem > div{padding:0; aspect-ratio: 4 / 3;}
}

@supports (aspect-ratio: 3 / 4) {
    .panel__triple--skin1 .boxCont .boxItem > div{padding:0; aspect-ratio: 3 / 4;}
}

@supports (aspect-ratio: 2 / 1) {
    .panel__simple--skin1 .switem .switemimg {padding:0; aspect-ratio: 2 / 1;}
}

#PER01{
text-align:center;
padding:0 16px 40px;
max-width:1024px;
margin:20px auto 0;
}
#PER01 p{margin-bottom:1rem;}
#PER01 img {
    border: 1px solid #000;
    display: inline-block;
    max-width: 100%;
}
/*################
##### 1 0 2 3 ####
################*/
@media screen and (min-width: 1023px) {
}

@media screen and (max-width: 1023px) {
   
}

/*################
#####  9 6 0  ####
################*/
@media screen and (max-width: 960px) {
 
}

/*################
#####  7 6 8  ####
################*/
@media screen and (min-width: 768px) {
  
}

@media screen and (max-width: 768px) {
    :root {--mosaico-margin: 8px; /*[Móvil]Espacio entre elementos de los mosaicos y box2*/
           --descriptivo-margin: 20px; /*[Móvil]Espacio entre elementos de los paneles descriptivos*/
            --section-margin: 40px;/*[Móvil]Espacio entre secciones de portada */
    }
    @supports (aspect-ratio: 4 / 3) {
        .panel__simple--skin2 .switem .switemimg:last-child{aspect-ratio: 4 / 3;}
    }
    @supports (aspect-ratio: 4 / 3) {
        .panel__simple--skin1 .switem .switemimg{aspect-ratio: 4 / 3;}
    }
    
}

/*################
#####  6 4 0  ####
################*/
@media screen and (min-width: 640px) {
        
}

@media screen and (max-width: 640px) {
    :root {
            --productos-margin: 12px; /*[Móvil]Espacio entre elementos de los productos de portada, resultados, box3, box4 y box6)*/
    }
      @supports (aspect-ratio: 16 / 9) {
        .panel__doble--skin1 .boxCont .boxItem > div{ aspect-ratio: 4 / 3;}
    } 
    @supports (aspect-ratio: 1 / 1) {
        .panel__simple--skin1 .switem .switemimg{aspect-ratio: 1 / 1;}
    }
}

/*################
#####  4 8 0  ####
################*/
@media screen and (max-width: 480px) {

    /*#Res .RCRProdsCont { grid-template-columns: 1fr; }*/


}

/***************************
BUTTON
**************************/
.button {
    position: relative;
    padding: 0.5em 1em;
    display: inline-block;
    text-decoration: none;
    border-radius: var(--radius1);
    margin: 2px;
    vertical-align: middle;
    cursor: pointer;
    text-decoration: none;
    font-weight: var(--bold1);
    overflow: hidden;
}

    .button > * {
        position: relative;
        z-index: 1;
    }

.button i {
    transition: transform 0.3s ease-out;
}

    .button i:last-child {
        margin-left: 0.5em;
    }

    .button i:first-child {
        margin-right: 0.5em;
    }

/* button small */
.button.button--s {
    font-size: 0.9rem;
    line-height: var(--line-height);
}


/* button ico */
.button--ico {
    padding: 0;
    width: 38px;
    height: 38px;
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .button--ico i:first-child,
    .button--ico i:last-child {
        margin: 0;
    }

.button.button--ico:hover i,
.button.button--ico:active i,
.button.button--ico:focus i {
    transform: translateX(0);
    transform: rotate(360deg);
}

/* button ico small */
.button--ico.button--s {
    padding: 0;
    width: 28px;
    height: 28px;
    margin: 0 0 0 0.5rem;
    line-height: var(--line-height);
    font-size: 0.9rem;
}

.button--ico span {
    display: none;
}


/* bg whatsapp */
.button--whatsapp {
    background: #1bd741;
    color: #fff;
}
footer{
    background: var(--primary);
}
    footer:has(.dvCajaBannerPerso.FICBox) .footerInfo .footerInfoCont .dvCajaBannerPerso.FICBox nav a{
        background: var(--secondary);
    }

.prodlist, .box4, #PORT02, #FICHA02 {
    background: #f0f0f0;
}
.contactBox .socialUl li{
    background: var(--primary);
}
.contactBox .socialUl .phone a, .contactBox .socialUl .mail a, .contactBox .socialUl .mobile a {
    color: white;
}
.panel__simple--skin2{
    max-width: 100%;
}