:root {
--base-color: var(--wp--preset--color--base);
--base-oscura: color-mix(in srgb, var(--base-color) 80%, #000);
}
body:has(dialog[open]) {
overflow: hidden;
} .bosela-product-gallery {
max-width: 800px;
margin: 0 auto;
} .bosela-swiper {
width: 100%;
margin-bottom: 10px;
img {
width: 100%;
height: 100%;
object-fit: cover;
cursor: zoom-in;
transition: opacity 0.3s ease;
&:hover {
opacity: 0.9;
}
}
} .bosela-thumbs {
width: 100%;
height: 100px;
box-sizing: border-box;
padding: 10px 0;
.swiper-slide {
width: 25%;
height: 100%;
opacity: 0.4;
cursor: pointer;
overflow: hidden;
transition: opacity 0.3s ease;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
} .swiper-slide-thumb-active {
opacity: 1;
border: 1px solid var(--wp--preset--color--accent);
}
} .bosela-modal {
border: none;
padding: 0;
background: transparent;
overflow: visible;
max-width: 900vw;
max-height: 90vh;
outline: none;
&[open] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.content-base.modal{
position:relative;
display: inline-block;
justify-content: center;
}
img {
display: block;
object-fit: contain;
margin: auto;
max-width: 80vw;
max-height: 80vh;
box-shadow: 0 0 50px rgba(0,0,0,0.5);
}
&::backdrop {
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(5px);
} .cerrar-modal {
position: absolute;
top: 25px;
right: -15px;
background: var(--wp--preset--color--primary);
color: var(--wp--preset--color--contrast);
border: none;
font-size: 24px;
width: 40px;
height: 40px;
cursor: pointer;
border-radius: 50%;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s ease;
&:hover {
transform: scale(1.1);
background: var(--wp--preset--color--contrast);
color: var(--wp--preset--color--primary);
}
}
} .contenedor-catalago {
h3 {
padding-bottom: 10px;
margin-bottom: 15px;
border-bottom: 1px solid #C9C9C9;
letter-spacing: 1px;
}
.contenedor-inicial{
margin-bottom: 20px;
background-color: #fff;
padding: 1rem;
border: solid 1px var(--base-oscura);
h1{
margin-top: 0 !important;
}
}
.catalogo-datos {
display: block;
margin: 15px 0;
padding: 0 1rem 1rem 1rem;
background-color: #fff;
border: solid 1px var(--base-oscura);
.texto-ficha-titulo {
font-weight: 700;
margin: 20px 0 5px 0;
display: block;
}
.lista-ficha {
margin-top: 5px;
padding-left: 20px;
li {
margin-bottom: 4px;
}
} .btn-descarga-pdf {
display: inline-flex;
align-items: center;
margin-top: 10px;
margin-bottom: 5px;
gap: 0.8rem;
padding: 0.6rem 1.2rem;
background-color: var(--wp--preset--color--primary);
color: var(--wp--preset--color--contrast);
text-decoration: none;
border-radius: 6px;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
&:hover {
background-color: var(--wp--preset--color--contrast);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
color: var(--wp--preset--color--primary);
}
.icono-pdf {
font-size: 1.2em;
}
}
}
} @media (max-width: 768px) {
.bosela-modal {
img {
max-width: 80vw;
max-height: 80vh;
}
}
}