@charset "UTF-8";
/* ==========================================================================
   DCalidadJoyas — 01 · Componentes
   Lámina de producto, tarjetas, carrusel horizontal, fichas, pasos, pagos.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Lámina: superficie metálica neutra + dibujo técnico de la pieza.
   Se usa mientras no hay foto real; cuando el cliente sube la imagen del
   producto, la tarjeta pasa a <img> y esto solo queda como respaldo.
   -------------------------------------------------------------------------- */
.dq-plate {
  --plate-ink: rgba(34, 22, 6, .68);
  --plate-sheen: .1;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--plate-ink);
  background:
    radial-gradient(80% 60% at 22% 0%, rgba(255, 252, 245, .85) 0%, rgba(255, 252, 245, 0) 55%),
    linear-gradient(168deg, #EEDFC0 0%, #DFC69A 42%, #C6A575 100%);
}

/* Variantes de color: dan ritmo al inicio sin romper el sistema */
.dq-plate--green {
  --plate-ink: rgba(242, 235, 221, .66);
  --plate-sheen: 0;
  background:
    radial-gradient(75% 55% at 72% 12%, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(120% 90% at 40% 120%, rgba(3, 14, 11, .55) 0%, rgba(3, 14, 11, 0) 55%),
    linear-gradient(160deg, #17453A 0%, #10362E 55%, #071E18 100%);
}
.dq-plate--wine {
  --plate-ink: rgba(242, 235, 221, .62);
  --plate-sheen: 0;
  background:
    radial-gradient(75% 55% at 72% 12%, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(120% 90% at 40% 120%, rgba(30, 5, 8, .5) 0%, rgba(30, 5, 8, 0) 55%),
    linear-gradient(160deg, #8C3B41 0%, #5E2328 70%, #40171B 100%);
}
.dq-plate--copper {
  --plate-ink: rgba(30, 17, 5, .52);
  --plate-sheen: 0;
  background:
    radial-gradient(75% 55% at 72% 12%, rgba(255, 250, 240, .45) 0%, rgba(255, 250, 240, 0) 60%),
    radial-gradient(120% 90% at 40% 120%, rgba(90, 52, 18, .45) 0%, rgba(90, 52, 18, 0) 55%),
    linear-gradient(160deg, #DFB582 0%, #BF894F 60%, #96632F 100%);
}
.dq-plate--graphite {
  --plate-ink: rgba(242, 235, 221, .5);
  --plate-sheen: 0;
  background:
    radial-gradient(75% 55% at 72% 12%, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(120% 90% at 40% 120%, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 55%),
    linear-gradient(160deg, #4B4943 0%, #2B2A25 70%, #191815 100%);
}

.dq-plate::before {
  content: "";
  position: absolute;
  inset: -40% -70%;
  z-index: 1;
  background: linear-gradient(72deg,
      rgba(255, 255, 255, 0) 38%,
      rgba(255, 255, 255, var(--plate-sheen)) 49%,
      rgba(255, 255, 255, 0) 60%);
  transform: rotate(-6deg);
  pointer-events: none;
}
.dq-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  background-size: 140px 140px;
}
.dq-plate__art {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: auto;
  width: 70%;
  height: auto;
  color: inherit;
  stroke-width: 1.5;
  filter: drop-shadow(0 10px 10px rgba(72, 48, 16, .3));
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}
.dq-plate__art--wide { width: 72%; }
.dq-plate__tag {
  position: absolute;
  left: 1rem;
  bottom: .9rem;
  z-index: 3;
  font-size: .56rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: inherit;
  opacity: .62;
}

/* --------------------------------------------------------------------------
   Etiquetas
   -------------------------------------------------------------------------- */
.dq-tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .5rem;
  border: 1px solid var(--dq-line);
  background: rgba(252, 250, 246, .9);
  font-size: .56rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dq-ink-2);
}
.dq-tag--accent { border-color: var(--dq-accent-2); color: var(--dq-accent); }

/* --------------------------------------------------------------------------
   Favorito (corazón sobre la pieza)
   -------------------------------------------------------------------------- */
.dq-fav {
  position: absolute;
  top: .7rem;
  right: .7rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(20, 18, 15, .14);
  border-radius: 999px;
  background: rgba(252, 250, 246, .82);
  color: var(--dq-ink);
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.dq-fav:hover { border-color: var(--dq-ink); transform: translateY(-1px); }
.dq-fav svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.dq-fav.is-active { background: var(--dq-ink); border-color: var(--dq-ink); color: var(--dq-bone); }
.dq-fav.is-active svg { fill: currentColor; }
.dq-fav.is-pop { animation: dq-pop .34s cubic-bezier(.22, 1, .36, 1); }
.dq-fav--inline {
  position: static;
  width: 44px;
  height: 44px;
  border-color: var(--dq-line);
  background: var(--dq-paper);
  backdrop-filter: none;
}
@keyframes dq-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.16); }
  100% { transform: scale(1); }
}

/* --------------------------------------------------------------------------
   Tarjeta de producto
   -------------------------------------------------------------------------- */
.dq-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dq-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.dq-card:hover .dq-plate__art { transform: scale(1.05); }
.dq-card__media img {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}
.dq-card:hover .dq-card__media img { transform: scale(1.04); }

/* Cuando hay fotografía real, la lámina deja paso a la imagen */
.dq-cat__media img,
.dq-hero__media img,
.dq-editorial__media img,
.dq-product__main img {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dq-card__body {
  display: grid;
  gap: .28rem;
  padding-top: .95rem;
}
.dq-card__cat {
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dq-muted);
}
.dq-card__title {
  margin: 0;
  font-family: var(--dq-display);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -.01em;
}
.dq-card__title a { text-decoration: none; }
.dq-card__title a:hover { color: var(--dq-accent); }
.dq-card__ref { font-size: .64rem; letter-spacing: .1em; color: var(--dq-muted); }
.dq-card__price {
  margin: .35rem 0 0;
  font-size: .95rem;
  font-weight: 500;
}
.dq-card__price small {
  display: block;
  margin-top: .15rem;
  font-size: .6rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dq-muted);
}
.dq-card__actions { display: flex; gap: .45rem; margin-top: .85rem; }
.dq-card__actions .dq-btn { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   Carrusel horizontal (carril)
   -------------------------------------------------------------------------- */
.dq-rail { position: relative; }
.dq-rail__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.dq-rail__head h2 { margin: 0; max-width: 22ch; }
.dq-rail__tools { display: flex; align-items: center; gap: .5rem; flex: none; }

.dq-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--dq-line);
  border-radius: 999px;
  background: transparent;
  color: var(--dq-ink);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s;
}
.dq-arrow:hover:not(:disabled) { background: var(--dq-ink); border-color: var(--dq-ink); color: var(--dq-bone); }
.dq-arrow:disabled { opacity: .3; cursor: default; }
.dq-arrow svg { width: 16px; height: 16px; }

.dq-rail__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(232px, 292px);
  gap: clamp(1rem, 1.8vw, 1.6rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: .5rem;
  scrollbar-width: none;
  cursor: grab;
}
.dq-rail__track::-webkit-scrollbar { display: none; }
.dq-rail__track > * { scroll-snap-align: start; }
.dq-rail__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.dq-rail__track.is-dragging a { pointer-events: none; }

/* --------------------------------------------------------------------------
   Ficha de datos (dl) — condiciones, especificaciones
   -------------------------------------------------------------------------- */
.dq-specs {
  margin: 0;
  border-top: 1px solid var(--dq-line);
}
.dq-specs__row {
  display: grid;
  grid-template-columns: minmax(150px, .34fr) 1fr;
  gap: 1rem;
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--dq-line);
}
.dq-specs dt {
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dq-muted);
  padding-top: .18rem;
}
.dq-specs dd {
  margin: 0;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--dq-ink-2);
}
.dq-section--ink .dq-specs { border-color: rgba(247, 244, 239, .18); }
.dq-section--ink .dq-specs__row { border-color: rgba(247, 244, 239, .18); }
.dq-section--ink .dq-specs dt { color: rgba(247, 244, 239, .55); }
.dq-section--ink .dq-specs dd { color: rgba(247, 244, 239, .88); }

/* --------------------------------------------------------------------------
   Lista numerada (razones)
   -------------------------------------------------------------------------- */
.dq-list-num { list-style: none; margin: 0; padding: 0; counter-reset: dq; }
.dq-list-num > li {
  position: relative;
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: .2rem 1.2rem;
  padding-block: clamp(1.2rem, 2.2vw, 1.8rem);
  border-top: 1px solid rgba(247, 244, 239, .16);
  margin: 0;
}
.dq-list-num > li::before {
  counter-increment: dq;
  content: "0" counter(dq);
  font-size: .66rem;
  letter-spacing: .16em;
  color: var(--dq-accent-2);
  padding-top: .38rem;
}
.dq-list-num h3 {
  margin: 0 0 .35rem;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 400;
  color: var(--dq-bone);
}
.dq-list-num p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.6;
  color: rgba(247, 244, 239, .72);
  max-width: 52ch;
}
@media (max-width: 620px) {
  .dq-list-num > li { grid-template-columns: 2rem 1fr; gap: .2rem .8rem; }
}

/* --------------------------------------------------------------------------
   Pasos (cómo comprar)
   -------------------------------------------------------------------------- */
.dq-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.dq-step { padding-top: 1.2rem; border-top: 1px solid var(--dq-line); }
.dq-step__n {
  display: block;
  margin-bottom: .9rem;
  font-family: var(--dq-display);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--dq-accent);
}
.dq-step h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.dq-step p { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--dq-muted); }
@media (max-width: 900px) { .dq-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .dq-steps { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Pagos
   -------------------------------------------------------------------------- */
.dq-pay {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.dq-pay__card {
  display: grid;
  gap: .5rem;
  align-content: start;
  padding: 1.6rem 1.4rem;
  border: 1px solid var(--dq-line);
  background: var(--dq-paper);
}
.dq-pay__card h3 { margin: 0; font-size: 1.1rem; }
.dq-pay__card p { margin: 0; font-size: .87rem; line-height: 1.55; color: var(--dq-muted); }
.dq-pay__num {
  font-size: 1.02rem;
  letter-spacing: .06em;
  color: var(--dq-ink);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 820px) { .dq-pay { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Bloque CTA
   -------------------------------------------------------------------------- */
.dq-cta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto;
  gap: 2rem;
  align-items: end;
  padding: clamp(2.2rem, 4vw, 3.6rem);
  border: 1px solid var(--dq-line);
  background: var(--dq-paper);
}
.dq-cta h2 { margin: 0 0 .8rem; max-width: 22ch; }
.dq-cta p { margin: 0; max-width: 46ch; color: var(--dq-muted); font-size: .95rem; }
.dq-cta__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
@media (max-width: 900px) {
  .dq-cta { grid-template-columns: 1fr; align-items: start; }
}

/* --------------------------------------------------------------------------
   Migas, etiquetas de estado, avisos
   -------------------------------------------------------------------------- */
.dq-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dq-muted);
}
.dq-breadcrumb a { text-decoration: none; }
.dq-breadcrumb a:hover { color: var(--dq-accent); }
.dq-breadcrumb li + li::before { content: "/"; margin-right: .5rem; opacity: .5; }

.dq-note {
  padding: .9rem 1rem;
  border-left: 2px solid var(--dq-accent-2);
  background: var(--dq-sand);
  font-size: .85rem;
  line-height: 1.55;
  color: var(--dq-ink-2);
}