@font-face {
  font-family: fuente;
  src: url(fonts/avenir.woff);
}


:root {

    /*--------------------- Colores configurables, se sobrescriben en _Layout.cshtml */
    --colorMenu:rgba(255, 255, 255, 0.75);
    /*---------------------*/


    --borderInput: #366086;  /*border para los inputbox*/
    
    --fuenteMenu:   #366086;
    --fuenteMenu2:  #366086;

    --fondo_oscuro: #e4edf4;


    --colorH1: #366086;
    --colorTexto:#366086;

    --errorTexto:#ad0808;
    --entidadInactiva:#e11e1e;

    --botonBg:          #366086;
    --botonFg:          #ffffff;
    --botonHoverBg:     #006eab;
    --botonHoverFg:     #ffffff;

    --productBox_borde:#ff6a00;
    --productBox_titulo:#366086;
    --productBox_tituloHover:#cd5d2f;
    --productBox_edadMin:#303880;
    --productBox_pvp:#b01d1f;
    --productBox_pvpanterior:#747678;
    --productBox_gratis:#01bd0b;
    --productBox_novedad:#69a341;
    --productBox_oferta:#ffd200;
    --productBox_descuento:#b01d1f;

    --fichaArticulo_tituloPanel:#636363;
    --fichaArticulo_fondoPanel:#e4edf4;
    --fichaArticulo_textoNoDisponible:#e11e1e;

    --carrito_cantidadFondo:#f58c0f;
    --carrito_cantidadTexto:#fff;

    --cabeceraFondo:#e4edf4;

    --footerFondo:#e4edf4;
    --footerTexto:#8e8d9d;

    --migasPan_texto:#366086;

    --boton_comprar_fondo:#b01d1f;
    --boton_comprar_texto:#fff;

    --tituloSeccion_barra1: white;
    --tituloSeccion_barra2: #ff6a00;
    --tituloSeccion_texto: #366086;

    --liberadorStress_borde:#366086;
    --liberadorStress_texto:#366086;

    /*---------temporales*/

    --fondo1:       #e40413;
    
    --azul:             #283583;
    --grisOscuro:       #575757;
    --grisClaro:        #d0d0d0;
    --rojo:             #bf1a49;
    --azulClaro:        #006eab;
    --azulOscuro:       #122c51;
    --verde:            #00806e;
    --naranja:          #e94f2d;
    --amarillo:         #EDB200;





    --botonCancelarBg:  #bf1a49;
    --botonCancelarFg:  #ffffff;

    --focusedBg:rgb(250, 255, 205);
}



* {
    margin: 0;
    padding: 0;
    outline: none;
    text-decoration: none;
    box-sizing: border-box;
    font-family:fuente;
}

html {
    margin:0!important;
    display:block;
}

body {
    display: flex;
    background-color: #fff;
    min-height: 100vh;
    flex-direction: column;
    justify-content: space-between;
    font-size:14px;
}

img {
    max-width:100%;
}

.oculto {
    display:none;
}

h1 {
    color:var(--colorH1);
    font-size:28px;
}

h2 {
    color:var(--colorH1);
    font-size:24px;
}
h3 {
    color:var(--colorH1);
    font-size:1.5em;
}
p {
    margin-bottom:10px;
}


.entidadInactiva {
    text-align: center;
    margin: 40px 20px 20px 20px;
    font-weight: bold;
    font-size: 20px;
    color: var(--entidadInactiva);
}

/*---------------------------------------------- Errores validación */
input.error { 
    border-color:red;
}
select.error { 
    border-color:red;
}
.msjError {
    background-color:lightcoral;
    color:white;
    border-radius:10px;
    padding:0 10px;    
}



/*---------------------------------------------- Cabecera */
#cabecera {
    position:sticky;
    top:0;
    z-index:100;

    width:100%;
    display:flex;
    justify-content: center;
    /*padding:20px*/

    flex-direction: column;
    padding: 5px 20px 20px 20px;

    transition:all ease-in-out .5s;
}

body.body_Home #cabecera {
    position:fixed;
}


body[data-scrolly="0"]  #cabecera
{
    background-color:var(--cabeceraFondo);
}

body:not([data-scrolly="0"])  #cabecera
{
    padding-top:0px;

}



#cabecera > .barra {
    /*max-width: 1200px;*/
    width:100%;
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: space-between;
    grid-gap:50px;
    padding:10px;
    background-color:var(--colorMenu);
    border-radius:10px;
}



body:not([data-scrolly="0"])  #cabecera > .barra {
    padding:5px;
}

#cabecera > .barra > .izquierda {
    min-width: 100px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}
#cabecera > .barra > .centro {
    flex-grow:1;
    display:flex;
    flex-direction:column;
}

#cabecera > .barra > .derecha {
    min-width: 80px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

#cabecera > .barra .wrpBuscadorBajo {
    display:flex;
    flex-direction:row;
    align-items: center;
}

#cabecera > .barra .wrpBuscadorBajo .wrpMenu {
    flex-grow:1;
}

#cabecera .logo {
    display:flex;
    max-width:200px;    
}
#cabecera .logo img  {
    max-width:100%;
    max-height:100%;
}







#cabecera .enlacesCab {
    display:flex;
    justify-content: flex-end;
    margin-top:5px;
}
#cabecera .enlacesCab .iconoCabecera {
    display:block;
    width:40px;
    height:40px;
    background-position:center center;
    background-size:60%;
    background-repeat:no-repeat;
    transition:all ease-in-out .5s;
}

#cabecera .enlacesCab .iconoCabecera:hover {
    background-size:100%;
}
#cabecera .enlacesCab .clienteWidget .iconoCabecera {
    background-image:url(../img/layout/usuario.png);
}
#cabecera .enlacesCab .carritoWidget .iconoCabecera {
    background-image:url(../img/layout/carrito.png);
}



@media (max-width: 800px) {
    h1 {
        font-size:20px;
    }

    h2 {
        font-size:18px;
    }

    #cabecera {
        padding:5px;
        position:sticky!important;
    }
    #cabecera .logo  {
        max-width:120px;
    }

    #cabecera .enlacesCab {
        /*grid-gap: 10px;*/
        grid-gap: 10px;
    }
    #cabecera .enlacesCab .iconoCabecera {
        /*
        background-size:32px;
        width :32px;
        height:32px;
            */
        background-size :24px;
        width           :24px;
        height          :24px;
    }
    /*
    #cabecera .enlacesCab .iconoCabecera:hover {
        background-size:32px;
    }
        */
    #cabecera > .barra {
        grid-gap: 0px;
        padding:5px;
    }

    #cabecera > .barra > .izquierda {
        flex-grow:1;
        align-items: center;
    }
    #cabecera > .barra > .izquierda .logo {
        flex-grow:1;
        width:100%;
        max-width:unset;
        height:50px;        
        justify-content: center;
    }

    #cabecera > .barra > .derecha {
        min-width:unset;
        
    }
    #cabecera > .barra > .centro {
        flex-grow:0;
        /*width:32px;*/
        flex-direction:row;
    }

    #cabecera > .barra > .centro .buscador {
        flex-grow:1;
        background-size :24px;
        width           :24px;
        height          :24px;
        margin: 5px 10px;
    }

    #cabecera > .barra .wrpBuscadorBajo {
        flex-grow:1;
    }
}





/*----------------------------------------------- Cabecera - Buscador */
#cabecera .buscador input {
    width:100%;
    border: 1px solid var(--borderInput);
    border-radius:15px;
    padding:5px;
    background: url(../img/layout/lupa.png) no-repeat rgba(255,255,255,0.75);
    background-size:20px;
    background-position:5px;
    padding:5px 5px 5px 30px;
    font-size:15px;
}
#cabecera .buscador input:focus {
    background: url(../img/layout/lupa.png) no-repeat rgba(255,255,255,1);
    background-size:20px;
    background-position:5px;
}






/*--------------------------------------------- widget Bloque Texto */
.widgetBloqueTexto {
    color:var(--colorTexto);
}


/*---------------------------------------------- Cabecera 2 */
#cabecera2 {
    width:100%;
    display:flex;
    flex-direction: row;
    justify-content: center;
    padding:0 10px;
}

#cabecera2 .wrpCabecera2 {
    /*max-width: 1200px;*/
    width:100%;
}

/*--------------------------------------------- Migas de pan */
.migasPan {
    width:100%;
    display:flex;
    flex-direction: row;
    justify-content: center;
    padding:20px 0;
}
.migasPan ol {
    /*width: 1200px;*/
    width:100%;
    display: flex;
    flex-direction: row;
    flex-wrap:wrap;
    align-items: flex-start;
    grid-gap:0px;
    list-style:none;
    padding:0;
    margin:0;
}

.migasPan li a {    
    font-weight:bold;
    color:var(--migasPan_texto);
}

.migasPan li::after {
    content:"/";
    padding:0 5px;
}

.migasPan li:last-child::after {
    content:"";
}



/*--------------------------------------------- contenido */
body > .wrpContenido {
    width:100%;
    padding:0 20px;
    display:flex;
    justify-content: center;
    flex-grow:1;
}


body > .wrpContenido > .contenido {
    /*width:1200px;*/
    width:100%;
}

/*--------------------------------------------- footer */
#footer {
    background-color: var(--footerFondo);
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-top: 40px;
    padding: 40px 20px;
    justify-content: center;
}
#footer .wrpFooter {
    /*width: 1200px;*/
    width:100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    grid-gap:50px;
}

#footer .wrpFooter .colCentro {
    flex-grow:1;
    display:flex;
}


#footer .logo {
    max-width:200px;
}


#banner_RedesSociales {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    grid-gap:10px;
    padding:10px 0;
}

#banner_FormasPago {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    grid-gap:10px;
}


#footer #menu_Footer {
    width:100%;
}
#footer #menu_Footer .items.nivel_0 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-around;
    grid-gap:20px;
}

#footer #menu_Footer .titulo {
    color:var(--footerTexto);
    font-size:14px;
}


#footer #menu_Footer .nivel_0.titulo {
    color:var(--footerTexto);
    font-weight:bold;
    font-size:18px;

}

#footer #menu_Footer .nivel_0 .items {
    display:flex;
    flex-direction: column;
    grid-gap:5px;
}

#footer .colDer .titulo {
    color:var(--footerTexto);
    font-weight:bold;
    font-size:18px;
}


#footer .widgetDireccion {
    color:var(--footerTexto);
    font-size:14px;
    display:flex;
    flex-direction:column;
    grid-gap:10px;
}
#footer .widgetDireccion .nombre {
    color: var(--footerTexto);
    font-weight: bold;
    font-size: 18px;
}
#footer .widgetDireccion a {
    color:var(--footerTexto);
}

#footer .widgetDireccion .localizacion {
    display:flex;
    flex-direction:row;
}

#footer .widgetDireccion .telefono:before {
    content:"Tel. ";
}


.panelBloqueo {
    position:fixed;
    background-color:rgba(0,0,0,0.5);
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:100;
}

.iconoCerrar {
    cursor:pointer;
    position:absolute;
    right:0;
    background-size:16px;
    width :20px;
    height:20px;
    background-image:url(../img/layout/iconoCerrar.png);
    background-repeat:no-repeat;
}


.barraScroll::-webkit-scrollbar {
    width:5px;
    height:5px;
    border-color:#AAA;
}

.barraScroll::-webkit-scrollbar-track  {
    background: #AAA;
    box-shadow: inset 0 0 5px #d0d0d0;
    border-color:#AAA;
}

.barraScroll::-webkit-scrollbar-thumb {
  background-color: var(--colorTexto);
  border-radius:0px;
}

.barraScroll::-webkit-scrollbar-thumb:hover {
  background: #bf1a49;
  border-radius:0;
}


.tituloSeccion
 {
    color:var(--tituloSeccion_texto);
    border-bottom:5px solid var(--tituloSeccion_barra1);
    margin-bottom:20px;
    position:relative;
    font-size:25px;
    display:inline-block;
    padding:0 40px 0 0 ;
    width:50%;
}

.tituloSeccion::after {
    position:absolute;
    left:0;
    bottom:-5px;
    content:" ";
    background-color:var(--tituloSeccion_barra2);
    height:5px;
    width:150px;
}






/*------------------------------------ lista seleccion*/
.listaSeleccion {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
}

.listaSeleccion  li {
    position:relative;
    padding:5px 0;
    width:100%;
}


.listaSeleccion input  {
    display:block;
    position:absolute;
    appearance: none;
    background: #fff;
    border: 1px solid var(--colorTexto);
    width: 20px;
    height: 20px;
    margin-left:5px;
    top:50%;
    margin-top:-10px;
    border-radius: 50%;    
}

.listaSeleccion input:checked {
    background: var(--colorTexto);
    border: 5px solid #fff;
}


.listaSeleccion label {
    cursor:pointer;
    color:var(--colorTexto);
    font-weight:bold;
    border:2px solid var(--colorTexto);
    border-radius:10px;
    padding:2px 10px 2px 30px;
    margin: 0;
    display:block;
    width:100%;
}

.listaSeleccion input:checked + label {
    background-color:var(--colorTexto);
    color:white;
}




/*------------------------------------ boton seleccion*/
.tituloSeccion {
    width:auto;
}

input.botonSeleccion  {
    display:none;
}


input.botonSeleccion:checked {
    background-color: var(--colorTexto);
    border: 5px solid #fff;
}


input.botonSeleccion + label {
    cursor:pointer;
    color:var(--colorTexto);
    font-weight:bold;
    border:2px solid var(--colorTexto);
    border-radius:10px;
    padding:0px 10px;
    margin: 0 10px 10px 0;

}
input.botonSeleccion:checked + label {
    background-color:var(--colorTexto);
    color:white;
}





@media (max-width: 900px) {
    body > .wrpContenido {
        padding: 0 10px;
    }

    .migasPan {
        padding:10px 0;
    }

    #footer .wrpFooter {
        flex-direction:column;
        grid-gap:20px;
    }

    #footer .wrpFooter .colCentro {
        width:100%;
    }

    #footer .wrpFooter .colCentro{
            justify-content: space-between;
    }

    #footer #menu_Footer .items.nivel_0 {
        justify-content: space-between;
    }
}