/* ============================================================
   PONTI — Galería, visor y guía de tallas
   ============================================================ */

/* ------------------------------------------------------------
   GALERÍA
   ------------------------------------------------------------ */
.pt-gallery{
  grid-column:1;
  width:100%;
  margin:0;
}

.pt-gallery__main{
  position:relative;
  margin:0;
  background:var(--pt-bone);
  aspect-ratio:1/1;
  overflow:hidden;
  cursor:zoom-in;
}
.pt-gallery__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .18s ease-out;
  transform-origin:center center;
  will-change:transform;
}
.pt-gallery__main.is-zooming{ cursor:none; }
.pt-gallery__main.is-zooming .pt-gallery__img{
  transform:scale(2.2);
  transition:transform .12s ease-out;
}

/* Aviso de zoom, solo hasta el primer uso */
.pt-gallery__hint{
  position:absolute;
  left:1rem; bottom:1rem;
  z-index:3;
  background:rgba(255,255,255,.94);
  color:var(--pt-slate);
  font-size:.6rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:.45rem .7rem;
  pointer-events:none;
  transition:opacity .25s ease;
}
.pt-gallery__main.is-zooming .pt-gallery__hint,
.pt-gallery.has-interacted .pt-gallery__hint{ opacity:0; }

/* Botón de pantalla completa */
.pt-gallery__expand{
  position:absolute;
  top:1rem; right:1rem;
  z-index:4;
  width:2.35rem; height:2.35rem;
  background:var(--pt-paper);
  border:1px solid var(--pt-rule);
  cursor:pointer;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .18s ease;
}
.pt-gallery__expand:hover{ background:var(--pt-taupe); }
.pt-gallery__expand span{
  display:block;
  width:.85rem; height:.85rem;
  position:relative;
}
.pt-gallery__expand span::before,
.pt-gallery__expand span::after{
  content:"";
  position:absolute;
  width:.34rem; height:.34rem;
  border:1.5px solid var(--pt-ink);
}
.pt-gallery__expand span::before{
  top:0; left:0;
  border-right:none; border-bottom:none;
}
.pt-gallery__expand span::after{
  bottom:0; right:0;
  border-left:none; border-top:none;
}

/* Miniaturas — una sola fila. En escritorio se navega con flechas;
   en móvil se desplaza con el dedo. */
.pt-gallery__thumbrail{
  position:relative;
  margin:.5rem 0 0;
}
.pt-gallery__thumbviewport{
  width:100%;
  overflow:hidden;
  scroll-behavior:smooth;
}
.pt-gallery__thumbs{
  --pt-thumb-gap:.5rem;
  display:flex;
  flex-wrap:nowrap;
  gap:var(--pt-thumb-gap);
  list-style:none;
  margin:0;
  padding:0;
  width:100%;
}
.pt-gallery__thumbs li{
  flex:0 0 calc((100% - (var(--pt-thumb-gap) * 3)) / 4);
  min-width:0;
  margin:0;
  scroll-snap-align:start;
}
.pt-gallery__thumb{
  display:block;
  width:100%;
  padding:0;
  border:none;
  background:var(--pt-bone);
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
.pt-gallery__thumb img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
  opacity:.6;
  transition:opacity .2s ease;
}
.pt-gallery__thumb:hover img{ opacity:.85; }
.pt-gallery__thumb.is-active img{ opacity:1; }
.pt-gallery__thumb.is-active::after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid var(--pt-ink);
  pointer-events:none;
}
.pt-gallery__thumbnav{
  position:absolute;
  top:50%;
  z-index:5;
  width:2.35rem;
  height:2.35rem;
  transform:translateY(-50%);
  border:1px solid var(--pt-rule);
  background:rgba(255,255,255,.94);
  color:var(--pt-ink);
  font:400 1.6rem/1 var(--pt-sans);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 0 .1rem;
  cursor:pointer;
  box-shadow:0 2px 10px rgba(20,18,15,.08);
  transition:opacity .18s ease, background .18s ease;
}
.pt-gallery__thumbnav:hover{ background:var(--pt-paper); }
.pt-gallery__thumbnav:disabled{ opacity:0; pointer-events:none; }
.pt-gallery__thumbnav--prev{ left:.55rem; }
.pt-gallery__thumbnav--next{ right:.55rem; }

/* ------------------------------------------------------------
   VISOR A PANTALLA COMPLETA
   ------------------------------------------------------------ */
.pt-lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(12,11,10,.96);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(1rem,4vw,3rem);
}
.pt-lightbox[hidden]{ display:none; }

.pt-lightbox__stage{
  max-width:min(92vw,1100px);
  max-height:88vh;
  overflow:auto;
  cursor:zoom-in;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pt-lightbox__stage.is-zoomed{ cursor:zoom-out; }
.pt-lightbox__img{
  max-width:100%;
  max-height:88vh;
  object-fit:contain;
  display:block;
  transition:max-width .25s ease, max-height .25s ease;
}
.pt-lightbox__stage.is-zoomed .pt-lightbox__img{
  max-width:none;
  max-height:none;
  width:auto;
  height:auto;
}

.pt-lightbox__close{
  position:absolute;
  top:1.25rem; right:1.5rem;
  background:none;
  border:none;
  color:var(--pt-paper);
  font-size:2rem;
  line-height:1;
  cursor:pointer;
  padding:.25rem .5rem;
  opacity:.75;
  transition:opacity .18s ease;
}
.pt-lightbox__close:hover{ opacity:1; }

.pt-lightbox__nav{
  background:none;
  border:none;
  color:var(--pt-paper);
  font-size:2.75rem;
  line-height:1;
  cursor:pointer;
  padding:.5rem 1rem;
  opacity:.6;
  transition:opacity .18s ease;
  flex-shrink:0;
}
.pt-lightbox__nav:hover{ opacity:1; }
.pt-lightbox__count{
  position:absolute;
  bottom:1.5rem;
  left:50%;
  transform:translateX(-50%);
  color:var(--pt-ash);
  font-size:.72rem;
  letter-spacing:.14em;
  font-variant-numeric:tabular-nums;
}

/* ------------------------------------------------------------
   GUÍA DE TALLAS
   ------------------------------------------------------------ */
.pt-guide{
  position:fixed;
  inset:0;
  z-index:9998;
  background:rgba(12,11,10,.5);
  display:flex;
  justify-content:flex-end;
}
.pt-guide[hidden]{ display:none; }

.pt-guide__panel{
  background:var(--pt-paper);
  width:min(30rem,100%);
  height:100%;
  overflow-y:auto;
  padding:clamp(1.5rem,3vw,2.25rem);
  animation:pt-slide-in .28s cubic-bezier(.2,.7,.3,1);
}
@keyframes pt-slide-in{
  from{ transform:translateX(100%); }
  to{ transform:translateX(0); }
}

.pt-guide__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  padding-bottom:1.1rem;
  margin-bottom:1.35rem;
  border-bottom:1px solid var(--pt-rule);
}
.pt-guide__head h2{
  font-size:1.15rem;
  font-weight:600;
  letter-spacing:-.02em;
  margin:.35rem 0 0;
}
.pt-guide__close{
  background:none;
  border:none;
  font-size:1.6rem;
  line-height:1;
  cursor:pointer;
  color:var(--pt-ash);
  padding:0 .25rem;
  flex-shrink:0;
}
.pt-guide__close:hover{ color:var(--pt-ink); }

.pt-guide__note{
  background:var(--pt-bone);
  padding:.85rem 1rem;
  font-size:.845rem;
  color:var(--pt-slate);
  margin:0 0 1.35rem;
  border-left:2px solid var(--pt-ink);
}

.pt-guide__table{
  width:100%;
  border-collapse:collapse;
  font-size:.9rem;
  margin-bottom:1.75rem;
}
.pt-guide__table th{
  text-align:left;
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--pt-ash);
  padding:0 0 .6rem;
  border-bottom:1px solid var(--pt-ink);
}
.pt-guide__table td{
  padding:.7rem 0;
  border-bottom:1px solid var(--pt-rule);
  font-variant-numeric:tabular-nums;
  color:var(--pt-slate);
}
.pt-guide__table td strong{ color:var(--pt-ink); font-weight:600; }

.pt-guide__how h3{
  font-size:.9rem;
  font-weight:600;
  letter-spacing:-.01em;
  margin:0 0 .85rem;
}
.pt-guide__how ol{
  margin:0 0 1.25rem;
  padding-left:1.1rem;
  font-size:.845rem;
  color:var(--pt-slate);
  line-height:1.6;
}
.pt-guide__how li{ margin-bottom:.55rem; }
.pt-guide__advice{
  font-size:.845rem;
  color:var(--pt-slate);
  border-top:1px solid var(--pt-rule);
  padding-top:1.1rem;
  margin:0;
}

/* El enlace de la guía pasa a ser botón */
.pt-size-guide{
  background:none;
  border:none;
  padding:0 0 .15rem;
  font-family:var(--pt-sans);
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--pt-slate);
  border-bottom:1px solid var(--pt-rule);
  cursor:pointer;
}
.pt-size-guide:hover{ color:var(--pt-ink); border-bottom-color:var(--pt-ink); }

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media(max-width:900px){
  .pt-gallery{
    margin-left:calc(var(--pt-gut) * -1);
    margin-right:calc(var(--pt-gut) * -1);
    width:calc(100% + var(--pt-gut) * 2);
  }
  .pt-gallery__main{ cursor:default; aspect-ratio:4/5; }
  .pt-gallery__main.is-zooming .pt-gallery__img{ transform:none; }
  .pt-gallery__hint{ display:none; }
  .pt-gallery__thumbrail{
    margin-top:.5rem;
    padding:0 var(--pt-gut);
  }
  .pt-gallery__thumbviewport{
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .pt-gallery__thumbviewport::-webkit-scrollbar{ display:none; }
  .pt-gallery__thumbs{
    --pt-thumb-gap:.45rem;
    width:100%;
  }
  .pt-gallery__thumbs li{
    flex-basis:clamp(5.25rem,25vw,7.5rem);
  }
  .pt-gallery__thumbnav{ display:none; }
  .pt-guide__panel{
    width:100%;
    animation:pt-slide-up .28s cubic-bezier(.2,.7,.3,1);
  }
  @keyframes pt-slide-up{
    from{ transform:translateY(100%); }
    to{ transform:translateY(0); }
  }
  .pt-lightbox__nav{ font-size:2rem; padding:.5rem; }
}

@media(prefers-reduced-motion:reduce){
  .pt-gallery__img{ transition:none; }
  .pt-guide__panel{ animation:none; }
}

/* 2.2.4 — la guía personalizada puede incluir largo + ancho. */
.pt-guide__table th,
.pt-guide__table td{
  padding-right:.55rem;
}
.pt-guide__table th:last-child,
.pt-guide__table td:last-child{
  padding-right:0;
}