@media screen {
/*FORMULARIO:::::::::::::::::::::::::::::::::::::::::::::::::::*/
label { font-size: var(--font-s); text-align: left; color: #394353;}

input, textarea, select, button  { margin:0; padding:0; outline:0; border:0; border-radius: 0; min-width: 0 !important;
                                   box-sizing: border-box;}

input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="submit"],
textarea, button, select { -webkit-appearance: none; -moz-appearance: none; appearance: none;}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select {  font:normal var(--font-s) var(--font-primary-regular); color: #0F172A; padding:8px 16px; background-color: #F2F2F2; border: 1px solid #CBD5E1; border-radius: 4px;}

input[type="checkbox"] { background-color: #fff !important;}

input[disabled],
select[disabled] { opacity: 0.7; background-color: #fff;}

::placeholder { color: #6C6C6C; opacity: 1;}

/*campo password con boton de mostrar contraseña*/
.field-password { display: flex; gap:8px; align-items: center; margin-bottom: 16px;}
    .field-password input { flex: 1; margin-bottom: 0 !important;}
    .btn-show-password { flex: 0 0 auto; width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; background: none; cursor:pointer}
    .btn-show-password::before { content: url(imagenes/internas/eye-open.svg); display: block;}
    .btn-show-password.visible::before { content: url(imagenes/internas/eye-close.svg); display: block;}

/*TABLAS:::::::::::::::::::::::::::::::::::::::::::::::::::*/
table, tr, th, td {  border-collapse: collapse; vertical-align: middle;}
table.general { width: 100%; text-align: left;}
    table.general thead { position: relative; overflow: hidden;}
    table.general thead td { padding: 15px 25px; background-color: #F2F2F2;}
    table.general thead td:first-child{ border-radius: 10px 0 0 10px;}
    table.general thead td:last-child{ border-radius: 0 10px 10px 0;}
    table.general thead td p { font-family: var(--font-primary-medium); font-size:var(--font-s); color: #363535;}

    table.general tbody td { padding: 20px 25px; border-bottom: 1px solid #E3E3E3;
                            -webkit-transition: background-color 0.3s ease;
                            transition: background-color 0.3s ease;}

    table.general tbody tr:last-child td { border: none;}
    table.general tbody td p { font-size:var(--font-n); color: #363535;}

    td[data-info="fecha"] { width: 100px;}
    td[data-info="metodo de pago"] {}
    td[data-info="plazo de pago"] { white-space: nowrap;}

    td[data-info="importe"] { text-align: right; white-space: nowrap;}
    p.ImporteTotal {font-family: var(--font-primary-bold);}

    td[data-info="estado de compra"] {}
    td[data-info="estado de pago"] { }

    p[data-estado] { padding-left:25px; background-size: 16px auto !important; }
    p[data-estado="naranja"] { background: url("imagenes/internas/estado-naranja.svg") no-repeat 0 50%;}
    p[data-estado="verde"] { background: url("imagenes/internas/estado-verde.svg") no-repeat 0 50%;}
    p[data-estado="rojo"] { background: url("imagenes/internas/estado-rojo.svg") no-repeat 0 50%;}

    td[data-info="acciones"] {}


    /*Desktop*/
    .Desktop table.general tbody tr:hover td { background-color:#E3E3E3; }
    /*.......*/

/*GLOVAL.................................................................................................................... */
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
body {
    margin:0 auto;
    text-align:center;
	font-family: var(--font-primary-regular);
    background-color: #FAFAFA;
  }

.SafeZone { width:100%; min-height:100%; margin:0 auto; }
     .Viewport { position:relative; width:100%; max-width:1680px; height:100%;  margin:0 auto;}

/*MODAL::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
.Modal { position:fixed; z-index:9995; top:0; left:0;  overflow-x:hidden; overflow-y: auto;  width:100%; height:100%; padding:40px 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
            background: rgba(255, 255, 255, 0.8); opacity:0; visibility:hidden;
            backdrop-filter: blur(5px);
			-webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
			transition: opacity 0.3s ease, visibility 0.3s ease;}

/*Mobile*/
.Mobile .Modal { overflow-x: scroll; -webkit-overflow-scrolling: touch;}
/*......*/

       a.cerrarx { position:absolute; z-index: 100; top:30px; right:30px; cursor:pointer; width:35px; height:35px; background: url("imagenes/icono-menu-close.svg") no-repeat 50% 50%; background-size: 15px auto;
                    display: none;}

        .ContentModal { position: relative; overflow: hidden;  margin: auto; min-width: 340px; max-width:815px;  text-align: left; padding: 15px; background-color: #fff; border:1px solid #BFBFBF; border-radius: 5px;
                        opacity: 0;
                        -webkit-transform: translateY(-20px);
                        transform: translateY(-20px);
                        -webkit-transition: -webkit-transform 0.3s ease-in-out 0.15s, opacity 0.3s ease-in-out 0.15s;
                        transition: transform 0.3s ease-in-out 0.15s, opacity 0.3s ease-in-out 0.15s;}


            .ContentModal a.cerrarx { display: block !important; z-index: 100; top: 15px; right: 15px;}

/*MODAL GENERAL*/
    #ModalGeneral .TopModal { padding: 20px 0; border: none;}
    p.TxtMensaje { font-size: var(--font-n); padding: 0 40px; }
    a.BtnTriggerModal { display: inline-block; cursor: pointer;}

    /*modalgeneral*/
    .modalgeneral { overflow: hidden; }
    .modalgeneral #ModalGeneral{ opacity: 1 !important; visibility: visible !important;}
    .modalgeneral #ContentModalGeneral{ opacity:1;
                                -webkit-transform: translateY(0);
                                 transform: translateY(0);}


/*MODAL PRODUCTO AGREGADO*/
#ContentAgregado { padding: 50px; text-align: center;}
    #ContentAgregado > img { margin:0 auto 10px auto}
    #ContentAgregado #TituloModal { display: block; margin:16px 0 24px 0; font-size: var(--font-l); color: #61ab2f;}

    .AccionesModalAgregado { display: flex; gap: 24px;}

.modalagregado { overflow: hidden; }
.modalagregado #ModalAgregado{ opacity: 1 !important; visibility: visible !important;}
.modalagregado #ContentAgregado { opacity:1;
                                  -webkit-transform: translateY(0);
                                   transform: translateY(0);}

p#txtSucces,
p#txtDanger { font-size: var(--font-s);}

/*FAV*/
.fab {  position: fixed; z-index: 8000;  bottom: 4em; right: 3em; width: 4em; height: 4em; display: block; border-radius: 50%; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
            -webkit-transition: -webkit-transform 0.3s ease;
            transition: transform 0.3s ease;}

.fab.whatsapp {  background: #1BD741 url("imagenes/icono-wapp.svg") no-repeat 50% 50%; background-size: 2em auto;}

/*HEADER*/
header.general { position: sticky; z-index: 9990; top: 0; left: 0; width: 100%; padding: 8px 24px; border-bottom: 2px solid var(--color-brand-primary);
                background:rgba(255,255,255,0.9); backdrop-filter: blur(5px);}

    #TopHeader { display: flex; gap: 16px; align-items: center; padding: 0;}
        #BtnMenuMobile { display: none;}

        #Logo { flex: 0 0 200px;}
            #Logo img { max-width: 100%; display: block;}

        #Menus { flex: 1; display: flex; gap: 16px; justify-content: flex-end;}
            #Buscar { flex: 0 1 300px; padding:5px;}
                a#BtnBuscarMobile { display: none;}

                #Buscador { position: relative; display: flex; align-items: center; width: 100%; }
                    .QuickAV { position: relative; overflow: hidden; display: flex;  width: 100%; border: 1px solid #ccc; border-radius: 4px;}
                        .QuickAV .icono { flex: 0 0 32px; padding: 4px; background-color: var(--color-brand-primary); display: flex; align-items: center; justify-content: center;}
                        .QuickAV .icono::before { content: ""; display: block; width: 16px; height: 16px; background-color: #fff;
                                                    mask-image: url(imagenes/icono-tag.svg); mask-size: cover; mask-repeat: no-repeat;}

                        input.search { flex: 1; font-family: var(--font-primary-medium); font-size: var(--font-s); border: none; background: none;}
                        input.btn-search { width: 24px; padding: 0 16px; border: none; background:transparent url("imagenes/internas/lupa.svg") no-repeat 50% 50%; background-size: 15px auto; cursor: pointer;}


            #MenuGeneral { flex: 1; display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; align-items: center;}
                #IsoMenu { display: none;}
                #MenuGeneral a {flex: 0 0 auto; font-family: var(--font-primary-medium);}
                #MenuGeneral a#BtnCatalogo::before { content:url(imagenes/icono-tag.svg); width: 16px; height: 16px;}
                #MenuGeneral a.btn-link { color: #000;}

                /*select*/
                #MenuGeneral a.select { color: var(--color-brand-primary); cursor: default;}
                /*......*/

            #BarraContacto { flex: 0 0 auto; display: flex; gap: 8px; margin-right: 36px; align-items: center;}
                #BarraContacto p { font-family:var(--font-secondary-regular); font-style: italic; font-size: var(--font-s);}

            #AccionesEcomm { flex: 0 0 fit-content; display: inline-flex; align-items: center; gap: 24px;}
                #Login { position: relative; flex: 0 0 auto;}
                    a#BtnLogin { display: block; width: 24px; height: 24px; background: url(imagenes/icono-profile-aut.svg) no-repeat 50% 50%; background-size:24px auto;}
                    a#BtnLoginAuth { display: block; width: 24px; height: 24px; background: url(imagenes/icono-profile.svg) no-repeat 50% 50%; background-size:24px auto;}

                   .DownPanel { position: absolute; overflow: hidden; z-index:9997; top: 30px; border-radius: 7px; max-height: 0;
                                 box-shadow: 0 30px 28px rgba(0,0,0,0.25);
                                 -webkit-transition: all 1s cubic-bezier(.25,.8,.25,1);
                                 transition: all 1s cubic-bezier(.25,.8,.25,1);}

                   #PanelLogin { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; max-height: none;
                                 background:rgba(255,255,255,0.75); display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
                                 backdrop-filter: blur(5px);
                                 opacity: 0; visibility: hidden; }

                        #LogAbierto { width: 100%; max-width: 350px; padding: 24px; background-color: #fff;  border: 1px solid #ddd;
                                     -webkit-transform: scale(0.7);
                                     transform: scale(0.7);
                                     -webkit-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
                                     transition: all 0.3s cubic-bezier(.25,.8,.25,1);}

                           #FormPerfil { width: 100%;}
                                #DatosPerfil { padding: 0 0 15px 0;}
                                    #Isologo { display: block; margin-bottom: 8px; text-align: center;}
                                    #Isologo img { margin: 0 auto;}
                                    p.TxtHola { font-size: var(--font-l); color: #000;}
                                    p.NombreLog { display: block; font-size: var(--font-m); color: #000;}

                                #AccionesCarrito { display: block; padding-top: 20px; background: url("imagenes/internas/filete.svg") no-repeat 50% 0;}
                                    #AccionesCarrito a { display: block; width: 150px; margin:0 auto 8px auto;}
                                    #BtnCerrarSesion { display: block; margin: 15px auto 10px auto; font:normal var(--font-n) var(--font-primary-regular); color:#888; cursor: pointer; background: none; border: none; border-radius: 0;}

                /*loginmode*/
                .loginmode #PanelLogin { opacity: 1; visibility: visible; z-index:9998;}
                .loginmode #LogAbierto { -webkit-transform: scale(1);  transform: scale(1);}
                .loginmode a#BtnCerrarLogin { display: block;}
                /*......*/

                #MiCarrito { position: relative; flex: 0 0 auto; text-align: left;}
                    a#BtnListaCarrito { position: relative; display: block; width: 25px; height: 30px; background: url("imagenes/internas/carrito.svg") no-repeat 50% 50%; background-size:23px auto;}
                    #FormCarrito { width: 100%; height: 100%; display: flex;}
                        #BtnListaCarrito input { min-width: 0; pointer-events: none;}

                        #Bag { flex: 0 0 40px; height:40px; text-align: left;}
                            input#cantidad-items { font:normal var(--font-xs) var(--font-primary-medium); color:#fff; text-align: center; background-color: var(--color-brand-primary); border-radius: 20px; border: none; padding:3px 5px 3px 5px;
                                                    -webkit-transform-origin: 0 0;
                                                    transform-origin: 0 0;
                                                    -webkit-transform: translate(15px, -3px);
                                                    transform: translate(15px, -3px);}

                        input#precio-total { flex: 1; height:40px; text-align:left; font:normal var(--font-n) var(--font-primary-regular); background:none; border:none; color:#FFF; padding: 0 8px 0 15px; border-left: 1px solid var(--color-brand-primary);}

                    #CarritoLista .DownPanel { width:270px; right: -20px;}

                            /*Vacio*/
                            #CarritoVacio { width:100%; padding:45px 0;  background-color:#fff;}
                                #CarritoVacio p { width:100%; font-size: var(--font-n); color:#999999; text-align:center;}

                            /*Lleno*/
                            #CarritoLleno { width:100%;  background-color:#fff;}
                                #CarritoLleno ul { width:100%; list-style:none; text-align: left; 
                                                     position: relative;  overflow-x: hidden; height: calc(100vh - 200px); max-height: 420px;}
                                                     
                                    #CarritoLleno li { position:relative; overflow:hidden; display: flex; flex-wrap: wrap; align-items: center; max-height:500px; padding:5px 17px;
                                                        -webkit-transition:opacity 0.5s ease, max-height 0.5s ease;
                                                        transition: opacity 0.5s ease, max-height 0.5s ease;}

                                        p.QuickCantidad { position: absolute; top: 20px; left: 5px;font-size: var(--font-s); background-color: #fff; padding: 0 7px; border:1px solid #999; border-radius:10px;}

                                        #CarritoLleno figure { flex: 0 0 50px; display: flex; justify-content: center; align-items: center; background-color: #fff;}
                                            #CarritoLleno figure > img { max-width:100%; display:block;}

                                        #CarritoLleno ul div { flex: 1; padding:10px;}
                                            #CarritoLleno p.QuickNombre {font-size: var(--font-s); color:#000; text-transform: lowercase;}
                                            #CarritoLleno p.QuickNombre::first-letter { text-transform: uppercase;}
                                            #CarritoLleno p.QuickExtra {font-size: var(--font-xs); color:#4D4D4D;}

                                        a.QuickClose { flex: 0 0 23px; font-size: var(--font-n); line-height:0;  text-align:center; color:#9B9B9B; cursor:pointer;}

                                #BarraTotal { width: 100%; text-align: center; padding:24px 16px 8px 16px; background: url("imagenes/internas/filete.svg") no-repeat 50% 5px;
                                              display: flex; gap: 16px;}
                                    #BarraTotal p.TituloTotal { flex: 0 0 auto; font:normal var(--font-m) var(--font-primary-medium); color: #000; padding:0;}
                                    #BarraTotal p.PrecioTotal { flex: 1; text-align: right;  font:normal var(--font-m) var(--font-primary-medium); color: #000; padding:0;}

                                #AccionesCarritoWidget { text-align: center; padding-bottom: 16px;}
                                a#BtnMiCarrito { margin: 0 auto; width: 120px;}


                            /*Desktop*/
                            .Desktop a.Close:hover { color:#000;}
                            .Desktop #CarritoLleno li.hover { opacity: 0.5;}
                            .Desktop #CarritoLleno li.hover p { text-decoration:line-through;}


                            /*carritomode*/
                            .carritomode #MiCarrito .DownPanel { max-height: 600px; z-index:9998;}

                            /*out*/
                            #CarritoLleno li.out { max-height:0px;}
                            /*...*/


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*BODY..................................................................................................................................*/
/*CATEGORIAS*/
    #NavSocialFlotante { position: fixed; z-index: 8000;  bottom: 40px; right: 20px; text-align: center;}
        #NavSocialFlotante a { width: 40px; height: 40px; margin: 5px auto; display: block; border-radius: 50%; box-shadow: 0 0 2px #8a8a8a;
                              -webkit-transition: background-color 0.3s ease;
                              transition: background-color 0.3s ease;}

        #NavSocialFlotante a[title*="Instagram"] { background:#fff url("imagenes/internas/instagram.svg") no-repeat 50% 50%; background-size: 16px auto;}
        #NavSocialFlotante a[title*="Facebook"] { background:#fff url("imagenes/internas/facebook.svg") no-repeat 50% 50%; background-size: 16px auto;}
        #NavSocialFlotante a[title*="Youtube"] { background:#fff url("imagenes/internas/youtube.svg") no-repeat 50% 50%; background-size: 16px auto;}
        #NavSocialFlotante a[title*="WhatsApp"] { background:#fff url("imagenes/internas/wapp-blanco.svg") no-repeat 50% 50%; background-size: 16px auto;}
        #NavSocialFlotante a.BtnWapp { background-color: #26d065;}

    /*Desktop*/
    .Desktop #NavSocialFlotante a:hover { background-color: #D4D4D4;}
    /*.......*/

main { background-color: #F1F1F1;}
    #BtnCerrarFiltro { display: none;}

    #ContentGeneralInterna { display: flex; gap:36px; padding-top: 70px;}
        #PanelLateral { flex: 0 0 200px; text-align: left; padding-bottom: 40px;}
            #PanelLateral h2 { font-family: var(--font-primary-medium); font-size: var(--font-xl); color: #000; margin-bottom: 15px;}

            #FormFiltrosCategorias { width: 100%; max-width: none; min-width: 0;}
                .FiltroSubCategoria { padding-top: 15px;}
                    .FiltroSubCategoria label { display: block; margin-bottom: 4px;}
                    .FiltroSubCategoria select { width: 100%;}
                    .FiltroSubCategoria input { width: 100%; max-width: none; min-width: 0; background-color: #fff;}


        #PanelCentral { flex: 1;}
            #TopPanelCentral { width: 100%; padding-top: 7px;}
                #NavFiltros { display: flex; flex-wrap: wrap; gap: 16px; justify-content: flex-end; align-items: center;}
                    #BtnFiltro { display: none;}

                    #Utilidad { flex: 0 0 auto; align-self: stretch; background-color:#e4e4e4; border-radius: 4px; padding: 4px 16px;}
                        #Utilidad form { display: flex; width: 100%; height: 100%; gap: 8px; align-items: center;}
                            #Utilidad form p { font-size: var(--font-s);}
                            #Utilidad span { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; align-self: stretch;}
                                #Utilidad span input[type="number"]{ width: 80px; height: 100%; padding: 0 5px; border-radius: 4px; }
                            a#BtnAplicarUtilidad { flex: 0 0 auto; background-color: #000;}

                    #OrderMode { flex: 0 0 auto; text-align: right;}
                         #OrderMode select { width:170px;}

                    #NavFiltros #BtnVerTalles { display: none;}

                    /*#ViewMode { flex: 0 0 80px; display: flex; justify-content: flex-end;}
                         a#BtnModoLista,
                         a#BtnModoGrilla { flex: 0 0 30px; height: 30px; border: 1px solid transparent; border-radius: 4px;}

                         a#BtnModoLista { margin-left: 10px; background: url("imagenes/internas/modo-lista.svg") no-repeat 50% 50%; background-size: 15px auto, 15px auto;}
                         a#BtnModoGrilla { background: url("imagenes/internas/modo-grilla.svg") no-repeat 50% 50%; background-size: 15px auto, 15px auto;}*/

                    /*select*/
                    #ViewMode a.select {  cursor: default; border-color:#000;}
                    /*.......*/

            #BottomPanelCentral { margin-top: 20px;}
                #ListaProductos.Items { display: grid; grid-gap: 20px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); width: 100%;}

                /*GLOBAL ITEMS:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
                 /*items*/
                     a.BtnAmpliarProducto { position:relative; overflow: hidden; text-align: center;  background-color: #fff;
                                           box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
                                           -webkit-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
                                           transition: all 0.3s cubic-bezier(.25,.8,.25,1);}

                     .Items article {  display: flex; flex-direction: column; height: 100%;}

                        .Items header { position: relative; overflow: hidden; flex: 0 0 auto; width: 100%; max-height: 250px; display: flex; align-items: center; justify-content: center; background-color: #fff;}
                            .ExtraTag { position: absolute; display: block; top: 10px; left: 10px; width: 40px; height: 40px;}

                                .Items header img { max-width:100%; max-height: 100%; display:block; margin: 0 auto;
                                                     -webkit-transition: -webkit-transform 0.3s ease-in-out;
                                                     transition: transform 0.3s ease-in-out;}

                        .Items footer { flex: 1; display: flex; flex-direction: column; text-align: left;
                                        -webkit-transform-origin: 50% 0;
                                        transform-origin: 50% 0;}

                           .InfoItem { flex: 1; display: flex; flex-direction: column; gap: 4px; background-color: #fff; padding: 18px; border-radius: 5px;}
                           .InfoItem > * {}
                                .InfoItem .Descripcion { flex: 0 0 auto; font-size:var(--font-n); text-transform: lowercase;  color: #000;
                                                        overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
                                                        -webkit-transition: all 0.3s ease-in-out;
                                                        transition: all 0.3s ease-in-out;}
                                .InfoItem .Descripcion::first-letter { text-transform: uppercase;}
                                .InfoItem h3:last-child { margin-top: 8px;}

                                .PreciosTag { flex: 1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
                                    .PreciosTag p.Precio { font:normal var(--font-m) var(--font-primary-bold); color: #000; padding-right: 16px; border-right: 1px solid #bdbdbd; margin-right: 8px;}
                                    .PreciosTag p.PrecioUtilidad { font:normal var(--font-m) var(--font-primary-bold); color: var(--color-ok);}

                                    .PreciosTag p.PrecioAnterior { margin-left: 10px; font:normal  var(--font-n) var(--font-primary-regular); color: #B8B8B8; text-decoration:line-through;}

                                .Items .AccionesItem { flex: 0 0 auto; display: flex; justify-content: center; align-items: center; gap: 16px; padding: 0 16px 24px 16px; background-color: #fff;}
                                    .ProductoCantidad { flex: 0 0 auto;}
                                        .ProductoCantidad span { position: relative; overflow: hidden; display: inline-flex; border:1px solid #d8d8d8; border-radius:4px;}
                                            .ProductoCantidad input[type="number"] { width: 40px; height: 35px; border: 0 !important; border-radius: 0 !important; font-size: var(--font-n); text-align: center !important; appearance: textfield; }
                                            .ProductoCantidad .button  { flex: 0 0 auto; width: 37px; height: 35px; border-radius: 0 !important; cursor: pointer;}
                                            .ProductoCantidad .button.btn-decrease-num { background:#e4e4e4 url(imagenes/internas/minus.svg) no-repeat 50% 50%; background-size: 16px auto;}
                                            .ProductoCantidad .button.btn-increase-num {  background:#e4e4e4 url(imagenes/internas/plus.svg) no-repeat 50% 50%; background-size: 16px auto;}

                                    .Items .AccionesItem > a { flex: 0 0 auto; margin: auto; display: block; width: fit-content;}
                                    .Items .AccionesItem a.BtnAgregar { background-image: url(imagenes/internas/carrito.svg); background-repeat: no-repeat; background-position: 16px 50%; background-size: 20px auto; padding-left: 42px;}

                                /*.ExtraItem { flex: 0 0 auto; position: relative; overflow: hidden; max-height: 0;
                                            -webkit-transition: max-height 0.5s ease;
                                            transition: max-height 0.5s ease;}

                                    .ExtraAcordeon { display: flex; flex-wrap: wrap; align-items: center;}
                                        .ExtraColor { flex: 1; display: flex; margin-bottom: 5px;}
                                        .ExtraColor img { flex: 0 0 auto; width: 15px; margin-right: 5px;}

                                        .ExtraTalle { flex: 0 0 auto; display: flex; justify-content: flex-end; margin-bottom: 5px;}
                                        .ExtraTalle p { font-size: 1.1rem; margin-left: 10px; color: #000;}
                                        .ExtraTalle p:first-child { margin-left: 0;}*/

                               /*Desktop*/
                                .Desktop a.BtnAmpliarProducto:hover { box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);}
                                .Desktop a.BtnAmpliarProducto:hover .Descripcion {-webkit-line-clamp: 4;}
                                /*.Desktop a.BtnAmpliarProducto:hover .ExtraItem { max-height: 100px;} */
                               /*.......*/

                               #NavPaginado { width:100%; text-align:center; margin: 40px 0 80px 0;}
                                    #NavPaginado ul { list-style:none; margin: 0 auto; width: 100%;  max-width: 800px; display: flex; align-items: center; justify-content: center;}
                                    #NavPaginado li { flex: 0 0 auto; font-size:var(--font-n); color:#666666; margin:0 5px;}
                                    #NavPaginado li a { width: 40px; height: 40px; display:flex; align-items: center; justify-content: center; cursor:pointer; border:1px solid transparent;}
                                    #NavPaginado li.PrevPaginado a,
                                    #NavPaginado li.NextPaginado a { border-radius: 50%;}

                                    #NavPaginado li.PrevPaginado a { background:url("imagenes/internas/flecha-left.svg") no-repeat 50% 50%; background-size: 10px auto;}
                                    #NavPaginado li.NextPaginado a { background:url("imagenes/internas/flecha-rigth.svg") no-repeat 50% 50%; background-size: 10px auto;}
                                    #NavPaginado li.Number a { font:normal var(--font-n) var(--font-primary-medium); color: #938F94;  padding:5px; border-radius: 50%;}

                                    /*Desktop*/
                                    .Desktop #NavPaginado li:not(.select):hover a { opacity:0.7;}

                                    /*select*/
                                    #NavPaginado li.select a { cursor:default; color: #000; border-color: #000;}
                                    /*.......*/

                 /*listamode*/
                .listamode #ListaProductos.Items { grid-template-columns: repeat(auto-fill, minmax(100%, 100%));}
                    .listamode #ListaProductos.Items article { flex-direction: row;}
                        .listamode #ListaProductos.Items header { flex: 0 0 100px; width: auto; height: auto; padding-left: 16px;}
                        .listamode #ListaProductos.Items footer { flex-wrap: wrap; flex-direction: row; justify-content: flex-start; align-items: center;
                                                            -webkit-transform: none;
                                                            transform: none;}

                        .listamode #ListaProductos.Items .InfoItem { position: relative; flex: 1; justify-content: center; width: 100%;}
                            .listamode #ListaProductos.Items .InfoItem h3 { flex: 0 0 auto; text-align: left;}
                            .listamode #ListaProductos.Items .PreciosTag { flex: 0 0 auto; justify-content: flex-start;}
                            .listamode #ListaProductos.Items .AccionesItem { flex: 0 0 auto; height: 100%; padding: 16px;
                                                                        display: flex; align-items: center;}

                        /*.listamode #ListaProductos.Items .ExtraItem { max-width: 200px; max-height: none;}*/
                /*.............*/


/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*FOOTER*/
footer.general { background-color: #000;}
    #TopFooter { display: flex; flex-wrap: wrap; gap:56px; padding-top: 48px; padding-bottom: 48px;}
        #LogoFotter { flex: 0 0 130px;}

        #InfoFooter { flex: 0 0 auto; text-align: left; display: flex; flex-direction: column; gap: 16px;}
        #InfoFooter p, #InfoFooter address { font-size: var(--font-s); font-style: normal; color: #fff;}
        p.TituloInfo { font-size: var(--font-xs); margin-bottom: 4px;}

        #Sitemap { flex: 1; display: none !important;}
            #Sitemap ul { display: flex; flex-wrap: wrap; flex-direction: column; gap:8px}
            #Sitemap li { display: block;}
            #Sitemap a { display: block; color: #fff; border-left: 2px solid var(--color-brand-primary);}

        .NavSocial { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 16px;}
             .NavSocial a::before {  content: "";  display: block; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; line-height: 0;  background-color: #fff; border-radius: 50%;  }
             .NavSocial a[title="Instagram"]::before { content: url(imagenes/instagram.svg);}
             .NavSocial a[title="Facebook"]::before { content: url(imagenes/facebook.svg);}

    #FooterBotton { background-color: #fff;}
        #Legales { padding-top: 16px; padding-bottom: 16px;}
            #ContentLegales { display: flex; flex-wrap: wrap;}
            #ContentLegales p { flex: 1; color: #000;}
            #ContentLegales a { color: #000;}
            p#Copy {font-size: var(--font-xs); text-align: left;}
            p#CreacionUno { font-family: Arial; font-size: var(--font-xs); text-align: right;}

/*RESULTADO BUSQUEDA*/
    p#TxtResultado { font-size: var(--font-s); color: #394353;}

/*DETALLE DE PRODUCTOS*/
    /*Modal*/
    #ModalFotos { background-color: #fff;}
        .NavArrow { position:absolute; z-index:100; top:50%; left:0; width:100%;}
            .NavArrow a { font-size:50px; color:#000; cursor:pointer;}
            .NavArrow a.Prev,
            .NavArrow a.Next { width: 30px; height: 30px; display: block;}

            .NavArrow a.Prev { float:left; margin-left: 20px; background: url("imagenes/internas/flecha-left.svg") no-repeat 50% 50%; background-size: 20px auto;}
            .NavArrow a.Next { float:right; margin-right: 20px; background: url("imagenes/internas/flecha-rigth.svg") no-repeat 50% 50%; background-size: 20px auto;}

        #ContentFotos { width:100%; padding: 0; max-width: 600px;}


 /*activos*/
 .modalfotos { overflow: hidden; }
 .modalfotos #ModalFotos { opacity: 1 !important; visibility: visible !important;}
 .modalfotos #ContentFotos { opacity:1;
                              -webkit-transform: translateY(0);
                               transform: translateY(0);}

    /*articulo*/
    #Articulo { display: flex; flex-wrap: wrap; align-items: flex-start; width: 100%; max-width: 1200px; padding: 45px 30px; margin: 0 auto;}
        #ArticuloFoto { position:relative; overflow:hidden; flex: 0 0 500px; background-color: #FFFFFF; border: 1px solid #D2D1D1; border-radius: 4px;}
             .slide { position:relative;}
                .slide .SlideItems { position:relative; overflow:hidden; width:100%; height: 500px;}
                   .SlideItems > div { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; text-align: center; opacity: 0; visibility: hidden;
                                     background-repeat: no-repeat;
                                    -webkit-transform: scale(0.8);
                                    transform: scale(0.8);
                                    -webkit-transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
                                    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;}

                  .slide div.Video { display: block; height: 100%;}
                       .slide a { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
                       .slide img { max-width: 100%; max-height: 100%; display: block;}
                       .slide iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;}


               .slide .NavBullets { position:absolute; z-index:200; width: auto; left:50%; bottom:0; text-align:center; background-color: #fff; padding: 10px; border-radius: 10px 10px 0 0;
                                    -webkit-transform: translateX(-50%);
                                    transform: translateX(-50%);}

                  .slide .NavBullets ul { list-style:none; margin:0 auto;}
                  .slide .NavBullets li { display:inline-block; vertical-align:middle; width:10px; height:10px; margin:0 7px;  background-color: #ccc; border-radius: 50%;  cursor:pointer;
                                            -webkit-transition: color 0.5s ease-in-out;
                                            transition: color 0.5s ease-in-out;}

          /*select*/
          .slide div.select { opacity: 1; visibility: visible;
                              -webkit-transform: scale(1);
                              transform: scale(1);}

          .slide .NavBullets li.select { background-color:var(--color-brand-primary); cursor:default;
                                         -webkit-transform: scale(2);
                                         transform: scale(2);}
          /*.......*/

          .EtiquetasRopa { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding: 20px 10px;}
              .EtiquetasRopa figure { flex: 1; margin: 10px;}
              .EtiquetasRopa img { max-width: 100%; display: block;}

          #ExtraArticulo .EtiquetasRopa { display: none;}


        #ArticuloInfo { flex: 1; text-align: left; padding: 30px 0 30px 50px;}
             #Breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; width: 100%;}
                #Breadcrumb a { display: flex; align-items: center; gap: 4px; color: #394353;}
                #Breadcrumb a::after { content: "";  width: 10px; height: 10px; background: url("imagenes/internas/bullet.svg") no-repeat 50% 100%; background-size: 5px auto;}
                #Breadcrumb p { flex: 0 0 auto; font-size: var(--font-s); color: #000;}
                #Breadcrumb a > p { color: #394353;}

             #ArticuloInfo header { padding-top: 24px;}
                 #ArticuloInfo h2 { font:normal var(--font-2xl) var(--font-primary-medium); margin-bottom: 5px; text-transform: lowercase;}
                 #ArticuloInfo h2::first-letter { text-transform: uppercase;}
                 #ArticuloInfo h3 { font-size: var(--font-n); line-height: 1.5em !important; color: #363535; width: 100%; max-width: 450px;}

                #FiltrosArticulo { display: flex; flex-wrap: wrap; width: 100%;  max-width: 470px; padding: 20px 0 25px 0;}
                    .CheckChoice { display: flex; align-items: center; width: 100%; text-align: left; margin: 20px 0;}
                        .CheckChoice > p { flex: 0 0 auto; font-size: var(--font-n); color: #394353; margin-right: 10px;}
                        /*.CheckChoice label {flex: 0 0 45px; margin: 0 10px; border-radius: 50%;}*/
                        .CheckChoice select { flex: 1;}
                        #FiltroColor,
                        #FiltroTalle { flex: 1; margin-right: 20px;}
                        a#BtnVerTalles { font-size: 1.4rem; margin-left: 15px; text-decoration: underline !important;}

                        #FiltroCantidad { flex: 1 1 100%;}
                        #FiltroCantidad input[name="cantidad"] { width: 70px; padding: 5px 10px; text-align: center; font: normal var(--font-m) var(--font-primary-regular); background-color: #fff; border:3px solid #000; border-radius: 4px; }


                        /*input[type=radio] { position: absolute; opacity: 0;  width: 0; height: 0;}
                        input[type=radio] + img,
                        input[type=radio] + span { cursor: pointer; width: 35px; height: 35px; padding: 2px; border:3px solid transparent; border-radius: 50%;}
                        input[type=radio] + span { display: block; text-align: center; font-size: 1.5rem;}

                        #FiltroCantidad input[name="cantidad"] { width: 70px; padding: 5px 10px; font:normal 1.5rem "Avenir-bold-condensed", Arial, Helvetica, sans-serif; background-color: #fff; border:3px solid #5692CD; border-radius: 25px; }*/

                        /*checked*/
                        /*input[type=radio]:checked + img,
                        input[type=radio]:checked + span { border-color:#5692CD; background-color: #fff; }

                        input[type=radio]:checked + span {font-family:"Avenir-bold-condensed", Arial, Helvetica, sans-serif; color: #000;}*/
                        /*.......*/

                 .LeyendaArticulo { display: block; width: 100%; padding-top: 24px; padding-bottom: 48px;}
                 .LeyendaArticulo p { display: block; margin-bottom: 8px;}

                 #AccionesArticulos { display: flex; flex-wrap: wrap; align-items: center; padding-bottom: 25px;}
                    #PrecioArticulo { flex: 0 0 auto; margin-right: 50px; text-align: left; }
                        .PrecioUnitario {font: normal var(--font-2xl) var(--font-primary-bold); color: #000;}
                        .PrecioUtilidad {font: normal var(--font-m) var(--font-primary-bold); color: var(--color-ok);}

                        .PinAyuda { position: relative; padding:0 10px;}
                            a.BtnAyuda { position: relative; width: 20px; height: 20px; display: block; background: url("imagenes/internas/pin-ayuda.svg") no-repeat 50% 50%;}

                            .GloboAyuda {  position: absolute;  bottom: 60px; left: -5px; display: block; background-color: #777777; text-align: left; padding: 10px; border-radius: 7px;
                                            opacity: 0; visibility: hidden;
                                            -webkit-transition: opacity 0.3s cubic-bezier(.25,.8,.25,1), visibility 0.5s ease-in-out;
                                            transition: opacity 0.3s cubic-bezier(.25,.8,.25,1), visibility 0.5s ease-in-out;}

                                .GloboAyuda::before { content: ""; position: absolute; bottom: -12px; left: 25px; display: block; width: 12px; height: 12px; background: url("imagenes/internas/mueca-gris.svg") no-repeat 0 0; background-size: 100% auto;}
                                .GloboAyuda p {font:normal var(--font-s) var(--font-primary-regular); line-height: 17px !important; color: #fff;}

                            .AyudaPrecio .GloboAyuda { width: 150px;}

                            /*Desktop*/
                            .Desktop .PinAyuda:hover .GloboAyuda { opacity: 1; visibility: visible;}

                            /*Mobile*/
                            .Mobile .PinAyuda.open .GloboAyuda { opacity: 1; visibility: visible;}
                            /*.......*/

                 #ExtraArticulo { display: flex; flex-wrap: wrap; width: 100%; padding-top: 35px; background: url("imagenes/internas/filete.svg") no-repeat 50% 0;}
                     .ExtraModulo {}
                         .ExtraModulo > p:first-child { font-size: 1.1rem; color: #707070; margin-bottom: 5px;}
                         p.ValorExtra { font-size: 2rem; color: #363535;}
                         p.ValorExtra img,
                         p.ValorExtra span { display: inline-block; vertical-align: middle;}

                         p.ValorExtra img { width: 20px; margin-right: 5px;}

                    #Fibra { flex: 1 1 100%; padding-bottom: 30px;}
                         p.ValorFibra {font-size: 1.3rem; line-height: 1.5em !important; color: #363535;}

                   #Codigo  { flex: 0 0 auto; padding-right: 30px;}
                   #NivelAbsocion { flex: 0 0 auto; border-left: 1px solid #A2A2A2; padding:0 30px;}
                   #PorPack { flex: 1; border-left: 1px solid #A2A2A2; padding:0 30px;}

    /*Modulo tecnologias*/
    #MaximaTecnologia { text-align: center; padding:60px 0; background-color: #fff;}

       #MaximaTecnologia h3 {font: normal 2.7rem "Avenir-bold-condensed", Arial, Helvetica, sans-serif; color: #6D6E71; margin: 0 auto 20px auto;}

       #GraficoTecnologia { width: 100%; margin: 0 auto; max-width: 1200px; min-height: 310px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;  background: url("imagenes/grafico.png") no-repeat 50% 50%;}
            #GraficoTecnologia div { flex: 0 1 auto;}
            #GraficoTecnologia p { position: relative; text-align: center; font-size: 1.5rem;  color: #6D6E71; margin: 5px; padding: 15px; border:2px solid #6D6E71; border-radius: 20px; background-color: #fff;}
            #GraficoTecnologia p::after {content: ""; position: absolute; display: block; width: 250px; height: 24px; background: url("imagenes/filete-grafico.svg") no-repeat 100% 50%; background-size: auto 100%;}
            p.capa-exterior::after { top: 50%; right: -250px;
                                    -webkit-transform: translateY(-12px);
                                    transform: translateY(-12px);}

            p.capa-interior::after { top: 50%; right: -235px;
                                    -webkit-transform-origin: 0 0;
                                    transform-origin: 0 0;
                                    -webkit-transform: rotate(180deg) translate(194px, -12px);
                                    transform: rotate(180deg) translate(194px, -12px);}

            .Referencia { display: none;}

       #CaracteristicasTecnologia { display:flex; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 1100px; margin: 30px auto 0 auto;}
           #CaracteristicasTecnologia > div { text-align: left; margin: 0 15px;}
               ul.General { list-style: none;}
                   ul.General li {  display: flex; flex-wrap: wrap; align-items: center; padding-right: 10px;}
                       ul.General figure { flex: 0 0 50px;}
                       ul.General img { max-width: 100%; display: block;}

                       ul.General h4,
                       ul.General h6 { position: relative; flex: 1; padding-left: 15px;  color: #6D6E71;}

                       ul.General h4 { font-size: 1.5rem; padding-left: 0; margin-left: 10px;}
                       ul.General h6 { font-size: 1.4rem; padding-left: 15px;}

                       ul.General h6::after{ content:"•"; position: absolute; left: 0; top: 0; font-size: 15px; color:#6D6E71;  display: block;}


          #Atributos {flex: 2;}
              #Atributos ul.General { display: flex; flex-wrap: wrap;}
              #Atributos ul.General li { flex: 0 0 50%; margin-bottom: 10px;}

          #Cuidados {flex: 1;}
              #Cuidados h5 { margin-bottom: 5px; font:normal 1.5rem "Avenir-bold-condensed", Arial, Helvetica, sans-serif; color: #6D6E71;}

              #Lavado { display: flex; flex-wrap: wrap;}
                  #Lavado figure { flex: 1; padding: 5px;}
                  #Lavado img { max-width: 100%; display: block;}

/*REGISTRO*/
.Cuenta #ContentGeneralInterna { justify-content: center; align-items: center; width: 100%; min-height: 680px; padding-bottom: 70px;}

    #ActiveForm { width: 100%; max-width: 350px; margin: 0 auto; text-align: left; padding:35px; background-color: #fff; border-radius: 10px; }
    .sombra {box-shadow: 0 3px 3px rgba(0,0,0,0.22);}

        #ActiveForm h2 { font-size: 2rem; color: #363535; margin-bottom: 10px;}

        form.general { text-align: center;}
            form.general > div { width:100%;}

                form.general input[type="text"],
                form.general input[type="email"],
                form.general input[type="tel"],
                form.general input[type="password"],
                form.general select,
                form.general textarea { width:100%; height: 45px;  margin-bottom:10px;}

                form.general select { font-size: 1.2rem;}

                form.general textarea { height:120px; overflow:auto; margin-bottom:10px;}

                form.general input[type="submit"] { margin: 5px auto 0 auto;}

                form.general > div.fila-fluid { display: flex; }
                    form.general > div span { display: block;}
                    form.general > div.fila-fixed span { padding-right:10px !important;}
                    form.general > div.fila-fluid span { flex: 1; margin-right: 10px;}

                        form.general label { display: block; margin-bottom: 5px; margin-top: 10px;}

                        form.general .checkbox-group { display: flex; align-items: center; margin-bottom: 25px;}
                            form.general .checkbox-group input[type="checkbox"] { flex: 0 0 15px; margin-right: 10px;}
                            form.general .checkbox-group label { flex: 1; margin-bottom: 0; margin-top: 0;}

                #formRegistro .AccionesForm { margin-bottom: 4px;}

/*LOGIN*/
    #BtnResetPass { margin-top: 4px;}
    #AccesoRegistro { padding:30px 0 0 0; background: url("imagenes/internas/filete.svg") no-repeat 50% 10px;}

/*RECUPERAR*/
    p.NotaForm { margin-bottom: 10px; font-size: var(--font-s); color: #394353; text-align: center;}

/*CONTACTO*/
    #ContactoPage #ActiveForm { max-width: 500px;}
        #Captcha { margin-bottom: 10px;}

/*MI CARRITO*/
    #ContentBackEnd { width: 100%; max-width: 1000px; margin: 0 auto; text-align: center;}
    #MiCarritoPage #ContentBackEnd { max-width: none;}
        #AlertaCarrito { display: flex; justify-content: center; align-items: center; width: 100%; height: 400px;}
             #AlertaCarrito > div { padding: 30px; border-radius: 5px;}
             #AlertaCarrito p { font-size: 1.9rem; color: #999999;}

        /*display*/
        #AlertaCarrito { display: none;}
        /*.......*/

        #DetallePedido { display: flex; flex-wrap: wrap; justify-content: center;}
            #ListaMiCarrito { flex: 1; margin-right: 15px;}
                #ListaMiCarrito header { padding: 25px 0 15px 0; margin-bottom: 5px; background: url("imagenes/internas/filete.svg") no-repeat 50% 100%;}
                    #ListaMiCarrito h2 { text-align: left; font-size: var(--font-l); color: #000000;}

                    #ListaPedido { /*table-layout: fixed;*/ width:100%; margin:0; color:#333;}
                        #ListaPedido td {  vertical-align:middle; padding: 10px;}

                        td.miniatura { width: 90px; text-align: left;}
                            td.miniatura img { max-width: none;}
                        td.descripcion { width: auto; text-align: left;}
                        td.cantidad { width: 100px; text-align: center;}
                        td.precioparcial { width: auto;  white-space:nowrap; text-align: right;}
                        td.cerrar { width: 60px !important; text-align: center;}

                        #ListaPedido tbody td { border-bottom:1px solid #ccc;
                                                -webkit-transition: background 0.3s ease-in-out, opacity 0.3s ease;
                                                transition: background 0.3s ease-in-out, opacity 0.3s ease;}

                        #ListaPedido tbody tr:last-child td { border: none;}
                            #ListaPedido tbody td p {font-size: var(--font-n);  color: #363535;}
                            td.descripcion p {  text-transform: lowercase;}
                            td.descripcion p::first-letter { text-transform:  uppercase;}

                           a.BtnEliminarItem { width:30px; height: 30px; display: block; margin: 0 auto; border: 1px solid #000; background: url("imagenes/icono-menu-close.svg") no-repeat 50% 50%; background-size: 10px auto; border-radius: 50%;}
                           input.cantidaditem { width: 100%; padding: 5px 5px 5px 10px; background-color: #fff; text-align: left;}
                           td.precioparcial p { font-family: var(--font-primary-medium);}
                           p.PrecioUtilidad { white-space: nowrap; text-align: right;font: normal var(--font-m) var(--font-primary-bold); color: var(--color-ok) !important;}

                       /*Deskotp*/
                        #ListaPedido tr.hover td { opacity: 0.5;}

                        #ListaPedido tr.hover p,
                        #ListaPedido tr.hover input {  text-decoration:line-through;}

                        /*out*/
                        #ListaPedido tr.out td { opacity:0;}
                        /*......*/

                        #CuponDescuento p { display: block; margin-bottom: 8px; font-size: var(--font-s) !important; color: #394353 !important;}
                        #CuponDescuento > div { display: flex; flex-wrap: wrap; gap: 8px;}
                            #CuponDescuento input { flex: 0 0 auto;}


            #ResumenPedido { flex: 0 0 300px; align-self: flex-start;  margin-left: 15px; padding: 25px 2px 2px 2px; border-radius: 7px; background-color: #fff; text-align: center;}
                #ResumenPedido header { display: block; width: 90%; margin: 0 auto; text-align: center; padding:0 15px 15px 15px; background: url("imagenes/internas/filete.svg") no-repeat 50% 100%;}
                #ResumenPedido h3 { text-align: center; font-size: var(--font-l); color: #000000;}

                #DetalleResumen { padding: 15px 0;}
                    #DetalleResumen > div { display: flex; flex-wrap: wrap; align-items: center; text-align: left; padding-top: 15px;}
                        #ResumenPedido .Leyenda { flex: 1; text-align: left; font-size: var(--font-n); color: #333333; padding-left: 25px;}
                        #ResumenPedido .PrecioResumen { flex: 1em; text-align: right; font-family: var(--font-primary-bold); font-size: var(--font-l); padding-right: 25px;}

                 #ResumenPedido footer { margin-top: 20px; padding: 15px 0; border-radius: 4px;}
                    #ResumanTotal,
                    #ResumanTotalUtilidad { display: flex; flex-wrap: wrap; align-items: center; text-align: left; margin-bottom: 20px;}
                    #ResumanTotal .PrecioResumen { font-family: var(--font-primary-bold); font-size: var(--font-m); color: #000;}
                    #ResumanTotalUtilidad .PrecioUtilidad { font-size: var(--font-m); padding-right: 25px;}

                    #ResumenPedido footer input { margin-bottom: 8px;}
                    #ResumenPedido footer .btn-outline { background: none !important;}
                    input#BtnPagar { padding-left: 25px !important; padding-right: 25px !important;}
                    a#BtnConsulaPresupuesto::before { content: ""; width: 16px; height: 16px; background-color: var(--color-brand-primary);  mask-image:url(imagenes/icono-wapp.svg);}


/*PRESUPUESTO*/
 #PresupuestoPage #ContentBackEnd { max-width: 1300px;}
    #AlertPage {position: fixed; z-index: 9989; left: 0; width: 100%; background-color:var(--color-brand-primary); text-align: center; padding: 8px 0;}
    #AlertPage p { font-size: var(--font-m); color: #fff;}

    #ModuloPorcertajeGanancia { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background-color: #fff; margin-bottom: 24px; padding: 16px; border-radius: 8px;}
        #ModuloPorcertajeGanancia p.TxtMensaje { flex: 1 1 100%; font-size: var(--font-s); text-align: left; padding: 0;}
        #PorcentajeGanancia { flex: 1;}
        #AccionesPorcentajeGanancias {flex: 1;}
        #BtnDescargarPresupuesto { border-color: #000 !important; color: #000 !important;}

    #PresupuestoPage #ListaPedido thead td:not(:first-child) { text-align: right;}
    #PresupuestoPage #ListaPedido thead td:not(:first-child) p { font-size: var(--font-n); color: #000; }

/*MIS DATOS*/
#MiCuenta #ContentGeneralInterna { align-items:flex-start;}
    #GrupoMiCuenta { display: flex; flex-direction: column; width: 100%; max-width: 1000px; text-align: center;}

       #NavMiCuenta { flex: 0 0 auto; width: 100%; position: relative; overflow: hidden; margin: 0 auto;
                      display: flex; justify-content: center; width: fit-content; margin-bottom: 24px;}

            #NavMiCuenta a { flex: 0 0 auto; font-size: var(--font-n); padding: 7px 15px; text-align: center; border: 1px solid #6C6C6C; color: #6C6C6C;}
            #NavMiCuenta a:first-child { border-radius: 16px 0 0 16px;}
            #NavMiCuenta a:last-child { border-radius:0 16px 16px 0;}

            /*select*/
            #NavMiCuenta a.select { color: var(--color-brand-primary); border-color: var(--color-brand-primary);}
            /*......*/

       #PanelMiCuenta {flex: 0 0 auto; width: 100%;}
       #PanelMiCuenta #ActiveForm h2 { font-family: var(--font-primary-bold); font-size: var(--font-l);}

       #DatosUsuario { display: block; background-color: #F2F2F2; padding:0.5em 1em; border-radius: 8px;}
       #DatosUsuario label { margin: 0.3em 0;}

/*MIS COMPRAS*/
    /*Modal*/
    .ModalMisCompras .ContentModal { padding: 0; max-width: 700px !important;}
        .ModalMisCompras .TopModal { text-align: center; padding: 30px 20px 15px 20px; border: none;}
        .ModalMisCompras .TopModal p { font-family: var(--font-primary-medium); font-size: var(--font-l);}

        .ModalMisCompras .BottomModal { padding: 0 20px;}

        #ModalDetalleCompra {}
            #ModalDetalleCompra .BottomModal { padding: 0;}
                .ContainerTableModal { position: relative; overflow: auto; width: 100%; max-height: 300px; padding: 0 25px; background-color: #fff; }
                    .ModalMisCompras table.general { width: 100%;}
                    .ModalMisCompras table.general tbody td { padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid #CCCCCC !important;}
                    .ModalMisCompras table.general tbody td p { font-size: var(--font-n);}

                    .ModalMisCompras table.general td.miniatura { padding-left: 10px; padding-right: 0;}
                    .ModalMisCompras table.general td.articulo { padding-left:10px;}
                    .ModalMisCompras table.general td.cantidad { width: 25%; text-align: left;}
                    .ModalMisCompras table.general td.importe { width: 25%; text-align: right;}
                    .ModalMisCompras table.general tbody td[data-info="importe"] p { font-family: var(--font-primary-medium); }


                    #BaseTable { width: 100%; padding:0 25px;}
                        #ExtraDetalle {}
                            .ConceptoResumen { display: flex; flex-wrap: wrap; gap: 24px; align-items: baseline; padding: 10px 25px; border-bottom: 1px solid #CCCCCC;}
                                .ConceptoResumen:last-child { border: none;}
                                    .ConceptoResumen p {flex: 1;}
                                    .ConceptoResumen p:first-child { font-size: var(--font-m); color: #363535; text-align: left;}
                                    .ConceptoResumen p:last-child { white-space: nowrap; text-align: right;}
                                    p.ValorEnvio { font:normal var(--font-m) var(--font-primary-medium); text-align: right; color: #363535;}
                                    p.ValorTotal { font:normal var(--font-xl) var(--font-primary-medium); color:var(--color-brand-primary);  text-align: right;}

                    #ExtraDataEnvio { display: flex; flex-wrap: wrap; margin:0; padding:15px 35px; text-align: left; background-color:#F2F2F2; border-radius: 6px;}
                       #ExtraDelivery { flex: 1;}
                           #ExtraDelivery > div,
                           #ExtraEntrega > div {  display: flex; flex-wrap: wrap; padding: 10px 0; margin: 0 15px;  border-bottom: 1px solid #CCCCCC;}

                           #ExtraDelivery > div > *,
                           #ExtraEntrega > div > * { flex: 1; padding-right: 10px; font-size: var(--font-s); color: #363535;}

                           #ExtraDelivery > div > p:last-child,
                           #ExtraEntrega > div > p:last-child { font-size: var(--font-n) !important; color: #000;}

                           #EstadoPago,
                           #EstadoEnvio { border: none !important;}

                           #EstadoPago > p,
                           #EstadoEnvio > p {  color: #363535;}

                           p[data-estado] { font-size: var(--font-n) !important; color: #000;}


                       #ExtraEntrega { flex: 1;}

                       #ExtraObservaciones { flex: 1 1 100%; padding: 10px 15px;}
                          #ExtraObservaciones p { font-size: var(--font-n); color: #363535;}


     /*modales mis compras*/
	.modaldetalle { overflow: hidden; }
	.modaldetalle #ModalDetalleCompra { opacity: 1 !important; visibility: visible !important;}
    .modaldetalle #ContenidoModalDetalleCompra { opacity:1;
                                                -webkit-transform: translateY(0);
                                                 transform: translateY(0);}
    /*........*/

     .ContainerTable { background-color: #fff; padding: 2px; border-radius: 10px;}

/*CHECKOUT*/
#CheckOut #ContentGeneralInterna { align-items:flex-start;}
    #GrupoCheckOut { flex: 1; text-align: center;}
       #PasoAPaso { display: flex; align-items: center; justify-content: center; width: 100%; margin: 0 auto; padding:0 0 30px 0; }
             #Steps { list-style: none; flex: 0 0 350px; display: flex; align-items: center;}
                #Steps li:not(.separador) { flex: 0 0 35px; height: 35px; display: flex; align-items: center; justify-content: center; font-size: 18px; color:#999999; border:1px solid #999999; border-radius: 50%;}
                #Steps li.separador { flex: 1 1 110px; margin: 0 5px; border-bottom: 1px solid #06489A;}
                #Steps li.separador.punteado { border-bottom: 2px dotted #999999;}

                /*select*/
                #Steps li.active { background-color:#5692CD; border-color:#5692CD;  color: #fff;}
                #Steps li.past { background-color: #06489A; border-color:#06489A;  color: #fff;}
                /*......*/

        #ContentCheckout { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; width: 100%; max-width: 900px; margin: 0 auto; }
            #ContentCheckout #ActiveForm { flex: 1; max-width: none;}
                .conlabel #ContentMainForm { padding-top: 5px;}

                #ContentCheckout .AccionesForm { text-align: center;}
                    #BtnSiguiente { margin: 0 auto; padding-right: 40px !important; background-image: url("imagenes/internas/icono-flecha-rigth.svg"); background-repeat: no-repeat; background-position:  90% 50%; background-size: 20px auto;}

            #ContentCheckout #ResumenPedido { flex: 0 0 300px; border: 1px solid #ccc;}
                #ContentCheckout #ResumanTotal { margin-bottom: 0;}

/*CHECK OUT - DATOS COMPRA*/
    #NavFormaEnvio { display: flex; margin-bottom: 10px; }
        #NavFormaEnvio a { flex: 1; max-width: 120px; margin-right: 15px; font-size: 1.3rem; text-align: center; padding: 8px 0; box-shadow: inset 1px 0 0 0 #707070, inset -1px 0 0 0 #707070, inset 0 1px 0 0 #707070, inset 0 -1px 0 0 #707070; border-radius: 30px;
                          -webkit-transition: box-shadow 0.5s ease, color 0.5s ease;
                          transition: box-shadow 0.5s ease, color 0.5s ease;}
    #PanelRetiro,
    #PanelEnvio { padding-top: 5px;}

    #PanelRetiro {}
        p.TextModuloRetiro { text-align: left; font-size: 1.1rem; color: #5A5A5A;}

        #ContentDireccion { text-align: left; padding:5px 0 45px 0;}
            #ContentDireccion address,
            #ContentDireccion p { font-size: 2rem; font-style: normal; color: #5b5b5b;}

    /*default*/
    #PanelRetiro,
    #PanelEnvio { display: none;}

    /*select*/
    #NavFormaEnvio a.select {color: #5692CD; box-shadow: inset 2px 0 0 0 #5692CD, inset -2px 0 0 0 #5692CD, inset 0 2px 0 0 #5692CD, inset 0 -2px 0 0 #5692CD;}
    #PanelEnvio.select,
    #PanelRetiro.select { display: block;}
    /*.......*/

/*CHECK OUT - MEDIOS PAGO*/
    #MediosPago { display: flex; flex-wrap: wrap; margin: 20px 0;}
        #MediosPago div { flex: 0 1 50%; padding: 15px 5px; text-align: center;}
            #MediosPago figure { margin: 0 auto;}
            #MediosPago img { width: 120px; height: 120px;}
            #MediosPago p { font-size: 1rem; color: #111; display: block; text-align: center;}

/*CHECK OUT - CONFIRMACION COMPRA*/
    #ListaMiCarrito { margin-bottom: 15px;}

/*CHECK OUT - FELICIDADES*/
    #OkCard { width: 100%; max-width: 450px; margin: 0 auto; padding: 30px 20px 0 20px; background-color: #fff; border-radius: 10px;}
        #OkCard > div { padding-bottom: 30px;}
            #OkCard h2 { margin-bottom: 5px; font-size: 1.3rem; color: #111;}
            p.NombreRegistrado { font-size: 2.5rem;color: #459EC9;}
            #OkCard h3 { margin: 15px 0; font-size: 1.4rem; color: #333;}
            #OkCard h3 strong { display: block;}
            p.NotaLegal { margin-bottom: 20px; font-size: 1rem; color: #111;}

/*TERMINOS Y CONDICIONES*/
    #BoxSimple {width: 100%; max-width: 1000px; margin: 0 auto; text-align: left; padding: 35px; background-color: #fff; border-radius: 10px;}
        #BoxSimple header {}
            #LogoLegales { width: 100%; max-width: 200px; margin: 0 0 20px 0;}
            #LogoLegales img { max-width: 100%; display: block;}
            #BoxSimple h2 {font-size: 2rem; color: #363535;  margin:35px 0;}

        #TextLegales { width: 100%; margin: 0 auto;}
        #TextLegales p { font-size: 1.1rem; line-height: 1.7em !important; text-align: left; color: #2D2D2D;}

/*COMO COMPRAR*/
#ComoCompar main { background: url("imagenes/olas-footer.svg") no-repeat 100% 50px; background-size: 50% auto;}
    #DataComprar.Viewport { max-width: 1400px; margin-top: 50px; margin-bottom: 70px; text-align: left;}
        #DataComprar > header { padding: 0 10px;}

            #DataComprar h2 { font-size: 3.5rem; line-height: 0.8em !important; color: #707070;}

               #FormasPago { display: flex; flex-wrap: wrap; align-items: flex-start; width: 100%; padding-top: 80px;}
                   #DataComprar h3 { font-size: 1.7rem; color: #707070;}
                   #FormasPago h3 { flex: 1 1 100%;  margin: 0 0 10px 10px;}

                   .Card { flex: 1; margin: 0 10px; padding: 30px 40px; background-color: #fff; border-radius: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);}
                       .Card header {}
                       .Card header img { width: 40px;}
                       .Card h4 { margin: 10px 0; font-size: 1.4rem; color: #707070;}

                       .Card p,
                       .Card address,
                       .Card li{ font-size: 1.2rem; line-height: 1.4em !important; color: #707070;}

                       .Card ul { list-style: none; margin-top: 20px;}
                       .Card li { position:relative; display: block; padding-left: 10px; color: #707070;}
                       .Card li:before {content: "\2022"; position: absolute; top: 0; left: 0; font-size: 10px; color: #707070;}

                       .Card address { font-style: normal; display: block; margin-top: 15px;}

                img[alt="Mercadopago"] { max-width: 100%; display: block;}

                img[alt="Deposito"] { width: 50px !important;}
                img[alt="Camion"],
                img[alt="Avion"] { width: 50px !important;}

               #Facturacion { flex: 1 1 100%; margin: 30px 10px 40px 10px; padding: 40px; text-align: center; background-color: #E3E3E3; border-radius: 20px;}
                   #Facturacion p { font-size: 2rem; color: #4B4B4B;}

               #FormasEntrega { display: flex; flex-wrap: wrap; align-items: flex-start; width: 100%;}
                   #FormasEntrega h3 { flex: 1 1 100%;  margin: 0 0 5px 20px;}

                   p#TxtFormasEnvio { display: block; margin-bottom: 10px; padding-top: 5px; border-bottom: 1px solid #AEAEAE;}

/*SOBRE NOSOTROS*/
#HeroInterna  { padding: 48px 0; width: 100%; height: 100vh; max-height: 500px; background: url(imagenes/internas/hero-nosotros.jpg) no-repeat 50% 50%; background-size: cover;}
    #ContentHeroInterna { text-align: left; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; height: 100%;}
        #ContentHeroInterna div { flex: 0 1 800px; text-align: center;}
            #ContentHeroInterna h1 { display: block; margin-bottom: 16px; font-size: var(--font-2xl); color: #fff;}
            #ContentHeroInterna p { margin-bottom: 16px; font-size: var(--font-l); color: #fff;}
            p.TxtDestacado { font-family: var(--font-secondary-regular) !important; font-size: var(--font-m) !important;}
            p.TxtDestacado em { color: #fff;}
            p.TxtDestacado em.red { color: var(--color-brand-primary);}

  #MarcasInterna { padding: 100px 0 24px 0; background-color: #fff;}
    p.TituloDestacado {font-size: var(--font-m);}
    p.TituloDestacado em { font-family: var(--font-secondary-regular); font-size: var(--font-2xl); color: var(--color-brand-primary);}
    #ContentMarcasInterna p:not(.TituloDestacado) { font-size: var(--font-m);}

  #ExperienciaInterna { padding: 100px 0;}
    #ExperienciaInterna p:not(.TituloDestacado) { font-size: var(--font-l);}
    #ExperienciaInterna p.TituloDestacado strong { padding-left: 4px;}
    #ExperienciaInterna p.TituloDestacado em {font-size: var(--font-4xl) !important;}

  #MapaShowroom { position: relative; overflow: hidden; flex: 1; align-self: stretch; max-width: 800px; min-height: 500px; border-radius: 4px;}
  #MapaShowroom iframe { width: 100%; height: 100%;}


.SafeZone * { line-height: 1.2em !important;}
}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*COMPATIBLIDADES///////////////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
	select { padding-right:30px; background:#fff url("imagenes/internas/icono-chevron-down.svg") no-repeat 95% 50%;}
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*RESPONSIVE///////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media (max-width: 1890px) {
.Viewport { padding:0 30px; max-width:none;}

/*HEADER*/
    #PanelLogin { left: auto; right: 0;}
    #LogAbierto.mueca::after { right: 15px; left: auto; margin: 0;}

/*BODY*/
    #PanelLateral { padding-right: 30px;}

    #Pie p { padding-left: 250px;}
}

@media (max-width: 1300px) {
/*HEADER*/
#Logo {  flex: 0 0 150px;  }

/*DETALLE DE PRODUCTO*/
#MaximaTecnologia h3 span { display: block;}
    #GraficoTecnologia { min-width: 900px; min-height: 150px; background-position: 50% 40%;}
        #GraficoTecnologia p { margin-bottom: 10px; font-size: 1.3rem;}
        p.capa-interior::after {right: -260px;}
        ul.General h4 { font-size: 1.1rem;}
        ul.General h6 { font-size: 1.2rem;}
}

@media (max-width: 1200px) {
/*HEADER*/
header.general { position: relative;}
    a#BtnMenuMobile { display:block; position:absolute; z-index:9200; top:12px; left: -8px; width:35px; height:35px; border-radius: 50%; cursor:pointer;
                   background: url("imagenes/internas/menu.svg") no-repeat 50% 50%, url("imagenes/internas/menu-close.svg") no-repeat 50% 200px; background-size: 15px auto, 15px auto;}

    #Logo { text-align: left; margin-left: 35px;}

    #Menus { flex: 1;}
        #Buscar { flex: 1; text-align: left;}
        #Buscador { max-width: 300px;}

        #MenuGeneral { position:fixed; overflow: hidden; z-index:9100; top:0; left:0; margin-left: 0;
                        display:flex; flex-direction: column; align-items:center; justify-content: center; width:100%; height: 0;
                        background:rgba(241,241,241,0.90); backdrop-filter: blur(5px); padding-right: 0; border: none;
                        -webkit-transition: height 0.7s ease-in-out;
                        transition: height 0.7s ease-in-out;}

        #IsoMenu { display: block; flex: 0 0 auto; width: 100%; text-align: center;}
        #IsoMenu img { margin: 0 auto;}

        #MenuGeneral a { flex: 0 0 auto;}


        /*select*/
        #MenuGeneral a.select { color: var(--color-brand-primary);}
        /*menumode*/
        .menumode { overflow:hidden;}
        .menumode a#BtnMenuMobile { background-position: 50% -200px, 50% 50%; }

        .menumode #MenuGeneral { overflow-x: hidden; overflow-y:auto; height: 100vh;}
        /*........*/

        #BarraContacto  { display: none;}


/*MAIN*/
#AlertPage { position: relative; left: auto; z-index: 0; }

.Eshop #ContentGeneralInterna { position: relative; padding-top: 30px; display: block; }
    #PanelLateral { position: absolute; z-index: 100; top: 45px; left: 0; width: 290px; padding-top: 10px; padding-left: 60px; padding-right: 0;  background-color: #f1f1f1;
                    -webkit-transform: translateX(-100%);
                     transform: translateX(-100%);
                    -webkit-transition: -webkit-transform 0.7s cubic-bezier(.25,.8,.25,1);
                    transition: transform 0.7s cubic-bezier(.25,.8,.25,1);}

        #PanelLateral h2 { font-size: 2.3rem;}

    #PanelCentral { position: relative; overflow: hidden; width: 100%;
                     -webkit-transition: padding 0.4s cubic-bezier(.25,.8,.25,1);
                     transition: padding 0.4s cubic-bezier(.25,.8,.25,1);}

        #TopPanelCentral { position: relative; overflow: hidden;}

        .FiltroSubCategoria { width: 100%; max-width: 221px;}

        #BtnFiltro { display: block; flex: 0 0 fit-content; padding:6px 8px 6px 30px; border: 1px solid #CBD5E1;  border-radius: 4px;  background: url("imagenes/internas/filtro.svg") no-repeat 8px 50%, url("imagenes/internas/menu-close.svg") no-repeat 100px 50%; background-size: 15px auto, 15px auto;
                     margin-right: auto;}
        #BtnFiltro::before { content: "Filtrar"; font: normal var(--font-s) var(--font-primary-regular); color: #000;}

    /*filtermode*/
    .filtermode #PanelLateral {-webkit-transform: translateX(0);
                               transform: translateX(0); }

    .filtermode #PanelCentral { padding-left: 290px;}
    .filtermode #OrderMode,
    .filtermode #ViewMode,
    .filtermode #Utilidad{ display: none;}

    .filtermode #BtnFiltro { background-position:100px 50%, 8px 50%; }
    .filtermode #BtnFiltro::before { content: "Cerrar";}
    /*.........*/


/*DETALLE DE PRODUCTO*/
#Articulo { max-width: 600px; max-width: 0 auto;}
    #ArticuloFoto { flex: 1 1 100%;}
        .EtiquetasRopa { width: 100%; padding:0 0 25px 0;}
              .EtiquetasRopa figure { flex: 1; text-align: center; margin:10px 20px;}
              .EtiquetasRopa img { max-width: 100%; display: block; margin: 0 auto;}

        #ArticuloFoto .EtiquetasRopa { display:none;}
        #ExtraArticulo .EtiquetasRopa { display:flex;}

    #ArticuloInfo { flex: 1 1 100%; padding-left: 15px; padding-right: 15px;}
}

@media (max-width: 1100px) {
/*COMO COMPRAR*/
    .Card { flex: 0 0 calc(50% - 20px); margin-bottom: 20px;}

/*LISTADO DE PRODUCTOS*/
    .Items header { align-items: flex-start; padding: 16px 0 0 16px;}
    .listamode #ListaProductos.Items .AccionesItem { flex: 1 1 100%; justify-content: space-between; height: auto;}
    .listamode #ListaProductos.Items .AccionesItem a.BtnAgregar { margin:0;}
    .listamode #ListaProductos.Items .ProductoCantidad {}
}

@media (max-width: 1023px) {
/*MI CARRITO*/
    #DetallePedido { justify-content: flex-start; }
        #MiCarritoPage #ListaMiCarrito { order: 2; flex: 1 1 100%; margin-right: 0; }
        #MiCarritoPage #ResumenPedido { order: 1; margin-left: 0;}

/*MIS COMPRAS*/
.ContainerTable { border: none; border-radius: 0; background: none; box-shadow: none;}
    main table.general thead { display: none; }

    main table.general,
    main table.general tbody,
    main table.general tbody tr,
    main table.general tbody td { display: block; width: 100%; text-align: left !important;}

    main table.general tbody { display: flex; flex-wrap: wrap;}
    main table.general tbody tr { flex: 1 1 200px; display: flex; flex-direction: column; margin: 10px; background-color: #fff; box-shadow: 0 3px 3px rgba(0,0,0,0.22); border-radius: 10px;}
        main table.general tbody td { flex: 0 0 auto; border:none; padding-top: 10px !important;  padding-bottom: 10px !important;}
            main table.general tbody td::before {content: attr(data-info); font-variant: small-caps; display: block; margin-bottom: 6px; font-size: var(--font-s); color: #999;}
            main table.general tbody td p { font-size: var(--font-m); }

        main table.general tbody td[data-info="fecha"] { padding-top: 30px !important;}
        main table.general tbody td[data-info="acciones"] { padding-bottom: 35px !important;}
            main table.general tbody td[data-info="acciones"]::before { display: none;}


    /*Desktop*/
    .Desktop main table.general tbody tr:hover td { background:none; }
    /*.......*/
}

@media (max-width: 950px) {
/*HEADER*/
    #PanelCarrito { display: none;}
}

@media (max-width: 970px) {
/*DETALLE DE PRODUCTO*/
    #GraficoTecnologia { min-width: auto; background-size: 100% auto;}

/*CHECKOUT*/
    #ContentCheckout #ActiveForm { flex: 1 1 100%;}
    #ContentCheckout #ResumenPedido { margin-top: 20px;}

    #PanelRetiro,
    #PanelEnvio { padding-top: 15px;}
}

@media (max-width: 900px) {
/*MAIN*/
    #ContentPie { height: 180px;}
       #Pie p { padding-left: 220px; font-size: 1.8rem;}
}

@media (max-width: 870px) {
/*LISTA DE PRODUCTOS*/
    .FotoTalles { flex: 0 0 120px; background-size: auto 100% !important;}

/*DETALLE DE PRODUCTO*/
    #GraficoTecnologia p { font-size: 1rem;}
    #GraficoTecnologia p::after { width: 50px;}

    p.capa-exterior::after { top: 50%; right: -50px;}
    p.capa-interior::after { top: 50%; right: -95px;}

    #Atributos,
    #Cuidados { flex: 1 1 100%;}

    #Cuidados { padding-top: 25px;}
    #Lavado { max-width: 50%; margin-bottom: 10px;}
}

@media (max-width: 850px) {
/*FOOTER*/
#TopFooter { display: block; text-align: center;}
    #LogoFotter, #InfoFooter { text-align: center;}
    #LogoFotter img { margin: 0 auto 24px auto;}
    #Sitemap { display: none;}
}

@media (max-width: 750px) {
/*HEADER*/
#AccionesEcomm { padding-left: 0;}

    /*Buscar*/
        #Buscar { flex: 0 0 fit-content; padding: 0;}
            a#BtnBuscarMobile { display: block; width:24px; height: 100%; background: url("imagenes/internas/lupa.svg") no-repeat 50% 50%; background-size: 20px auto;}

            #Buscador { position:fixed; overflow: hidden; z-index:9200; top:0; left:0; display:flex; flex-wrap: wrap; align-items:center; justify-content:center;
                        width:100vw; height: 0; background:rgba(241,241,241,0.90); backdrop-filter: blur(5px); padding:0 15px; max-width: none;
                         -webkit-transition: height 1s cubic-bezier(.25,.8,.25,1);
                          transition: height 1s cubic-bezier(.25,.8,.25,1);}

             a.cerrarx { display: block; }
             a#BtnCerrarBuscador { display: block;}
                 .QuickAV { max-width: 400px;}
                 input#busqueda-quickav { font-size: var(--font-m);}

            /*buscarmode*/
            .searchmode { overflow:hidden;}
            .searchmode a#BtnMenuMobile  { display: none;}
            .searchmode #Buscador { overflow:auto; height: 100vh;}
            /*..........*/

    /*mi carrito*/
    #PanelCarrito { display: none;}

/*main*/
    #Goteo {}
        #Goteo li { flex-direction: column;}
        #Goteo li figure,
        #Goteo li p { flex: 0 0 auto;}
        #Goteo li figure img { width: 50px; margin: 0 0 10px 10px; max-width: none;}


    #ContentPie { height: auto; display: block; text-align: left; padding-top: 25px; padding-bottom: 25px;}
        #Pie p { display: block; margin-bottom: 15px; padding-left: 240px; padding-right: 0;}
        #LogoPieEldertec { display: block; padding-left: 240px; padding-right: 0; text-align: left;}
            #LogoPieEldertec img { margin: 0; width: 100px;}
            #LogoPieEldertec figcaption { text-align: left;}

/*PRODUCTOS CATEGORIAS*/
    #NavPaginado { margin-bottom: 40px;}

    #Talles > div { flex: 1 1 100%; max-width: 360px; margin: 10px 0;}

/*DETALLE PRODUCTO*/
    #ArticuloInfo { padding-left: 10px; padding-right: 10px;}
        #ArticuloInfo h3 { max-width: none;}
        .EtiquetasRopa figure { flex: 0 0 33%; margin: 0; padding:5px 15px;}

        #PrecioArticulo { flex: 0 0 auto;}
        #BtnAgregarCarrito { flex: 1;}

/*REGISTRO*/
    .Cuenta #ContentGeneralInterna { min-height: auto;}
}

@media (max-width: 690px) {
/*main*/
    #ListaProductos.Items {max-width: 250px; margin: 0 auto;}

    /*listamode*/
    .listamode #ListaProductos.Items {grid-gap: 10px; max-width: none;}
    .listamode #ListaProductos.Items article { display: flex; flex-direction: column; height: auto; margin-bottom: 0; background-color: #fff;}
    .listamode #ListaProductos.Items header {  flex: 0 0 100px; width: 100px;}
    .listamode #ListaProductos.Items .InfoItem { padding: 16px;}
    /*.listamode #ListaProductos.Items .InfoItem h3 { font-size: 1.5rem;}
    .listamode #ListaProductos.Items .PreciosTag p.Precio { font-size: 1.5rem;}*/
    /*........*/

/*MI CARRITO*/
#ListaPedido { display: block; width: 100%; text-align: left !important;}
    #ListaMiCarrito header { background: none; padding-bottom: 4px;}

    #ListaPedido tbody { display: flex; flex-wrap: wrap;}
    #ListaPedido tbody tr { position: relative; flex: 1 1 200px; max-width: 430px; display: flex;  flex-wrap: wrap; background-color: #fff; border: 1px solid #E4E4E4; border-radius: 7px; padding: 15px; margin-bottom: 6px;}
        #ListaPedido tbody td { text-align: left; border: none; padding: 5px 0;}
        td.miniatura { flex: 0 0 50px;}
        td.descripcion { flex: 1 1 100%;}
        td.cantidad {  flex: 1 1 100%; margin-right: 20px;}
        td.cantidad input { width: 80px;}
        td.precioparcial { flex: 1;}

        #ListaPedido tbody td::before {content: attr(data-info); display: block; font-size: 0.7rem; color: #999;}

        a.BtnEliminarItem { position: absolute; top: 15px; right: 10px;}


        /*Deskotp*/
        #ListaPedido tr.hover td { background: none;}
        /*.......*/

/*PRESUPUESTO*/
#ContentGeneralInterna { padding-top: 32px;}
    #PresupuestoPage #ListaMiCarrito { flex: 1 1 100%; margin-right: 0;}
        #PresupuestoPage #ListaPedido tbody { gap: 8px;}
        #PresupuestoPage #ListaPedido thead td:not(:first-child) p { display: none;}
        #PresupuestoPage #ListaPedido tbody tr { flex: 0 1 auto; max-width: 430px;}
        #PresupuestoPage #ListaPedido tbody td.cantidad { flex: 1 1 100%;}

}

@media (max-width: 660px) {
/*CATEGORIAS*/
    #NavSocialFlotante { display: none;}

/*MIS COMPRAS*/
    #ExtraDelivery,
    #EstadoEnvio { flex: 1 1 100%;}
    #EstadoPago {border-bottom: 1px solid #CCCCCC !important;}

/*COMO COMPRAR*/
    #DataComprar.Viewport { margin-bottom: 35px;}
        #FormasPago { padding-top: 50px;}
            .Card { flex: 1 1 100%; margin-left: 0; margin-right: 0;}

            #Facturacion { margin-top: 15px; margin-left: 0; margin-right: 0;}
            #Facturacion p { font-size: 1.5rem;}

/*SOBRE NOSOTROS*/
     #ContentHeroInterna p { font-size: var(--font-m);}
     #ContentMarcasInterna p br,
     #ExperienciaInterna p br { display: none;}
}

@media (max-width: 600px) {
/*HEADER*/
a#BtnMenuMobile { top: 4px;}
#Logo img { width: 100px;}
#MenuGeneral a {font-size: var(--font-m);}

/*MAIN*/
    #Pie { background-size: 80% auto, auto 150px;}
        #Pie p { padding-left: 15px; margin-bottom: 55px; font-size: 2.1rem;}
        #LogoPieEldertec { padding-left: 200px;}

    #Sitemap ul { margin-right: 0;}

/*FOOTER*/
    #LogoFotter img { max-width: 100px;}

    #ContentLegales { display: block;}
    p#Copy { margin-bottom: 24px; text-align: center;}
    p#CreacionUno { text-align: center;}

 /*LISTADO DE PRODUCTOS*/
    #Utilidad { order: 1; flex: 1 1 100%; height: 45px;}
    #Utilidad form { justify-content: flex-start;}
    #BtnFiltro { order: 2;}
    #OrderMode { order: 3;}

/*DETALLE PRODUCTO*/
    .slide .SlideItems { height: 350px;}

    #FiltrosArticulo { max-width: none;}
        #FiltroTalle { flex: 1 1 100%;}

    a#BtnAgregarCarrito { flex: 1 1 100%; margin-top: 15px;}

    #CaracteristicasTecnologia > div { flex: 1 1 100%;}
    #CaracteristicasTecnologia > div:first-child { margin-bottom: 15px;}
    #Atributos ul.General li { flex: 1 1 100%;}

    #Cuidados { padding-top: 0;}
        #Lavado { max-width: 70%;}

/*MIS COMPRAS*/
    #ModalDetalleCompra table.general thead { display: none;}
    #ModalDetalleCompra table.general,
    #ModalDetalleCompra table.general tbody,
    #ModalDetalleCompra table.general tr,
    #ModalDetalleCompra table.general td { display: block;}

    #ModalDetalleCompra table.general tr { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 5px; border: 1px solid #ccc; border-radius: 5px;}
        #ModalDetalleCompra table.general td { border: none !important;}
        /*#ModalDetalleCompra table.general td.miniatura { flex:  0 0 80px;}*/
        #ModalDetalleCompra table.general td[data-info="articulo"] { flex: 1; padding-right: 0;}
        #ModalDetalleCompra table.general td[data-info="cantidad"] { flex: 0 0 auto; margin-left: 10px; padding-top: 0; }
        #ModalDetalleCompra table.general td[data-info="importe"] { flex: 0 0 auto; padding-top: 0; width: auto;}

        /*Desktop*/
        .Desktop table.general tbody tr:hover td { background: none;}
        /*........*/

        #ExtraDetalle { margin-top: 5px;}
            .ConceptoResumen { border: none; padding-top: 0;}
}

@media (max-width: 500px) {

/*main*/
   #ContentAbsorcion { padding: 25px;}
       #Goteo ul { flex-direction: column;}
       #Goteo li { flex-direction: row; margin:7px 0;}

   #PanelLateral {padding-left: 45px;}
        #BtnFiltro { height: 32px;}

       /*filtermode*/
       .filtermode #BtnFiltro { padding: 12px 20px 12px 12px;}
       .filtermode #BtnFiltro::before { content: ""; }
       /*.filtermode #PanelCentral { padding-left: 200px;}*/
       /*........*/

/*CATEGORIA PRODUCTOS*/
    #OrderMode { margin-right: 0;}
    #NavFiltros #BtnVerTalles { display: block; font-size: 1.2rem; margin: 0 10px !important; }

    .TablaTalles thead td p {font-size: 1.1rem;}

     /*listamode*/
    /*.listamode #ListaProductos.Items footer {flex-direction: column; align-items: flex-start;}
    .listamode #ListaProductos.Items .AccionesItem { flex: 1 1 100%;  height: auto; text-align: left; display: block; padding-top: 0; width: 100%; }
    .listamode #ListaProductos.Items .AccionesItem > a { margin: 0; }*/
    /*........*/

/*DETALLE PRODUCTO*/
#Articulo { padding: 0;}
    #ArticuloFoto { border: none; border-radius: 0;}
        #ArticuloInfo { padding: 30px 20px 0 20px;}
            #Codigo,
            #NivelAbsocion,
            #PorPack { flex: 1 1 100%; border: none; padding: 0;}

            #Codigo,
            #NivelAbsocion { padding-bottom: 25px;}

        #MaximaTecnologia { padding-top: 35px; padding-bottom: 35px;}
            #MaximaTecnologia h3 { margin-bottom: 0; font-size: 2.3rem;}

            #GraficoTecnologia { padding-top: 20px; padding-bottom: 35px;}
                #GraficoTecnologia div:first-child { -webkit-transform: translateX(-30px); transform: translateX(-30px);}
                #GraficoTecnologia div:last-child { -webkit-transform: translateX(30px); transform: translateX(30px);}

                #CaracteristicasTecnologia { margin-top: 0;}
                    #Lavado { max-width: 100%;}
                    #Cuidados h5 { margin-bottom: 5px;}
                    ul.General h4,
                    ul.General h6 { font-size: 1.3rem;}

                    #Atributos ul.General figure { flex: 0 0 40px;}

/*MI CARRITO*/
  #ResumenPedido { flex: 1 1 100%; margin: 5px;}

/*PRESUPUESTO*/
  #AlertPage p { font-size: var(--font-xs);}


/*MIS COMPRAS*/
    .ModalMisCompras .TopModal { border-bottom: 1px solid #cfcfcf;}
    .ModalMisCompras .TopModal p { text-align: left;}
    .ContainerTableModal,
    #BaseTable { padding-left: 15px; padding-right: 15px;}

    #ModalDetalleCompra table.general tr { border: none;}
    #ModalDetalleCompra table.general td[data-info="articulo"] { padding-left: 0;}
    #ModalDetalleCompra table.general td[data-info="importe"] { padding-right: 0;}

    .ConceptoResumen { padding-right: 0; padding-left: 0;}

    #ExtraDetalle { padding-top: 5px;}
    #ExtraDataEnvio { padding-left: 0; padding-right: 0;}


/*CHECKOUT*/
    #Steps { flex: 0 0 300px;}

    form.general > div.fila-fluid { flex-wrap: wrap;}
    form.general > div.fila-fluid span,
    form.general > div.fila-fixed span { flex: 1 1 100%; padding-right: 0 !important; margin-right: 0;}

    #ContentCheckout #ResumenPedido { flex: 1 1 100%; margin: 25px 0 0 0;}

    #MediosPago { margin-top: 0;}
    #MediosPago img { width: 90px; height: 90px;}
}

@media (max-width: 450px) {
.Viewport { padding:0 15px;}
.Cuenta .Viewport { padding:0 25px;}


/*DETALLE PRODUCTO*/
    .AyudaPrecio .GloboAyuda { width: 110px;}

    #MaximaTecnologia .Viewport { padding-left: 15px; padding-right: 15px;}
        #GraficoTecnologia { flex-direction: column; margin-top: 30px; padding-top: 150px; padding-bottom: 10px; background: url("imagenes/grafico-mobile.png") no-repeat 100% 0; background-size: 130% auto;}
            #GraficoTecnologia div { flex: 0 0 auto; width: 100%;
                                    -webkit-transform: none !important;
                                    transform: none !important;}

            #GraficoTecnologia p { padding: 9px; text-align: center; font-size: 1.4rem; margin: 0 0 10px 0; border-radius: 8px; border-width: 1px;}
                .Referencia { display: flex; align-content: center; justify-content: center; margin: 0 auto 5px auto; width: 24px; height: 24px; border: 1px solid #ccc; border-radius: 50%;}
                #GraficoTecnologia p br { display: none;}
                #GraficoTecnologia p::after { display: none;}

                #Atributos ul.General h4,
                #Atributos ul.General h6 { font-size: 1.4rem;}

                #Atributos ul.General li { margin-bottom: 15px;}

}