.producto-detalle{
  display:grid;
  grid-template-columns:1fr 1fr;
  width:100%;
  min-height:720px;
  margin-top:92px;
  color:var(--purple);
}

.producto-detalle-galeria{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:720px;
  padding:70px 60px 105px;
  background:#eef3f7;
}

.producto-imagen-principal{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}

.producto-imagen-principal img{
  display:block;
  width:auto;
  height:clamp(470px,38vw,620px);
  max-width:82%;
  max-height:620px;
  object-fit:contain;
}

.producto-galeria-controles{
  position:absolute;
  bottom:35px;
  left:50%;
  display:flex;
  align-items:center;
  gap:25px;
  transform:translateX(-50%);
}

.producto-galeria-prev,
.producto-galeria-next{
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  padding:0;
  border:0;
  border-radius:50%;
  background:white;
  cursor:pointer;
  transition:background .3s ease;
}

.producto-galeria-prev:hover,
.producto-galeria-next:hover,
.producto-galeria-prev:focus,
.producto-galeria-next:focus{
  background:var(--light-purple);
}

.producto-galeria-prev img{
  transform:rotate(180deg);
}

.producto-detalle-info{
  display:grid;
  grid-template-columns:115px minmax(0,1fr);
  align-items:start;
  gap:55px;
  min-width:0;
  padding:80px 70px 55px 10px;
  background:white;
}

.producto-thumbnails{
  display:flex;
  flex-direction:column;
  gap:4px;
  width:115px;
}

.producto-thumbnail{
  display:flex;
  align-items:center;
  justify-content:center;
  width:115px;
  height:115px;
  padding:0;
  overflow:hidden;
  border:1px solid transparent;
  background:var(--violet);
  cursor:pointer;
  transition:background .3s ease,border-color .3s ease;
}

.producto-thumbnail:hover,
.producto-thumbnail:focus,
.producto-thumbnail.is-active{
  border-color:var(--violet);
  background:var(--light-purple);
}

.producto-thumbnail img{
  display:block;
  width: 100%;
  height:100%;
  object-fit:cover;
}

.producto-detalle-contenido{
  width:100%;
  max-width:520px;
  min-width:0;
  padding-top:10px;
}

.producto-detalle-contenido h1{
  margin:0 0 15px;
  color:var(--violet);
  font-size:50px;
  font-weight:400;
  line-height:1.05;
}

.producto-detalle-descripcion{
  margin:0 0 42px;
  color:var(--violet);
  font-size:16px;
  line-height:1.45;
}

.producto-detalle-descripcion p{
  margin:0;
}

.producto-acordeones{
  width:100%;
}

.producto-acordeon{
  margin:0;
  border:0;
  border-top:1px solid var(--light-purple);
  background:transparent;
}

.producto-acordeones .field__item:last-child .producto-acordeon{
  border-bottom:1px solid var(--light-purple);
}

.producto-acordeon summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:58px;
  padding:17px 20px;
  color:var(--violet);
  font-size:16px;
  font-weight:500;
  line-height:1.2;
  list-style:none;
  text-transform:uppercase;
  cursor:pointer;
}

.producto-acordeon summary::-webkit-details-marker{
  display:none;
}

.producto-acordeon-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

.producto-acordeon-icon img{
  display:block;
  transform:rotate(90deg);
  transition:transform .3s ease;
}

.producto-acordeon[open] .producto-acordeon-icon img{
  transform:rotate(180deg);
}

.producto-acordeon-contenido{
  padding:0 20px 22px;
  color:var(--violet);
  font-size:14px;
  line-height:1.5;
}

.producto-acordeon-contenido p:last-child{
  margin-bottom:0;
}

.btn-producto-comprar{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  margin-top:48px;
  padding:13px 24px;
  border:0;
  border-radius:40px;
  background:var(--light-purple);
  color:var(--purple);
  font-size:15px;
  font-weight:500;
  text-decoration:none;
  transition:background .3s ease,color .3s ease;
}

.btn-producto-comprar:hover,
.btn-producto-comprar:focus{
  background:var(--purple);
  color:white;
}

.btn-producto-comprar:hover img,
.btn-producto-comprar:focus img{
  filter:brightness(700%);
}

.producto-comprar{
  margin-top:48px;
}

.producto-comprar__titulo{
  margin:0 0 14px;
  color:var(--violet);
  font-size:16px;
  font-weight:500;
  line-height:1.3;
}

.producto-comprar-tiendas{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  max-width:460px;
  margin:0;
  padding:0;
  list-style:none;
}

.producto-comprar-tienda{
  display:block;
  text-decoration:none;
  transition:transform .2s ease,opacity .2s ease;
}

a.producto-comprar-tienda:hover,
a.producto-comprar-tienda:focus-visible{
  opacity:.85;
  transform:translateY(-2px);
}

a.producto-comprar-tienda:focus-visible{
  outline:2px solid var(--violet);
  outline-offset:2px;
}

.producto-comprar-tienda__logo{
  display:block;
  width:100%;
  height:auto;
}

.producto-comprar-tienda:not(:has(.producto-comprar-tienda__logo)){
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:160/110;
  padding:6px;
  border:2px solid #bebebe;
}

.producto-comprar-tienda__nombre{
  color:var(--violet);
  font-size:12px;
  font-weight:600;
  line-height:1.2;
  text-align:center;
}

@media(max-width:1199px){
  .producto-detalle{
    grid-template-columns:48% 52%;
  }

  .producto-detalle-galeria{
    min-height:680px;
    padding:65px 40px 100px;
  }

  .producto-imagen-principal img{
    height:520px;
    max-width:88%;
    max-height:520px;
  }

  .producto-detalle-info{
    grid-template-columns:100px minmax(0,1fr);
    gap:35px;
    padding:70px 40px 50px 10px;
  }

  .producto-thumbnails,
  .producto-thumbnail{
    width:100px;
  }

  .producto-thumbnail{
    height:100px;
  }

  .producto-detalle-contenido h1{
    font-size:43px;
  }

  .producto-detalle-descripcion{
    margin-bottom:35px;
    font-size:15px;
  }
}

@media(max-width:991px){
  .producto-detalle{
    grid-template-columns:1fr;
    min-height:0;
  }

  .producto-detalle-galeria{
    min-height:600px;
    padding:65px 40px 95px;
  }

  .producto-imagen-principal img{
    height:470px;
    max-width:90%;
    max-height:470px;
  }

  .producto-detalle-info{
    grid-template-columns:100px minmax(0,1fr);
    gap:40px;
    padding:55px 7% 60px;
  }

  .producto-detalle-contenido{
    max-width:none;
  }
}

@media(max-width:767px){
  .producto-detalle{
    display:block;
    margin-top:40px;
  }

  .producto-detalle-galeria{
    min-height:0;
    height:340px;
    padding:25px 20px;
  }

  .producto-imagen-principal{
    height:100%;
    min-height:0;
  }

  .producto-imagen-principal img{
    width:auto;
    height:100%;
    max-width:90%;
    max-height:300px;
  }

  .producto-galeria-controles{
    display:none;
  }

  .producto-detalle-info{
    display:flex;
    flex-direction:column;
    gap:0;
    padding:0 0 45px;
  }

  .producto-thumbnails{
    order:1;
    display:flex;
    flex-direction:row;
    gap:6px;
    width:100%;
    margin:0;
    padding:0 10px 4px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }

  .producto-thumbnails::-webkit-scrollbar{
    display:none;
  }

  .producto-thumbnail{
    flex:0 0 calc((100vw - 38px) / 4);
    width:calc((100vw - 38px) / 4);
    height:115px;
    scroll-snap-align:start;
  }

  .producto-thumbnail img{
    object-fit:cover;
  }

  .producto-detalle-contenido{
    order:2;
    width:100%;
    max-width:none;
    padding:28px 10px 0;
  }

  .producto-detalle-contenido h1{
    margin:0 0 12px;
    font-size:34px;
    line-height:1.1;
  }

  .producto-detalle-descripcion{
    margin-bottom:32px;
    font-size:13px;
    line-height:1.45;
  }

  .producto-acordeon summary{
    min-height:56px;
    padding:16px 18px;
    font-size:12px;
  }

  .producto-acordeon-contenido{
    padding:0 18px 18px;
    font-size:13px;
  }

  .btn-producto-comprar{
    margin-top:40px;
    padding:11px 20px;
    font-size:12px;
  }

  .producto-comprar{
    margin-top:40px;
  }

  .producto-comprar__titulo{
    font-size:14px;
  }

  .producto-comprar-tiendas{
    grid-template-columns:repeat(3,minmax(0,1fr));
    max-width:none;
  }
}

@media(max-width:390px){
  .producto-detalle-galeria{
    height:320px;
  }

  .producto-imagen-principal img{
    max-height:285px;
  }

  .producto-thumbnail{
    flex-basis:calc((100vw - 35px) / 4);
    width:calc((100vw - 35px) / 4);
    height:88px;
  }

  .producto-detalle-contenido h1{
    font-size:32px;
  }
}


/*Collage*/

.home-collage{
  width:100%;
  overflow:hidden;
  background:white;
}

.home-collage__grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:repeat(8,minmax(0,1fr));
  width:100%;
  aspect-ratio:2.2/1;
  gap:4px;
  background:white;
}

.home-collage__item{
  min-width:0;
  min-height:0;
  overflow:hidden;
}

.home-collage__item img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}

.home-collage__item:hover img{
  transform:scale(1.03);
}

.home-collage__item:nth-child(1){
  grid-column:1 / 3;
  grid-row:1 / 5;
}

.home-collage__item:nth-child(2){
  grid-column:3 / 5;
  grid-row:1 / 5;
}

.home-collage__item:nth-child(3){
  grid-column:5 / 7;
  grid-row:1 / 5;
}

.home-collage__item:nth-child(4){
  grid-column:7 / 9;
  grid-row:1 / 3;
}

.home-collage__item:nth-child(5){
  grid-column:7 / 9;
  grid-row:3 / 5;
}

.home-collage__item:nth-child(6){
  grid-column:9 / 10;
  grid-row:1 / 5;
}

.home-collage__item:nth-child(7){
  grid-column:10 / 13;
  grid-row:1 / 5;
}

.home-collage__item:nth-child(8){
  grid-column:1 / 3;
  grid-row:5 / 9;
}

.home-collage__item:nth-child(9){
  grid-column:3 / 5;
  grid-row:5 / 9;
}

.home-collage__item:nth-child(10){
  grid-column:5 / 7;
  grid-row:5 / 9;
}

.home-collage__item:nth-child(11){
  grid-column:7 / 9;
  grid-row:5 / 9;
}

.home-collage__item:nth-child(12){
  grid-column:9 / 11;
  grid-row:5 / 9;
}

.home-collage__item:nth-child(13){
  grid-column:11 / 13;
  grid-row:5 / 9;
}

.home-collage__grid--partial{
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  grid-template-rows:none;
  grid-auto-rows:280px;
  aspect-ratio:auto;
}

.home-collage__grid--partial .home-collage__item{
  grid-column:auto;
  grid-row:auto;
}

@media(max-width:768px){
  .home-collage__grid{
    grid-template-columns:repeat(6,minmax(0,1fr));
    grid-template-rows:auto;
    grid-auto-rows:210px;
    aspect-ratio:auto;
  }

  .home-collage__item:nth-child(n){
    grid-column:auto;
    grid-row:auto;
  }

  .home-collage__item:nth-child(5n + 1){
    grid-column:span 2;
  }

  .home-collage__item:nth-child(5n + 2){
    grid-column:span 2;
  }

  .home-collage__item:nth-child(5n + 3){
    grid-column:span 2;
  }

  .home-collage__item:nth-child(5n + 4),
  .home-collage__item:nth-child(5n + 5){
    grid-column:span 3;
  }
}

@media(max-width:575px){

  .home-collage__grid{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    grid-auto-rows:90px;
    grid-auto-flow:dense;
    gap:4px;
    width:100%;
    aspect-ratio:auto;
  }

  .home-collage__item:nth-child(n){
    grid-column:auto;
    grid-row:auto;
  }

  .home-collage__item:nth-child(7n + 1),
  .home-collage__item:nth-child(7n + 2){
    grid-column:span 6;
    grid-row:span 4;
  }

  .home-collage__item:nth-child(7n + 3){
    grid-column:span 5;
    grid-row:span 3;
  }

  .home-collage__item:nth-child(7n + 4){
    grid-column:span 7;
    grid-row:span 3;
  }

  .home-collage__item:nth-child(7n + 5){
    grid-column:span 4;
    grid-row:span 3;
  }

  .home-collage__item:nth-child(7n + 6){
    grid-column:span 5;
    grid-row:span 3;
  }

  .home-collage__item:nth-child(7n + 7){
    grid-column:span 3;
    grid-row:span 3;
  }

  .home-collage__item img{
    width:100%;
    height:100%;
    object-fit:cover;
  }
}