:root{
  --terracota:#C2644C;
  --acento:#D6A77A;
  --fondo:#FFF7F2;
  --suave:#EAC7BD;
  --oscuro:#5D4036;
}

.joyeria{ padding: 48px 24px; background: var(--fondo); }
.joyeria .title{ font-family: "Playfair Display", serif; font-size: clamp(28px,4vw,40px); color: var(--oscuro); text-align:center; margin-bottom: 24px; }
.joyeria .subtitle{ font-family: "Playfair Display", serif; font-size: clamp(22px,3vw,28px); color: var(--terracota); margin: 24px 0 12px; text-align:center; }
.joyeria .carousel{ position:relative; }
.joyeria .track{ display:grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px*2) / 3); gap: 32px; overflow:hidden; scroll-snap-type: x mandatory; }
@media (max-width:1024px){ .joyeria .track{ grid-auto-columns: calc((100% - 24px) / 2); gap:24px; } }
@media (max-width:640px){ .joyeria .track{ grid-auto-columns: 100%; gap:16px; } }
.joyeria .card{ scroll-snap-align: start; background:#fff; border-radius:16px; padding:14px; box-shadow:0 10px 30px rgba(0,0,0,.08); border:1px solid rgba(0,0,0,.04); transition: transform .25s ease, box-shadow .25s ease; }
.joyeria .card:hover{ transform: translateY(-3px); box-shadow:0 16px 36px rgba(0,0,0,.10); }
.joyeria .card .thumb{
  width: 260px;
  height: 260px;
  object-fit: cover;
  border-radius: 12px;
  display:block;
  margin: 0 auto;
  box-shadow: 0 6px 20px rgba(0,0,0,.10);
}
@media (max-width:640px){ .joyeria .card .thumb{ width: 100%; height: 64vw; max-height: 300px; } }
.joyeria .nav{ position:absolute; top:50%; transform:translateY(-50%); background:#fff; border:1px solid var(--suave); color:var(--terracota); width:40px; height:40px; border-radius:50%; display:grid; place-items:center; cursor:pointer; box-shadow:0 4px 16px rgba(0,0,0,.08); }
.joyeria .nav.prev{ left:-12px; }
.joyeria .nav.next{ right:-12px; }
.joyeria .nav:hover{ background:var(--fondo); }
.joyeria .nav:focus{ outline:2px solid var(--acento); outline-offset:2px; }
.joyeria .dots{ display:flex; gap:8px; justify-content:center; margin-top:12px; }
.joyeria .dots button{ width:8px; height:8px; border-radius:50%; border:0; background:#e3d4cc; }
.joyeria .dots button[aria-current="true"]{ background:var(--terracota); }
.joyeria .beam-intro{
  pointer-events:none; position: fixed; inset:0; z-index: 5;
  background:
    radial-gradient(1200px 400px at 50% -10%, rgba(255,255,255,.45), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,247,242,.7), rgba(255,247,242,0) 40%);
  opacity:0; animation: beamEnter 1200ms ease-out forwards;
}
@keyframes beamEnter{
  0%{ opacity:0; transform: translateY(-12px); filter: blur(8px); }
  40%{ opacity:1; transform: translateY(0); filter: blur(0); }
  100%{ opacity:0; }
}