.joya-doc { padding-top: clamp(18px, 3.4vw, 44px); }

.joya {
  --joya-mat: clamp(5px, .7vw, 9px);
  --joya-fundido: 1.6s;
  display: grid;
  gap: clamp(26px, 4vw, 56px);
  width: min(1240px, 100%);
  margin: 0 auto;
  color: var(--ink, #101010);
  font-family: var(--cormorant, "Cormorant Garamond", Georgia, serif);
}

.joya__visor {
  display: grid;
  justify-items: center;
  gap: 12px;
  min-width: 0;
  outline: 0;
}

.joya__marco {
  position: relative;
  width: min(100%, 620px, calc(80vh * 2 / 3));
  aspect-ratio: 2 / 3;
  background: #FFFFFF;
  border: 1px solid rgba(16, 16, 16, .07);
  overflow: hidden;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.joya__visor:focus-visible .joya__marco { outline: 1px solid var(--ink, #101010); outline-offset: 6px; }

.joya__fotos { position: absolute; inset: var(--joya-mat); }

.joya__capa {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--joya-fundido) cubic-bezier(.4, 0, .2, 1);
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

.joya__capa--previa { z-index: 1; }

.joya__capa--vista { z-index: 2; opacity: 1; pointer-events: auto; cursor: zoom-in; }

.joya__lado {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: 32%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.joya__lado--antes { left: 0; }
.joya__lado--despues { right: 0; }

.joya__sinfoto {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #cfccc6;
  letter-spacing: .38em;
  text-indent: .38em;
}

.joya__rayas { display: flex; justify-content: center; gap: 4px; }

.joya__raya {
  display: grid;
  place-items: center;
  width: 36px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.joya__raya::before {
  content: "";
  width: 26px;
  height: 1px;
  background: rgba(16, 16, 16, .2);
  transition: background .8s ease;
}

.joya__raya[aria-current="true"]::before { background: var(--ink, #101010); }

.joya__raya:focus-visible { outline: 1px solid var(--ink, #101010); outline-offset: 0; }

.joya__aviso {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.joya__texto { display: grid; align-content: start; gap: 12px; min-width: 0; }

.joya .joya__categoria { margin: 0; }

.joya__nombre {
  margin: 0;
  font-family: var(--cormorant, "Cormorant Garamond", Georgia, serif);
  font-size: clamp(2rem, 7vw, 3.1rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: .01em;
  overflow-wrap: anywhere;
}

.joya .joya__lema {
  margin: 0;
  color: #6f6f6b;
  font-size: 1.12rem;
  font-style: italic;
  line-height: 1.5;
  letter-spacing: .01em;
}

.joya .joya__material,
.joya .joya__incluye {
  margin: 0;
  color: #6f6f6b;
  font-size: .8rem;
  letter-spacing: .16em;
  line-height: 1.6;
  text-transform: uppercase;
}

.joya .joya__oro { color: var(--ink, #101010); font-weight: 600; }

.joya .joya__estado {
  justify-self: start;
  margin: 4px 0 0;
  padding: 4px 10px 3px;
  border: 1px solid var(--ink, #101010);
  color: var(--ink, #101010);
  font-size: .72rem;
  letter-spacing: .2em;
  line-height: 1.4;
  text-transform: uppercase;
}

.joya .joya__estado--agotada { border-color: #8a8a84; color: #6f6f6b; }

.joya__historia {
  margin-top: 10px;
  padding-top: 20px;
  border-top: 1px solid rgba(16, 16, 16, .1);
}

.joya .joya__historia p {
  margin: 0;
  max-width: 58ch;
  color: var(--ink-soft, #3A3A3A);
  font-size: clamp(1.08rem, 2.6vw, 1.22rem);
  line-height: 1.8;
  letter-spacing: .01em;
}

.joya .joya__precio {
  margin: 4px 0 0;
  color: #6f6f6b;
  font-size: 1rem;
  line-height: 1.6;
}

.joya .joya__precio a { color: var(--ink, #101010); text-decoration: underline; text-underline-offset: 3px; }

.joya .joya__acciones { margin-top: 18px; }

@media (min-width: 880px) {
  .joya { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
  .joya__visor { position: sticky; top: 104px; }
  .joya__texto { padding-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .joya { --joya-fundido: 0s; }
  .joya__raya::before { transition: none; }
}