/*
###########
 COLORES (variables del complemento)
###########
 Para adaptar el escaparate a otra web (p. ej. una web oscura) basta con redefinir estas variables
 en el CSS de la web, sin tocar este archivo:
     :root { --escap-texto: #e5e7eb; --escap-fondo: #1f2937; ... }
 Van en :where(:root), que no suma especificidad: cualquier :root de la web gana, cargue antes o después.
 Por defecto toman los colores de la web cuando existen (--primary, --primary-invert, --secondary, --font-color).
*/
:where(:root){
    --escap-texto:             var(--font-color, #1f2937);    /* texto principal, precio, títulos */
    --escap-texto-suave:       #4b5563;                        /* textos secundarios: fecha, precio anterior, extensión */
    --escap-fondo:             #fff;                           /* tarjetas, campos, botones claros */
    --escap-superficie:        #f5f5f5;                        /* bloques suaves: descripción, fondo de galería, sin productos */
    --escap-superficie-fuerte: #eee;                           /* píldoras de categorías, paginación, botón volver */
    --escap-borde:             #ddd;                           /* bordes y separadores */
    --escap-sombra:            rgba(0,0,0,0.08);               /* sombras suaves */
    --escap-acento:            var(--primary);                 /* color principal: botones, oferta, puntos activos */
    --escap-acento-texto:      var(--primary-invert, #fff);    /* texto sobre el color principal */
    --escap-foco:              var(--secondary, var(--primary)); /* contorno de foco con teclado */
    --escap-error:             #9f3a38;                        /* mensaje de error del formulario */
    --escap-exito:             #2c662d;                        /* mensaje de envío correcto */
    /* Bordes redondeados: los de la web (--radiusBox, --radiusButton, --radiusImg) o estos por defecto */
    --escap-radio-caja:        var(--radiusBox, 8px);          /* bloques: descripción, adjuntos, etiqueta de oferta, galería */
    --escap-radio-boton:       var(--radiusButton, 8px);       /* botones: enviar, volver, contacto */
    --escap-radio-imagen:      var(--radiusImg, var(--radiusBox, 8px)); /* fotos del listado, mosaico y miniaturas */
    --escap-radio-etiqueta:    calc(var(--escap-radio-caja) / 2); /* etiquetas pequeñas: oferta del listado, destacado, paginación, casillas */
}

/*
###########
 GENERALES
###########
*/
:root{
      --padd-inner: 0.85em;
}

@media screen and (min-width: 601px) {
     :root{--padd-inner: 1em;}
}

.comp-escaparate{
    position:relative;
    font-size: 1rem;
    line-height: var(--line-height);
}

.comp-escaparate .select{position:relative;}
.comp-escaparate .select select { display: inline-block; font-size:0.95rem;min-height:42px; width: 100%; padding:8px 28px 8px 8px; cursor: pointer; border-radius: var(--escap-radio-caja); outline: 0; background: var(--escap-fondo); color: var(--escap-texto); border: 1px solid var(--escap-borde); line-height:var(--line-height); }
.comp-escaparate .select select::-ms-expand { display: none; }
.comp-escaparate .select select:hover, .select select:focus { background: var(--escap-superficie);}
.comp-escaparate .select select:disabled { pointer-events: none; opacity: .5; }
.comp-escaparate .select__arrow { position: absolute; right: 20px; width: 0; height: 22px; pointer-events: none;  top: 50%; transform: translateY(-50%);}
.comp-escaparate .select__arrow:after{ content: "\f0d7"; font-family: var(--awesome);font-weight:900; font-size: 16px;}
.comp-escaparate .select select:hover ~ .select__arrow, .select select:focus ~ .select__arrow { border-top-color: var(--escap-texto); }
.comp-escaparate .select select:disabled ~ .select__arrow { border-top-color: var(--escap-borde); }

.comp-escaparate input, .comp-escaparate textarea, .comp-escaparate button, .comp-escaparate select { border-radius: 0; box-shadow: none; border: 0; -webkit-appearance: none;-moz-appearance: none; appearance: none;}

/*
###########
 Filtros y oden
###########
*/

.escaparate__desc{
    margin:0 0 1.5rem 0;
}

/* Filtro, order y buscador */
.escaparate__filter {
    display: flex;
    flex-direction:column;
    margin: 0 0 1.5rem;
    align-items:center;
}
@media screen and (min-width: 768px) {
    .escaparate__filter {
        display: flex;
        flex-direction:row;
        justify-content: space-between;
    }
}

/* Ordenación */
.escaparate__order{
    display:flex;
    align-items:center;
    flex:auto;
    justify-content: flex-end;
    flex-shrink:0;
}
.escaparate__order .select{
    max-width:300px;
}
.escaparate__order p,
.escaparate__order label{
    margin:0 0.5rem 0 0;
    flex-shrink:0;
    font-size:0.95rem;
}

/* Buscador */
.escaparate__search {
	display: flex;
	width: 100%;
    margin-bottom:1rem;
    max-width:316px;
}

.escaparate__search input {
	background: var(--escap-superficie);
	color: var(--escap-texto);
	padding: 0   12px;
	border-radius: var(--escap-radio-caja) 0 0 var(--escap-radio-caja);
	width: 100%;
	outline: 0;
	border: 0;
	min-height: 38px;
}

.escaparate__search input:focus {
	background: var(--escap-superficie-fuerte);
}

.escaparate__search input::placeholder {
	font-style: italic;
}

.escaparate__search button {
	background: var(--escap-texto);
	color: var(--escap-fondo);
	padding: 4px 12px;
	border-radius: 0 var(--escap-radio-caja) var(--escap-radio-caja) 0;
	flex-shrink: 0;
	line-height: 28px;
	border: 0;
	min-height: 42px;
	font-size: 18px;
}

.escaparate__search button span {
	display: none;
}

@media screen and (min-width: 768px) {
    .escaparate__search {
        margin-bottom:0;
        
        margin-right:2rem;
    }
}

/* Menú Categorías */

.escaparate__cats{
    margin-bottom:2rem;
    position:relative;
    border-bottom:1px solid var(--escap-borde);
}

.escaparate__cats ul {
    overflow: auto;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    height: 56px;
    display: flex;
    align-items:center;

}
.escaparate__cats ul::-webkit-scrollbar {
  display: none; }

.escaparate__cats li {
    display: inline;
    margin: 12px 0;
    padding:2px;
    text-align: center;
}
.escaparate__cats li a{
    display:block;
    background:var(--escap-superficie-fuerte);
    border-radius:var(--escap-radio-boton);
    padding:0.35rem 1rem;
    text-decoration:none;
    color:var(--escap-texto);
    font-size:0.95rem;
}

.escaparate__cats li a.select{
    background:var(--escap-acento);
    color: var(--escap-acento-texto);
}

.escaparate__cats .arrow {
    display:none;
    border: solid 1px var(--escap-borde);
    padding: 2px 8px;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    height:28px;
    background:var(--escap-fondo);
    color:var(--escap-texto);
    width:28px;
    font-size:14px;
    border-radius:50%;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 1px 4px var(--escap-sombra);
    z-index:1;
}
/* Al principio o al final de la barra la flecha correspondiente desaparece del todo (antes solo opacidad: se podía pulsar).
   !important: khscroll pone visibility en línea cuando hay desbordamiento */
.escaparate__cats .arrow.arrow--oculta{
    visibility:hidden !important;
}

/* Bordes difuminados solo en el lado donde queda contenido: indican que se puede desplazar (también en móvil, sin flechas).
   Es una máscara, no un color: funciona igual en cualquier fondo (web clara u oscura). Clases puestas por escaparate.js */
.escaparate__cats{ --cats-difuminado: 48px; }
.escaparate__cats--despues ul{
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - var(--cats-difuminado)), transparent);
            mask-image:linear-gradient(to right, #000 calc(100% - var(--cats-difuminado)), transparent);
}
.escaparate__cats--antes ul{
    -webkit-mask-image:linear-gradient(to right, transparent, #000 var(--cats-difuminado));
            mask-image:linear-gradient(to right, transparent, #000 var(--cats-difuminado));
}
.escaparate__cats--antes.escaparate__cats--despues ul{
    -webkit-mask-image:linear-gradient(to right, transparent, #000 var(--cats-difuminado), #000 calc(100% - var(--cats-difuminado)), transparent);
            mask-image:linear-gradient(to right, transparent, #000 var(--cats-difuminado), #000 calc(100% - var(--cats-difuminado)), transparent);
}

/* Pantallas táctiles: al soltar, la barra se detiene alineada con una píldora */
@media (pointer: coarse) {
    .escaparate__cats ul{
        scroll-snap-type:x proximity;
        scroll-padding-inline:var(--padding-h, 1rem);
    }
    /* Al centro: no pelea con el centrado de la categoría seleccionada y en los extremos la barra llega al final */
    .escaparate__cats li{
        scroll-snap-align:center;
    }
}
.escaparate__cats .arrow-left{
    left:4px;
}
.escaparate__cats .arrow-right{
    right:4px;
}
@media screen and (max-width: 1024px) {
    .escaparate__cats{
        transform:translateX(calc(var(--padding-h) * -1));
        width:calc(100% + calc(var(--padding-h) * 2));
    }
    .escaparate__cats ul {
        padding:0 var(--padding-h);
    }
}

@media screen and (min-width: 1025px) {
    .escaparate__cats .arrow {
        display:flex;
    }
}

/*
###########
 LISTADO
###########
*/

.escaparate__list-prods{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-column-gap:16px;
    grid-row-gap:20px;
    margin-bottom:2rem;
}

.comp-escaparate .escaparate__list-prods.swiper-wrapper{
    grid-gap:inherit;
    grid-column:inherit;
    padding-bottom:1.5rem;
    margin-bottom:0;
    display:flex;
}
.comp-escaparate .escaparate__list-prods.swiper-wrapper .escaparate__prod-img img{
    min-height:100px;
    object-fit:cover;
}
.comp-escaparate .escaparate__list-prods.swiper-wrapper .escaparate__prod{
    height:auto;
}
@media screen and (max-width: 1023px) {
    .comp-escaparate:has(> .swiper-container){
        width:calc(100% + var(--padding-h));
    }
    /* Solo el carrusel del mosaico (hijo directo): la galería de la ficha también lleva .swiper desde Swiper 11
       y con este padding asomaba la foto siguiente */
    .comp-escaparate > .swiper{
        padding-right:var(--padding-h);
    }
    /* El carrusel se alarga a la derecha para que asome el siguiente producto: los puntos se centran
       respecto a lo visible (si no, quedaban media separación desplazados a la derecha) */
    .comp-escaparate > .swiper > .swiper-pagination{
        margin-left:calc(var(--padding-h) / -2);
    }
}
/* Flechas del carrusel del mosaico (las crea mosaicoES.ascx): círculo como las de la ficha (reswiper.css, que
   aquí no se carga). Aparecen al pasar el ratón o con el foco del teclado dentro del carrusel */
.comp-escaparate > .swiper > .swiper-button-prev,
.comp-escaparate > .swiper > .swiper-button-next{
    width:32px;
    height:32px;
    margin-top:-16px;
    padding:0;
    border:0;
    border-radius:50%;
    background:var(--escap-fondo, #fff);
    color:var(--escap-texto, #333);
    box-shadow:0 0 12px rgba(0,0,0,.4);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transform:scale(0);
    transition:transform 300ms ease, color 200ms ease;
}
.comp-escaparate > .swiper > .swiper-button-prev{ left:4px; }
.comp-escaparate > .swiper > .swiper-button-next{ right:4px; }
.comp-escaparate > .swiper > .swiper-button-prev::after,
.comp-escaparate > .swiper > .swiper-button-next::after{ display:none; }
.comp-escaparate > .swiper > .swiper-button-prev i,
.comp-escaparate > .swiper > .swiper-button-next i{ font-size:1.125rem; line-height:1; }
.comp-escaparate > .swiper:hover > .swiper-button-prev,
.comp-escaparate > .swiper:hover > .swiper-button-next,
.comp-escaparate > .swiper:focus-within > .swiper-button-prev,
.comp-escaparate > .swiper:focus-within > .swiper-button-next{
    transform:scale(1);
}
.comp-escaparate > .swiper > .swiper-button-prev:hover,
.comp-escaparate > .swiper > .swiper-button-next:hover{ color:var(--escap-acento); }
/* Móvil o táctil: sin flechas, se desliza con el dedo */
@media screen and (max-width: 1023px), (hover: none), (pointer: coarse) {
    .comp-escaparate > .swiper > .swiper-button-prev,
    .comp-escaparate > .swiper > .swiper-button-next{ display:none; }
}
@media (prefers-reduced-motion: reduce) {
    .comp-escaparate > .swiper > .swiper-button-prev,
    .comp-escaparate > .swiper > .swiper-button-next{ transition:none; }
}
@media (forced-colors: active) {
    .comp-escaparate > .swiper > .swiper-button-prev,
    .comp-escaparate > .swiper > .swiper-button-next{ border:1px solid ButtonText; }
}

/*
###########
 PRODUCTO
###########
*/

.escaparate__prod{
    font-size:1rem;
    line-height:1.4em;
} 

.escaparate__prod a{
    display:block;
    color:currentColor;
    text-decoration:none;
} 

.escaparate__prod-inner{
    position:relative;
}
.escaparate__prod-img{
    position:relative;
    overflow:hidden;
    border-radius:var(--escap-radio-imagen);
}

.escaparate__prod-img img{
    display:block;
    width:100%;
    /* height:auto + los atributos width/height del img: el hueco se reserva con la proporción real de la foto,
       antes de que cargue y aunque no llegue a cargar (antes la tarjeta se encogía y se descolocaba) */
    height:auto;
    object-fit:cover;
     transform:scale(1);
     transition:transform 300ms ease;
}

.escaparate__prod-img:hover img{
    transform:scale(1.1);
}
/* Sin esto, en la cuadrícula una tarjeta con texto largo o sin foto ensanchaba su columna (columnas desiguales) */
.escaparate__list-prods > .escaparate__prod{
    min-width:0;
}

.escaparate__prod-info{
    padding:var(--padd-inner) 0;
    width:100%;
}
.escaparate__prod-cat{
    margin:0;
}
.escaparate__prod-cat a{
    opacity:0.5;
    width:fit-content;
}
.comp-escaparate--servicios .escaparate__prod-cat{
  display:none;
}

 .escaparate__prod-title{
    font-weight:var(--bold1);
     margin:0 0 0.3em;
     font-size: inherit;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;    
    -webkit-line-clamp: 2;
    word-break: break-word;
} 
.comp-escaparate--servicios .escaparate__prod-title{
	-webkit-line-clamp: 3;
}
.escaparate__prod-desc{
    font-size: 0.95em;
    margin: 0 0 1rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 4;
    word-break: break-word;
    display:none;
}

.escaparate__prod-prize{
    font-weight:var(--bold1);
}
.escaparate__prod-prize #spnDesde{
    font-size:0.85rem;
}
.escaparate__prod-prize #spnMes{
    font-size:0.85rem;
}
.escaparate__prod-prize.cons{
    font-size:0.95em;
}
.escaparate__prod-prize.cons + .escaparate__prod-offer{
    display:none;
}
.escaparate__prod-prize.cons .escaparate__prod-prize-old{
    display:none;
}
.escaparate__prod-prize a{
    display:inline-block;

}
.escaparate__prod-prize-old{
    text-decoration:line-through;
    display:inline-block;
    margin-left:4px;
    font-weight:normal;
    opacity:0.85;
    font-size:0.9em;
    color:var(--escap-texto-suave);
}

.escaparate__prod-prize-old:after{
    content:' €';
}

.escaparate__prod-offer{
    top: -8px;
    transform:translateY(-100%);
    right: 0; 
    position:absolute;
    font-size:1em;
    border-radius: var(--escap-radio-etiqueta) 0 0 var(--escap-radio-etiqueta);
    text-transform:uppercase;
    background:var(--escap-acento);
    color:var(--escap-acento-texto);
    padding:0 0.5em;
    height:28px;
    line-height:28px;
}
.escaparate__prod-offer:after{
    content:'%';
}

.escaparate__prod--destacado .escaparate__prod-img:after {
    top: 4px;
    left: 4px; 
    position:absolute;
    height:28px;
}

/* Estilo 1 */
.comp-escaparate--estilo1 .escaparate__prod{
       font-size:0.9rem;
       --padd-inner: 0.5em;
}

.comp-escaparate--estilo1 .escaparate__prod-info{
    padding:var(--padd-inner) 4px;
}

.comp-escaparate--estilo1 .escaparate__prod-prize{
        color:var(--escap-acento);
        font-size:1.1em;
        white-space:nowrap;
}
.comp-escaparate--estilo1 .escaparate__prod-prize.cons{
        font-size:1em;
}
.comp-escaparate--estilo1 .escaparate__prod-prize{
       padding: 0 4px;
}
.comp-escaparate--estilo1 .escaparate__prod-prize-old{
}
.comp-escaparate--estilo1 .escaparate__prod--destacado .escaparate__prod-img:after {
    content: "\f005";
    font-family:var(--awesome);
    font-weight:900;
    text-shadow:1px 1px 0 var(--escap-fondo);
    font-size:1.5em;
    color:var(--escap-acento);
}

@media screen and (min-width: 601px) {
    .comp-escaparate--estilo1  .escaparate__list-prods {
        grid-template-columns:1fr 1fr;
    }
    .comp-escaparate--estilo1 .escaparate__prod{
           font-size:0.95rem;
           --padd-inner: 0.9em;
    }
    .comp-escaparate--estilo1 .escaparate__prod-inner{
        display:flex;
        justify-content:space-between;
    }

    .comp-escaparate--estilo1 .escaparate__prod-prize{
         padding:var(--padd-inner) 4px var(--padd-inner) var(--padd-inner);
         text-align:right;
    }
    .comp-escaparate--estilo1 .escaparate__prod-title{
         max-width:90%;
    }
}
@media screen and (min-width: 1024px) {
 
    .comp-escaparate--estilo1  .escaparate__list-prods {
        grid-template-columns: 1fr 1fr 1fr;
    }

}

/* Estilo 2 */
.comp-escaparate--estilo2 .escaparate__prod{
       font-size:0.9rem;
       --padd-inner: 0.5em;
}
.comp-escaparate--estilo2 .escaparate__prod-info{
    padding:var(--padd-inner) 4px;
}
@media screen and (min-width: 601px) {
    .comp-escaparate--estilo2  .escaparate__list-prods {
        grid-template-columns:1fr 1fr;
    }
    .comp-escaparate--estilo2 .escaparate__prod{
           font-size:0.95rem;
           --padd-inner: 0.9em;
    }

}
.comp-escaparate--estilo2 .escaparate__prod-prize{
    position:absolute;
    left:4px;
    top:0;
    transform:translateY(-100%);
    background:var(--escap-fondo);
    padding:0 0.25em;
    height:28px;
    line-height:28px;
    border-radius:var(--escap-radio-etiqueta) var(--escap-radio-etiqueta) 0 0;
    font-size:1em;
}
.comp-escaparate--estilo2 .escaparate__prod-prize #spnDesde{
    font-size:11px;
}
.comp-escaparate--estilo2 .escaparate__prod-offer{
    top: 0;
    right: 4px; 
    line-height:28px;
     border-radius:var(--escap-radio-etiqueta) var(--escap-radio-etiqueta) 0 0;

   padding:0 0.25em;
}

.comp-escaparate--estilo2 .escaparate__prod-img{
    position:relative;
    border-radius:var(--escap-radio-caja);
    overflow:hidden;
}

.comp-escaparate--estilo2 .escaparate__prod--destacado .escaparate__prod-img:after {
    content: "Recomendado";
    font-size:0.9em;
    line-height:28px;
    border-radius: var(--escap-radio-etiqueta) 0 0 var(--escap-radio-etiqueta);
    text-transform:uppercase;
    background:var(--escap-acento);
    font-weight:var(--bold1);
    color:var(--escap-acento-texto);
    left:inherit;
    right:0;
    padding:0 0.5em;
}

@media screen and (min-width: 769px) {
    .comp-escaparate--estilo2  .escaparate__list-prods {
        grid-template-columns:1fr 1fr 1fr 1fr;
        grid-gap:12px;
    }
}

/* Estilo 3 */
.comp-escaparate--estilo3  .escaparate__list-prods {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 16px;
}

.comp-escaparate--estilo3 .escaparate__prod{
       font-size:1rem;
       --padd-inner: 1em;
       display:flex;
       flex-direction:column;
       border-radius:var(--escap-radio-caja);
       overflow:hidden;
}
.comp-escaparate--estilo3 .escaparate__prod-img{
    border-radius:0;
}
@media screen and (min-width: 601px) {
    .comp-escaparate--estilo3 .escaparate__prod{
           font-size:1rem;
           --padd-inner: 1em;
    }
    .comp-escaparate--estilo3  .escaparate__list-prods {
        grid-template-columns: 1fr 1fr;
    }

}
@media screen and (min-width: 1024px) {
 
    .comp-escaparate--estilo3  .escaparate__list-prods {
        grid-template-columns: 1fr 1fr 1fr;
    }

}

.comp-escaparate--estilo3 .escaparate__prod-inner{
    background:var(--escap-superficie);
    flex:1;
    display:flex;
    flex-direction:column;
}
.comp-escaparate--estilo3 .escaparate__prod-info{
    padding:var(--padd-inner);
    width:100%;
    flex:1;
}
.comp-escaparate--estilo3 .escaparate__prod-title{
    font-size:min(1.2em, 18px);
}
.comp-escaparate--estilo3 .escaparate__prod-prize{
    padding:0 var(--padd-inner) var(--padd-inner); 
}
.comp-escaparate--estilo3 .escaparate__prod-prize a{
    font-size:20px;
}
.comp-escaparate--estilo3 .escaparate__prod-prize-old{
    font-size:18px;
}
.comp-escaparate--estilo3 .escaparate__prod-prize{
    color:var(--escap-acento);
}

.comp-escaparate--estilo3 .escaparate__prod--destacado .escaparate__prod-img:after {
    content: "Recomendado";
    font-size:0.85em;
    text-transform:uppercase;
    background:var(--escap-fondo);
    border-radius: 0 var(--escap-radio-etiqueta) var(--escap-radio-etiqueta) 0;
    left:0;
    box-shadow:1px 1px 3px rgb(0 0 0 / 20%);
    top:inherit;
    bottom:8px;
    padding:0.25em 0.5em;
    font-weight:var(--bold1);
}

/* Estilo 4 */
.comp-escaparate--estilo4 .escaparate__list-prods {
    grid-gap: 16px;
    grid-template-columns:1fr;
}

.comp-escaparate--estilo4 .escaparate__prod{
       font-size:0.95rem;
       --padd-inner: 0.95em;
}

.comp-escaparate--estilo4 .escaparate__prod-offer{
    transform:translate(0);
    right:var(--padd-inner);
    top:inherit;
    border-radius:0;
    bottom:var(--padd-inner);
    border-radius:var(--escap-radio-etiqueta);
}

@media screen and (min-width: 601px) {
    .comp-escaparate--estilo4 .escaparate__prod{
           font-size:1rem;
           --padd-inner: 1em;
    }
    .comp-escaparate--estilo4  .escaparate__list-prods {
        grid-template-columns: 1fr 1fr;
    }

}
@media screen and (min-width: 1024px) {
 
    .comp-escaparate--estilo4  .escaparate__list-prods {
        grid-template-columns: 1fr 1fr 1fr;
    }

}

.comp-escaparate--estilo4 .escaparate__prod{
    position:relative;
    color:#fff;
}
/* Título en una línea con "…". Sin padding ni borde: line-clamp recorta en el borde del padding y la segunda
   línea asomaba por encima del separador. El separador pasa a ser el borde superior del precio */
.comp-escaparate--estilo4 .escaparate__prod-title {
    -webkit-line-clamp: 1;
    line-clamp: 1;
    margin:0;
    font-size:1rem;
}
.comp-escaparate--estilo4 .escaparate__prod-cat {
    display:none;
}

.comp-escaparate--estilo4 .escaparate__prod-inner{
    position:absolute;
    bottom:0;
    left:0;
    pointer-events:none;
    width:100%;
    padding:var(--padd-inner);
    padding-top:calc(var(--padd-inner) * 4);
    background: linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.8) 75%);
    border-radius:0 0 var(--escap-radio-imagen) var(--escap-radio-imagen);
}
.comp-escaparate--estilo4  .escaparate__prod-info{
    padding:0;
}
.comp-escaparate--estilo4  .escaparate__prod-prize{
    margin: 0.5em 0 0;
    padding-top:0.5em;
    padding-right:64px;
    border-top:1px solid rgba(255,255,255,0.25);
}
.comp-escaparate--estilo4  .escaparate__prod-prize:not(.cons){
    font-size:1.25em;
}
.comp-escaparate--estilo4  .escaparate__prod-prize-old{
    color:#fff;
    opacity:0.8;
}
/* Precio de la ficha: etiqueta "OFERTA -14 %" arriba; debajo el precio grande en oscuro y, a su derecha,
   el anterior tachado, centrado en vertical respecto a él. El HTML va en el mismo orden (oferta, precio, anterior) */
.escaparate__ficha-prizes{
    grid-area:prizes;
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-areas:"oferta oferta" "precio old";
    /* La fila "prizes" de la ficha es 1fr y estira este bloque: sin align-content:start ese alto
       sobrante se repartía entre las dos filas y separaba la etiqueta del precio */
    align-content:start;
    align-items:baseline;
    column-gap:0.75rem;
    margin-top:0.5rem;
    /* Un poco menor que el título (h1): se lee primero qué producto es y después cuánto cuesta.
       Antes 2.75rem / 3.25rem: en móvil el precio casi doblaba al título */
    font-size:2rem;
}
@media screen and (min-width: 1024px) {
    .escaparate__ficha-prizes{ font-size:2.25rem; }
}

.comp-escaparate--estilo4  .escaparate__prod-cat a{
    color:#fff;
    font-size:0.95em;
    opacity:0.8;
}
.comp-escaparate--estilo4 .escaparate__prod--destacado .escaparate__prod-img:after {
    content: "\f559";
    font-family:var(--awesome);
    font-weight:900;
    width:32px;
    height:38px;
    display:flex;
    top:0;
    left:12px;
    align-items:center;
    justify-content:center;
    background:var(--escap-acento);
    font-size:1.6em;
    color:var(--escap-acento-texto);
}
/* Estilo Servicios */
.comp-escaparate--servicios  .escaparate__list-prods {
    grid-template-columns: 1fr;
    grid-gap:0.75rem;
}
.comp-escaparate--servicios .escaparate__prod{
    font-size:0.9rem;
    --padd-inner: 0.5em;
    display:grid;
    grid-template-columns:0.75fr 1fr;
    gap:0.5rem;
    position:relative;
    place-items:center start;
    background:var(--escap-superficie);
    border-radius:var(--escap-radio-imagen);
    text-align:left;
}
.comp-escaparate--servicios .escaparate__prod--destacado{
    background-color: var(--escap-acento);
    background-image: linear-gradient(color-mix(in srgb, var(--escap-fondo) 90%, transparent), color-mix(in srgb, var(--escap-fondo) 90%, transparent));
}
.comp-escaparate--servicios .escaparate__prod-img{
    border-top-right-radius:0;
    border-bottom-right-radius:0;
}
.comp-escaparate--servicios .escaparate__prod-info{
    padding:0 0 0.3em;
}
.comp-escaparate--servicios .escaparate__prod-prize{
    color:var(--escap-acento);
}
.comp-escaparate--servicios .escaparate__prod-offer{
    top:8px;
    right:inherit;
    left:0;
    transform:translate(0);
    border-radius: 0 var(--escap-radio-etiqueta) var(--escap-radio-etiqueta) 0;
    height: 24px;
    line-height: 24px;
    font-size:0.95em;
}
.comp-escaparate--servicios .escaparate__prod-inner{
    position:static;
    padding:var(--padd-inner) var(--padd-inner) var(--padd-inner) 0;
}
@media screen and (min-width: 601px) {
    .comp-escaparate--servicios  .escaparate__list-prods {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (min-width: 1024px) {  
    .comp-escaparate--servicios  .escaparate__list-prods {
        grid-template-columns: 1fr 1fr 1fr;
    }

}
@media screen and (min-width: 1200px) {
    .comp-escaparate--servicios .escaparate__prod{
        font-size:1rem;
        --padd-inner: 0.75em;
    }  
}
/*
###########
 FICHA
###########
*/
.escaparate__ficha-head{

    margin-bottom:1.5rem;
}
.escaparate__ficha-gallery{
    margin-bottom:1rem;
    grid-area: gallery;
    border-radius:var(--escap-radio-imagen);
    overflow:hidden;
    width:100%;
    background:var(--escap-superficie);
}
.escaparate__ficha-title{
    grid-area: title;
}

@media screen and (min-width: 1024px) {
    .ficha .producto article > div:first-child{
        display:grid;
        grid-column-gap:1.5rem;
        grid-template-rows: min-content min-content min-content 1fr min-content auto auto;
        grid-template-columns:repeat(5, 1fr);
        grid-template-areas: "gallery gallery gallery date date"
                              "gallery gallery gallery title title"
                              "gallery gallery gallery category category"
                              "gallery gallery gallery prizes prizes"
                              "gallery gallery gallery contact contact"
                              "description description description description description"
                              "video video video video video"
                              "form form form form form";
    }
    .ficha:not(:has(#fgal)) .producto article > div:first-child{
     grid-template-columns:1fr;
        grid-template-areas: "date"
                              "title"
                              "category"
                              "prizes"
                              "contact"
                              "description"
                              "video"
                              "form";
    }

.escaparate__ficha-gallery{
        margin:0;
        /* Cuando la columna derecha (título largo, precio, botones) es más alta que la foto, la galería no se estira
           con la fila: si no, quedaba una franja vacía debajo de la foto (se notaba hacia 1024 px) */
        align-self:start;
    }
    
    .ficha .sticky{
        display:contents;
    }
     
}
@media screen and (max-width: 1023px) {
    .ficha .sticky{
        display:contents;
    }
    .escaparate__ficha-prizes{
        width:fit-content;
    }
    .producto article > div:first-child{
        display:grid;
        grid-template-columns:1fr;
        /* Mismo orden que el HTML: el título primero (qué producto es), el precio seguido de los botones de contacto,
           y el orden visual coincide con el del tabulador y el del lector de pantalla (WCAG 2.4.3 y 1.3.2).
           El formulario no va aquí: está fuera de este div */
        grid-template-areas: "title"
                             "gallery"
                             "category"
                             "date"
                             "prizes"
                             "contact"
                             "description"
                             "video";
    }

}

.escaparate__ficha-gallery .swiper-container:first-child{
    box-shadow:0px 1px 8px var(--escap-sombra);
}

/* Fondo desenfocado para fotos que no son 4/3: la foto se ve entera (object-fit: contain) y las bandas
   se rellenan con la misma foto ampliada y desenfocada. La URL la pone escaparate_ficha.js en --fondo-foto
   con img.currentSrc (la imagen ya descargada): no hay segunda descarga. Sin JS, o mientras carga, queda el gris */
.escaparate__ficha-gallery .swiper-container:first-child .swiper-slide{
    position:relative;
    overflow:hidden;
    background:var(--escap-superficie);
}
.escaparate__ficha-gallery .swiper-container:first-child .swiper-slide::before{
    content:'';
    position:absolute;
    inset:-24px;
    background:var(--fondo-foto, none) center / cover no-repeat;
    filter:blur(24px) saturate(1.2) brightness(1.05);
    opacity:.6;
    pointer-events:none;
}

/* Ficha en móvil o pantallas táctiles: sin flechas; se cambia de foto deslizando o con los puntos de la paginación */
@media screen and (max-width: 1023px), (hover: none), (pointer: coarse) {
    /* .swiper-container en medio: reswiper.css se carga después con la misma especificidad y ganaba */
    .escaparate__ficha-gallery .swiper-container .swiper-button-next,
    .escaparate__ficha-gallery .swiper-container .swiper-button-prev{
        display:none;
    }
}
.escaparate__ficha-gallery .swiper-zoom-container{
    position:relative;
    z-index:1;
    cursor:zoom-in;
}

 .escaparate__ficha-gallery .swiper-slide img{
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;
}
/* Móvil: galería cuadrada (1/1), aprovecha mejor el ancho de la pantalla y deja ver más alto en fotos verticales.
   La foto sigue entera (object-fit: contain) y las bandas las cubre el fondo desenfocado */
@media screen and (max-width: 600px) {
    .ficha .escaparate__ficha-gallery .swiper-zoom-container,
    .ficha .escaparate__ficha-gallery .swiper-slide img{
        aspect-ratio: 1 / 1;
    }
}

@supports not (aspect-ratio: 4 / 3) {
    .escaparate__ficha-gallery .swiper-slide .swiper-zoom-container{
        padding-bottom:75%;
    }
    .escaparate__ficha-gallery .swiper-slide .swiper-zoom-container img{
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
    }
    @media screen and (max-width: 600px) {
        .ficha .escaparate__ficha-gallery .swiper-slide .swiper-zoom-container{
            padding-bottom:100%;
        }
    }
}

.escaparate__fprod-info{
    grid-area: info;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.escaparate__ficha-contact{
    margin: 1rem 0 0;
    padding:  1rem 0 0;
    border-top: 1px solid var(--escap-borde);
          text-align:center;
}
.ficha:not(:has(#fgal)) .escaparate__ficha-contact{
    max-width:460px;
}
.escaparate__ficha-title{
    margin:0 0 1rem;
    padding:0 0 0.5rem;
    border-bottom:1px solid var(--escap-borde);
    align-self: start;
}

.ficha:not(:has(#fgal)) .escaparate__ficha-title{
    max-width:460px;
}
.escaparate__ficha-date{
    font-style: italic;
    grid-area:date;
    opacity:0.8;
    margin:0 0 0.5rem 0;
    font-size:0.85rem;
}

.escaparate__ficha-cat{
    margin:0 0 0.5rem;
    grid-area: category;
    align-self: start
}

.escaparate__ficha-cat a{
    margin:1rem 0;
    color:var(--escap-texto-suave);
}

.escaparate__ficha-txt{
    margin:0 0 0.8rem;
}

.escaparate__ficha-contact{
    grid-area:contact;
}

.escaparate__ficha-buttons{
    list-style:none;
}
.escaparate__ficha-buttons li{
    border-radius:var(--escap-radio-boton);
    text-align:center;
    font-size:1.15rem;
    text-transform:uppercase;
    overflow:hidden;
    
}

.escaparate__ficha-buttons li > a{
    display:block;
    padding:0.5rem 1rem;  
    text-decoration:none;
    cursor:pointer;
      
}
.escaparate__ficha-buttons li.mail {
    padding:0.5rem 1rem;  
    cursor:pointer;
}

@media screen and (min-width: 1024px) {
    .escaparate__ficha-contact{
      text-align:left;
    }
}
.escaparate__ficha-buttons li{
     max-width:480px;
     margin-left:auto;
     margin-right:auto;
}

@media screen and (min-width: 1023px) {

   .escaparate__ficha-buttons li{
        max-width:100%;
    }
}
.escaparate__ficha-buttons li:not(:first-child){
    margin-top:0.25rem;
}

.escaparate__ficha-buttons .phone a{
    background:var(--escap-acento);
    color:var(--escap-acento-texto);
}
.escaparate__ficha-buttons .phone a:before{
    font-family: var(--awesome);
    content:'\f095';
    font-weight:900;
    margin-right: 0.5rem;
}

.escaparate__ficha-buttons .whatsapp a {
    background: #25D366;
    color: #FFF;
}

.escaparate__ficha-buttons .whatsapp a:before {
    font-family: "Font Awesome 7 Brands", "Font Awesome 6 Brands";
    content: '\f232';
    margin-right: 0.35rem;
}

.escaparate__ficha-buttons .mail {
    background:var(--secondary);
    color:var(--secondary-invert);

}

.escaparate__ficha-buttons .mail:before{
    font-family: var(--awesome);
    content:'\f0e0';
    font-weight:600;
    margin-right: 0.5rem;
}

.escaparate__ficha-buttons .phone a{
    font-size:1.25rem;
}

@media screen and (max-width: 1023px) {

@keyframes fadeInStatic {
        from { opacity: 0; }
        to { opacity: 1; }
    }

}

@keyframes slideIn {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes slideOut {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(100%); opacity: 0; }
}

.escaparate__ficha-precio{
     grid-area:precio;
     font-weight:var(--bold1);
     line-height:1;
     white-space:nowrap;
     letter-spacing:-0.02em;
     font-variant-numeric:tabular-nums;
}
/* Precio en oscuro; "Consultar precio" sigue con el color principal porque se puede pulsar */
.ficha .escaparate__ficha-precio{
    color:var(--escap-texto);
}
.ficha .escaparate__ficha-precio.cons{
    color:var(--escap-acento);
}
.escaparate__ficha-precio #spnMes{
    font-size:0.4em;
    text-transform:initial;
    line-height:100%;
}
.escaparate__ficha-desde{
    display:none;
}
.escaparate__ficha-desde{
    font-size:0.9rem;
    line-height:100%;
    display:block;
    color: var(--escap-texto);
}
.escaparate__ficha-precio.cons .escaparate__ficha-desde,
.escaparate__ficha-precio.cons #spnMes{
    display:none;
}
.escaparate__ficha-precio.cons{
    font-size:1.5rem;
    text-transform:initial;
    cursor:pointer;
}
/* Con "Consultar precio" no tienen sentido ni el precio anterior ni la oferta (la oferta va antes en el HTML: :has) */
.escaparate__ficha-precio.cons ~ .escaparate__ficha-precio-old,
.escaparate__ficha-prizes:has(.cons) .escaparate__ficha-offer{
    display:none;
}

/* Precio anterior: a la derecha del precio, gris con contraste suficiente (#4b5563, 7,5:1) y tachado visible */
.escaparate__ficha-precio-old{
    grid-area:old;
    /* Centrado en vertical respecto al precio actual (el resto del bloque se alinea por la base) */
    align-self:center;
    line-height:1;
    /* Mitad del precio, pero nunca por debajo de 0.9rem (con el precio de móvil se quedaba en 12 px) */
    font-size:max(0.55em, 0.9rem);
    font-weight:600;
    color:var(--escap-texto-suave);
    white-space:nowrap;
}
/* Tachado en diagonal con el color principal (el de la etiqueta de oferta), algo más ancho que el texto.
   El <s> se mantiene por semántica; la línea la dibuja ::after */
.escaparate__ficha-precio-old s{
    position:relative;
    display:inline-block;
    text-decoration:none;
}
.escaparate__ficha-precio-old s::after{
    content:'';
    position:absolute;
    left:-0.12em;
    right:-0.12em;
    top:50%;
    height:2px;
    margin-top:-1px;
    background:var(--escap-acento);
    border-radius:2px;
    transform:rotate(-12deg);
    pointer-events:none;
}
/* Modo de alto contraste: los fondos de CSS desaparecen, se vuelve al tachado del sistema */
@media (forced-colors: active) {
    .escaparate__ficha-precio-old s{ text-decoration:line-through; }
    .escaparate__ficha-precio-old s::after{ display:none; }
}

/* Etiqueta "OFERTA -14 %" encima del precio, con el color principal (antes gris #666) */
.escaparate__ficha-offer{
    grid-area:oferta;
    justify-self:start;
    display:inline-flex;
    align-items:center;
    gap:0.5em;
    margin-bottom:0.35rem;
    padding:0.45em 0.8em;
    background:var(--escap-acento);
    color:var(--escap-acento-texto);
    border-radius:var(--escap-radio-caja);
    font-size:0.9rem;
    font-weight:var(--bold1);
    line-height:1;
    letter-spacing:0.06em;
    text-transform:uppercase;
    white-space:nowrap;
}

.escaparate__ficha-desc{
    grid-area:description;
    padding:20px;
    background:var(--escap-superficie);
    margin-top:1.5rem;
    border-radius:var(--escap-radio-caja);
}

.escaparate__ficha-desc ol:not(:last-child),
.escaparate__ficha-desc ul:not(:last-child) {
	margin: 0 0 1.25rem;
}
.escaparate__ficha-desc ol,
.escaparate__ficha-desc ul {
	padding-left: 1.25rem;
}
.escaparate__ficha-desc li:not(:last-child),
.escaparate__ficha-desc li:not(:last-child){
    margin-bottom:0.5rem;
}

.escaparate__ficha-desc #spnProductoDescrip h2{
    font-size: 22px;
    font-weight:var(--bold1);
    line-height: 1.25em;
    margin: 0 0 0.5em;
}

.escaparate__ficha-desc iframe {
    display: block;
    border: 0;
    border-radius: var(--escap-radio-caja);
    max-width: 100%
}

.escaparate__ficha-desc iframe[src*="youtube"],.escaparate__ficha-desc iframe[src*="vimeo"] {
    width: 100%;
    max-width:800px;
}

.escaparate__ficha-desc iframe[src*="ivoox"] {
    min-height: 190px
}

/* Vídeos metidos desde el editor en la descripción: 16:9, la proporción de YouTube y Vimeo (antes 4:3, con franjas) */
@supports (aspect-ratio: 16 / 9) {
    .escaparate__ficha-desc iframe[src*="youtube"],.escaparate__ficha-desc iframe[src*="vimeo"] {
       aspect-ratio: 16 / 9;
        height:auto;
    }
}

.escaparate__ficha-desc .imagen{
    max-width:800px;
    display:block;
}
.escaparate__ficha-desc img {
    display: block;
    width:100%;
    border-radius:var(--escap-radio-imagen);
}
.escaparate__ficha-desc blockquote:not(:last-child) {
    margin: 0 0 1.25rem
}

.escaparate__ficha-desc blockquote p {
    border-left: 4px solid var(--escap-acento);
    background: var(--escap-acento);
    background-image: linear-gradient(color-mix(in srgb, var(--escap-fondo) 85%, transparent), color-mix(in srgb, var(--escap-fondo) 85%, transparent));
    padding: 1rem;
    font-size: 20px;
    line-height: 1.25em;
    opacity: .8;
    font-style: italic
}
.escaparate__ficha-desc table {
	display: block;
	border: 0;
	background:var(--escap-fondo);
	min-width: auto;
	width: fit-content !important;
	color: var(--escap-texto);
	overflow: auto;
}
.escaparate__ficha-desc table:not(:last-child){
    margin-bottom:1.125rem;
}
@media screen and (max-width: 600px) {
      .escaparate__ficha-desc table {
        display: block;
        max-width: 300px;
        border-collapse: collapse;
    } 
    .escaparate__ficha-desc table tbody {
            display: block;
            width: 100%;
            overflow-x: auto;
            white-space: nowrap;
            -webkit-overflow-scrolling: touch;
        }
}
.escaparate__ficha-desc table tr {
	border-bottom: 1px solid var(--escap-borde);
}

.escaparate__ficha-desc table td {
	border: 0;
	padding: 12px;
	vertical-align: top;
	width: inherit!important;
}

.escaparate__ficha-video{
    grid-area:video;
    margin-top:1.5rem;
}
.escaparate__ficha-video:not(:last-child){
    margin-bottom:1.5rem;
}
/* Vídeo de YouTube: 16:9, la proporción del reproductor (con 4:3 salían franjas negras arriba y abajo).
   Hasta que se pulsa, escaparate_ficha.js pone una fachada (miniatura + botón): no se descarga nada de YouTube
   ni se ponen sus cookies hasta que el usuario lo pide. Al pulsar, el botón se cambia por el iframe */
.escaparate__ficha-video iframe,
.escaparate__video-play{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio: 16 / 9;
    border:0;
    border-radius:var(--escap-radio-caja);
}
/* Shorts: vertical (9:16) y estrecho, si no ocuparía varias pantallas de alto */
.escaparate__ficha-video--vertical iframe,
.escaparate__ficha-video--vertical .escaparate__video-play{
    aspect-ratio: 9 / 16;
    max-width:min(100%, 360px);
}

.escaparate__video-play{
    position:relative;
    padding:0;
    overflow:hidden;
    background:#000;
    cursor:pointer;
}
/* La miniatura de YouTube (hqdefault) es 4:3 con franjas negras: cover las recorta */
.escaparate__video-play img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}
/* Botón de reproducir dibujado con CSS: círculo oscuro con triángulo blanco; con hover o foco toma el color de acento */
.escaparate__video-play-ico{
    position:absolute;
    left:50%;
    top:50%;
    width:68px;
    height:68px;
    margin:-34px 0 0 -34px;
    border-radius:50%;
    background:rgba(0, 0, 0, 0.7);
    transition:background-color 200ms ease, transform 200ms ease;
}
.escaparate__video-play-ico::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    margin:-12px 0 0 -7px;
    border-style:solid;
    border-width:12px 0 12px 21px;
    border-color:transparent transparent transparent #fff;
}
.escaparate__video-play:hover .escaparate__video-play-ico,
.escaparate__video-play:focus-visible .escaparate__video-play-ico{
    background:var(--escap-acento);
    transform:scale(1.08);
}
@media (prefers-reduced-motion: reduce) {
    .escaparate__video-play-ico{ transition:none; }
    .escaparate__video-play:hover .escaparate__video-play-ico,
    .escaparate__video-play:focus-visible .escaparate__video-play-ico{ transform:none; }
}
@media (forced-colors: active) {
    .escaparate__video-play-ico{ background:Canvas; border:2px solid CanvasText; }
    .escaparate__video-play-ico::after{ border-left-color:CanvasText; }
}

@supports not (aspect-ratio: 16 / 9) {
    .escaparate__ficha-video > div{
        padding-bottom: 56.25%;
        position:relative;
    }
    .escaparate__ficha-video--vertical > div{
        padding-bottom: 177.78%;
    }
    .escaparate__ficha-video iframe,
    .escaparate__video-play{
        position:absolute;
        left:0;
        top:0;
        height:100%;
    }
}

.escaparate__ficha-desc .mce-toc {
    margin: 0 0 24px;
    background:var(--escap-fondo);
    border-radius: var(--escap-radio-caja);
    padding: 1rem
}

.escaparate__ficha-desc .mce-toc ul {
    padding: 0 0 0 1.25rem;
}

.escaparate__ficha-desc .mce-toc ul li {
    
}

.escaparate__ficha-desc .mce-toc ul li a {
    text-decoration: none
}

.escaparate__ficha-desc .mce-toc ul li a:hover {
    text-decoration: underline
}

/*
###########
 DESCARGA
###########
*/

/* Archivos adjuntos: lista en cuadrícula; cada fila es un único enlace con icono por tipo, nombre,
   extensión y la acción "Descargar". Toda la fila es clicable (área grande, también en móvil) */
.escaparate__download{
    margin-top:1.5rem;
}
.escaparate__download-title{
    font-size:1.25rem;
    font-weight:var(--bold1);
    color:var(--escap-texto);
    margin:0 0 0.35em;
}
/* Con .escaparate__ficha-desc delante para ganar a las reglas de las listas de la descripción (sangría y márgenes) */
.escaparate__ficha-desc .escaparate__download-list,
.escaparate__download-list{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:0.6rem;
    grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
.escaparate__ficha-desc .escaparate__download-list li{
    margin:0;
}
.escaparate__download-item{
    display:flex;
    align-items:center;
    gap:0.75rem;
    min-height:64px;
    padding:0.65rem 0.85rem;
    background:var(--escap-fondo);
    border:1px solid var(--escap-borde);
    border-radius:var(--escap-radio-caja);
    color:var(--escap-texto);
    text-decoration:none;
    transition:border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.escaparate__download-item:hover{
    border-color:var(--escap-acento);
    box-shadow:0 4px 14px var(--escap-sombra);
    transform:translateY(-1px);
}
.escaparate__download-ico{
    flex-shrink:0;
    display:grid;
    place-content:center;
    width:42px;
    height:42px;
    border-radius:var(--escap-radio-caja);
    background:var(--escap-superficie);
    color:var(--escap-texto-suave);
    font-size:1.25rem;
}
/* Color del icono según el tipo de archivo */
.escaparate__download-ico--pdf{ background:#fee2e2; color:#b91c1c; }
.escaparate__download-ico--img{ background:#dbeafe; color:#1d4ed8; }
.escaparate__download-ico--doc{ background:#e0e7ff; color:#3730a3; }
.escaparate__download-ico--cal{ background:#dcfce7; color:#15803d; }
.escaparate__download-ico--vid,
.escaparate__download-ico--aud{ background:#f3e8ff; color:#7e22ce; }
.escaparate__download-ico--zip{ background:#fef3c7; color:#b45309; }
.escaparate__download-info{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:0.15rem;
}
.escaparate__download-name{
    font-weight:600;
    font-size:0.95rem;
    line-height:1.3;
    overflow:hidden;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    word-break:break-word;
}
.escaparate__download-ext{
    font-size:0.75rem;
    letter-spacing:0.04em;
    color:var(--escap-texto-suave);
}
.escaparate__download-action{
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    gap:0.4rem;
    color:var(--escap-acento);
    font-weight:var(--bold1);
    font-size:0.85rem;
}
/* Solo el icono de descarga; el texto "Descargar" queda para lectores de pantalla (nombre accesible del enlace) */
.escaparate__download-action-txt{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.escaparate__download-action{
    width:36px;
    height:36px;
    justify-content:center;
    border-radius:50%;
    background:var(--escap-superficie);
    font-size:1rem;
    transition:background 150ms ease, color 150ms ease;
}
.escaparate__download-item:hover .escaparate__download-action{
    background:var(--escap-acento);
    color:var(--escap-acento-texto);
}
.escaparate__download input{
    padding: 0.6rem 1rem;
    display: inline-block;
    height: 40px;
    border-radius: var(--escap-radio-caja);
    max-width: 160px;
}
.escaparate__download-pass{
    display:none;
}
.escaparate__download-pass #spnContrasena{
    display:none;
}
.escaparate__download-error{
    color:red;
     font-size:1rem;
     line-height:var(--line-height);
     margin-top:0.5rem;
     display:block
}

/*
###########
 FORMULARIO
###########
*/
.escaparate__form{border-top:1px solid var(--escap-borde);padding:2rem 0 0;margin:2rem 0 0;  text-align:center; grid-area:form; display:none;
}
.escaparate__form p { margin-bottom: 20px; }
.escaparate__form p a{ text-decoration: none; color: inherit; }
.escaparate__form p #lnkWhatsContacto{ text-decoration: underline; color: var(--escap-acento); }
/* Formulario de consulta: misma maquetación que el formulario de contacto de las webs (formularioMail.css,
   variante form--double). Copiado aquí y limitado a .escaparate__form para no depender de los archivos de la web */
.escaparate__form .form { margin-top: 1rem; text-align: left; }
.escaparate__form .field { position: relative; width: 100%; border-radius: var(--escap-radio-caja); }
.escaparate__form .field:not(:last-child), .escaparate__form .form__info-datos { margin: 0 0 0.8rem; }
.escaparate__form .field__input, .escaparate__form .field__textarea { display: block; border: 1px solid var(--escap-borde); border-radius: var(--escap-radio-caja); height: 48px; line-height: 48px; font-weight: inherit; padding: 0.6rem; width: 100%; position: relative; font-size: 1rem; outline: none; z-index: 1; background: var(--escap-fondo); color: var(--escap-texto); }
.escaparate__form .field__input:focus, .escaparate__form .field__textarea:focus { outline: 0; border-color: var(--escap-foco); box-shadow: 0 0 0 2px var(--escap-foco); }
.escaparate__form .field__textarea { height: auto; flex: 1; resize: vertical; min-height: 90px; line-height: 1.4em; }
/* Etiquetas ocultas a la vista pero no a lectores de pantalla (con display:none no siempre se anuncian) */
.escaparate__form .field__placeholder { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.escaparate__form .field__input::placeholder, .escaparate__form .field__textarea::placeholder { color: var(--escap-texto-suave); font-size: 15px; }
@media screen and (min-width: 769px) {
    .escaparate__form .form--double .form__info { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1rem; }
    .escaparate__form .form--double .form__info-datos { display: flex; flex-direction: column; }
    .escaparate__form .form--double .form__info-datos .field { flex: 1; display: flex; flex-direction: column; }
    .escaparate__form .form--double .form__info-datos .field textarea { flex: 1; }
    .escaparate__form .field__textarea { min-height: 120px; }
}
.escaparate__form .pLegal { font-size: 11px; line-height: 1.4em; text-align: center; padding: 0 0.5rem; opacity: 0.6; }
.escaparate__form .pLegal a { text-decoration: underline; }
.escaparate__form .font--center { text-align: center; }
.escaparate__form .button-send { -webkit-appearance: none; background: var(--escap-acento); font-weight: var(--bold1); color: var(--escap-acento-texto); border: 0; font-size: 1.2rem; min-height: 44px; display: inline-block; text-align: center; padding: 0.5rem 1rem; border-radius: var(--escap-radio-boton); min-width: 220px; cursor: pointer; transition: background-color 200ms ease, box-shadow 200ms ease, transform 100ms ease; }
/* Hover: el color de acento se oscurece y aparece una sombra. Antes el botón se ensanchaba (movía lo de alrededor y el
   propio objetivo del clic). color-mix parte de la variable, así que funciona con cualquier acento y en web oscura */
.escaparate__form .button-send:hover:not(:disabled) { background: color-mix(in srgb, var(--escap-acento) 85%, #000); box-shadow: 0 4px 12px var(--escap-sombra); }
.escaparate__form .button-send:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 4px var(--escap-sombra); }
@media (prefers-reduced-motion: reduce) { .escaparate__form .button-send { transition: none; } .escaparate__form .button-send:active:not(:disabled) { transform: none; } }
.escaparate__form .button-send:disabled { opacity: 0.7; cursor: wait; }
.escaparate__form .txtred { color: var(--escap-error); }
.escaparate__form .txtgreen { color: var(--escap-exito); }
.escaparate__form .envio_error, .escaparate__form .envio_correcto { border: 1px solid; padding: 12px; margin-top: 1rem; border-radius: var(--escap-radio-caja); text-align: center; font-weight: var(--bold1); background: var(--escap-fondo); }
.escaparate__form .envio_correcto i { margin-right: 4px; }
.escaparate__form .envio_error p, .escaparate__form .envio_correcto p { margin: 0; }
.escaparate__form > .termcond{ width: 100%; margin: 0 auto; float: none !important; clear: both; text-align: center;}
.escaparate__form .control{ display: inline-block; height: 20px; position: relative; width: 20px; }
.escaparate__form .checkbtn{ padding: 0; }
.escaparate__form > .pLegal { font-size: 11px; line-height: 140%; margin-top: 0; width: 100%; opacity: .7; }
.escaparate__form > .pLegal a { text-decoration: underline; }

/* CKECKS*/
.checkbtn {position: relative; display: inline-block; margin-bottom: 10px; padding-left: 25px; line-height: 130%; overflow: hidden; }
.checkbtn input { position: absolute; z-index: -1; opacity: 0; }
.checkbtn .control__indicator{ position: absolute; top: 5px; left: 0; width: 20px; height: 20px; background: var(--escap-fondo); border: 2px solid var(--escap-borde); border-radius: var(--escap-radio-etiqueta); text-align: center; line-height: 16px; cursor: pointer; }
.checkbtn .control__indicator:after {content: ''; position: absolute; display: none; }
.checkbtn input:checked ~ .control__indicator:after { display: block; }
.checkbtn .control--checkbox .control__indicator:after { content: "\f00c";font-family: var(--awesome); font-weight:900;display:none; width: 100%; text-align: center; font-size: 16px;}
.checkbtn .control--checkbox input:disabled ~ .control__indicator:after { border-color: var(--escap-texto-suave);}
.radiobtn input[type="radio"]{ opacity: 0; position: absolute; z-index: -1; }
.radiobtn label:before{ content: ""; display: inline-block; height: 16px; width: 16px; background: var(--escap-fondo); border: 2px solid var(--escap-borde); border-radius: 100%; text-align: center; line-height: 16px; margin-right: 5px; vertical-align: middle; cursor: pointer; }
.radiobtn input[type="radio"]:checked ~ label:before { background: radial-gradient(ellipse at center, var(--escap-texto-suave) 0%, var(--escap-texto-suave) 40%, var(--escap-fondo) 50%, var(--escap-fondo) 100%); }

/*
###########
 FOOTER
###########
*/
.escaparate__footer{border-top:1px solid var(--escap-borde);padding:2rem 0 0; margin:2rem 0 0;}
.escaparate__button-return{display: inline-block; border-radius: var(--escap-radio-boton); text-decoration: none; padding: 0.8rem 1.6rem;line-height:100%; background:var(--escap-superficie-fuerte);color:var(--escap-texto);}
.escaparate__button-return i{margin-right:0.5rem;}

/*
###########
 PAGINACIÓN
###########
*/
#paginacion { border-top:1px solid var(--escap-borde);padding-top:1rem;}
#paginacion > ul { text-align: center; }
#paginacion > ul > li{ display: inline-block; border-radius:var(--escap-radio-etiqueta); overflow:hidden; margin: 1px 2px; background:var(--escap-superficie-fuerte);}
#paginacion > ul > li a{text-decoration: none; display: block; padding: 4px 12px; color:var(--escap-texto); font-size:16px;}
#paginacion > ul > li:first-child > a, #paginacion > ul > li:last-child a { padding: 4px 24px; }
#paginacion > ul > li a.select{font-weight: var(--bold1); background:var(--escap-borde);}
#paginacion ul li a.des { display:none;  }

@media screen and (min-width: 601px) {
    #dvPaginacion ul li:not(:last-child):not(:first-child){ display: inline-block;}
   #dvPaginacion ul li a{line-height: 30px;font-size:18px;}
}

/*
###########
 ERROR 404
###########
*/
.dvError404{  }
.dvError404 .btn404 a { display: inline-block; margin-right: 10px; padding: 8px 16px; border-radius: var(--escap-radio-boton); text-decoration: none; margin: 0 10px 10px 0;background:var(--escap-superficie-fuerte); color:var(--escap-texto);}
.dvError404 p{ margin: 0 0 20px; }

/*
###########
SIN PRODS
###########
*/
.noprod{ background:var(--escap-superficie); color:var(--escap-texto); padding:20px;}

/*
###########
ACCESIBILIDAD
###########
*/
/* Texto solo para lectores de pantalla */
.comp-escaparate .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Iconos Font Awesome aunque la web no cargue ese peso. Cada peso (solid.min.css, light.min.css, thin.min.css...)
   trae su @font-face y también la regla de su clase: sin solid.min.css, .fa-solid se quedaba con la fuente del
   texto y salía un cuadrado o nada. Aquí se declara la familia y el peso de cada clase; si ese peso no está cargado,
   el navegador usa el más cercano que sí lo esté (para Solid: Regular, Light o Thin). font-synthesis:none evita
   que engorde a la fuerza un Light para imitar el Solid */
.comp-escaparate .fa-solid, .comp-escaparate .fas,
.comp-escaparate .fa-regular, .comp-escaparate .far,
.comp-escaparate .fa-light, .comp-escaparate .fal,
.comp-escaparate .fa-thin, .comp-escaparate .fat{
    font-family:var(--awesome);
    font-synthesis:none;
}
.comp-escaparate .fa-solid, .comp-escaparate .fas{ font-weight:900; }
.comp-escaparate .fa-regular, .comp-escaparate .far{ font-weight:400; }
.comp-escaparate .fa-light, .comp-escaparate .fal{ font-weight:300; }
.comp-escaparate .fa-thin, .comp-escaparate .fat{ font-weight:100; }

/* Foco visible al navegar con teclado (WCAG 2.4.7). Con :focus-visible no aparece al hacer clic con el ratón */
.comp-escaparate a:focus-visible,
.comp-escaparate button:focus-visible,
.comp-escaparate input:focus-visible,
.comp-escaparate select:focus-visible,
.comp-escaparate textarea:focus-visible,
.comp-escaparate [role="button"]:focus-visible,
.comp-escaparate .swiper-button-next:focus-visible,
.comp-escaparate .swiper-button-prev:focus-visible {
    outline: 2px solid var(--escap-foco);
    outline-offset: 2px;
}
/* Paginación de los carruseles (ficha y mosaico), Swiper 11:
   - puntos de 12px separados 12px: cada uno tiene un área de 24px sin solaparse (WCAG 2.5.8)
   - inactivo gris #6b7280 (4,8:1 sobre blanco) en vez de negro al 20% (WCAG 1.4.11)
   - el activo se distingue también por la forma (más ancho), no solo por el color (WCAG 1.4.1)
   - borde blanco para que se vean encima de cualquier foto */
.comp-escaparate .swiper-pagination {
    --swiper-pagination-bullet-size: 12px;
    --swiper-pagination-bullet-horizontal-gap: 6px;
    --swiper-pagination-bullet-inactive-color: var(--escap-texto-suave);
    --swiper-pagination-bullet-inactive-opacity: 1;
    --swiper-pagination-bullet-opacity: 1;
    --swiper-pagination-color: var(--escap-acento);
}
.comp-escaparate .swiper-pagination-bullet {
    box-shadow: 0 0 0 1px var(--escap-fondo);
    transition: width 200ms ease;
}
.comp-escaparate .swiper-pagination-bullet-active {
    width: 24px;
    border-radius: 6px;
}
/* Con dynamicBullets (mosaico) el activo vuelve a ser redondo: Swiper coloca los puntos con el ancho del primero
   y una píldora más ancha descentraba la fila. El activo se distingue igual: es el único a tamaño completo con color */
.comp-escaparate .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
    width: var(--swiper-pagination-bullet-size);
    border-radius: 50%;
}
.comp-escaparate .swiper-pagination-bullet:focus-visible {
    outline: 2px solid var(--escap-foco);
    outline-offset: 3px;
}
.comp-escaparate .swiper-slide:focus-visible {
    outline: 2px solid var(--escap-foco);
    outline-offset: -2px;
}

/* El buscador y el desplegable quitaban el outline sin dejar otra marca de foco */
.escaparate__search input:focus-visible { outline: 2px solid var(--escap-foco); outline-offset: -2px; }
.escaparate__cats li a:focus-visible { outline-offset: -2px; }

/* "Contactar por email" y "Consultar precio" llevan a la consulta: se pueden activar con el teclado */
.escaparate__ficha-buttons .mail > [role="button"],
.escaparate__ficha-precio.cons { cursor: pointer; }

/* Botones de contacto (llamar, email, WhatsApp): el li lleva overflow:hidden para las esquinas y recortaba
   el contorno de foco del enlace. El contorno se dibuja en el li, con la forma del botón, cuando algo de dentro
   tiene el foco del teclado; el del elemento interior se quita para que no salga doble */
.escaparate__ficha-buttons li:has(:focus-visible){
    outline:2px solid var(--escap-foco);
    outline-offset:2px;
}
.escaparate__ficha-buttons li :focus-visible{
    outline:none;
}
/* Navegadores sin :has(): el contorno va por dentro del enlace, donde el overflow no lo recorta */
@supports not selector(:has(*)) {
    .escaparate__ficha-buttons li :focus-visible{
        outline:2px solid var(--escap-acento-texto);
        outline-offset:-4px;
    }
}

/* Menos movimiento para quien lo pide en el sistema (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
    .comp-escaparate *,
    .comp-escaparate *::before,
    .comp-escaparate *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}