/* ═══════════ Jade Joyerías · boutique oscura ═══════════ */
:root {
  --bg: #131015;
  --bg-alt: #1a161c;
  --card: #201b23;
  --ink: #f1ece3;
  --ink-soft: #a89e91;
  --gold: #c9a462;
  --gold-deep: #e2c286;   /* acento claro para hover/títulos sobre fondo oscuro */
  --line: rgba(201,164,98,.16);
  --radius: 12px;
  --wrap: 1180px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin:0; font-family:var(--font); color:var(--ink); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
a { color:inherit; }
h1,h2,h3 { line-height:1.15; margin:0 0 .4em; font-weight:600; letter-spacing:.01em; }
h2 { font-size:clamp(1.6rem,4vw,2.3rem); }
p { margin:0 0 1rem; color:var(--ink-soft); }

.wrap { max-width:var(--wrap); margin:0 auto; padding:0 clamp(1rem,4vw,2rem); }
.section { padding:clamp(3rem,8vw,5.5rem) 0; }
.section--alt { background:var(--bg-alt); }
.section__head { text-align:center; max-width:620px; margin:0 auto 2.6rem; }
.section__head h2::after { content:""; display:block; width:54px; height:2px; background:var(--gold); margin:.7rem auto 0; }

/* Botones */
.btn { display:inline-block; text-decoration:none; font-weight:600; text-align:center; padding:.75rem 1.5rem; border-radius:999px; border:1px solid transparent; cursor:pointer; letter-spacing:.02em; transition:transform .2s var(--ease), box-shadow .2s, background-color .2s, color .2s, border-color .2s; }
.btn--sm { padding:.5rem 1.1rem; font-size:.88rem; }
.btn--lg { padding:.9rem 1.9rem; font-size:1.02rem; }
.btn--gold { background:var(--gold); color:#191308; box-shadow:0 6px 18px rgba(0,0,0,.35); }
.btn--gold:hover { background:var(--gold-deep); transform:translateY(-2px); }
.btn--ghost { border-color:rgba(201,164,98,.4); color:var(--ink); background:transparent; }
.btn--ghost:hover { border-color:var(--gold-deep); color:var(--gold-deep); }

/* NAVBAR */
.nav { position:sticky; top:0; z-index:40; background:rgba(19,16,21,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.nav__bar { display:flex; align-items:center; justify-content:space-between; height:78px; }
.nav__brand img { display:block; height:58px; width:auto; }
@media (max-width:480px){ .nav__brand img { height:48px; } }
.nav__menu { display:flex; align-items:center; gap:1.6rem; }
.nav__menu a { text-decoration:none; color:var(--ink-soft); font-size:.92rem; letter-spacing:.04em; transition:color .2s; }
.nav__menu a:hover { color:var(--gold-deep); }
.nav__toggle { display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; }
.nav__toggle span { width:24px; height:2px; background:var(--ink); transition:.25s; }
@media (max-width:820px){
  .nav__toggle{ display:flex; }
  .nav__menu{ position:fixed; inset:78px 0 auto 0; flex-direction:column; align-items:stretch; gap:0; background:var(--bg); border-bottom:1px solid var(--line); padding:.5rem 1.2rem 1.2rem; transform:translateY(-130%); transition:transform .3s var(--ease); }
  .nav__menu a{ padding:.95rem .2rem; border-bottom:1px solid rgba(255,255,255,.06); }
  .nav__menu .btn{ margin-top:.9rem; text-align:center; }
  .nav.is-open .nav__menu{ transform:translateY(0); }
  .nav.is-open .nav__toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav.is-open .nav__toggle span:nth-child(2){ opacity:0; }
  .nav.is-open .nav__toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

/* HERO (opcional) */
.hero { text-align:center; padding:clamp(3.5rem,10vw,6rem) 0; background:radial-gradient(120% 100% at 50% 0%, var(--bg-alt), var(--bg) 65%); }
.hero__title { font-size:clamp(2.2rem,7vw,3.6rem); }
.hero__sub { font-size:1.15rem; margin-bottom:1.6rem; }

/* CARRUSEL */
.carousel { position:relative; overflow:hidden; background:#0d0b0f; border-bottom:1px solid var(--line); }
.carousel__track { display:flex; transition:transform .6s var(--ease); }
.carousel__slide { position:relative; min-width:100%; height:clamp(340px,62vh,580px); }
.carousel__slide img { width:100%; height:100%; object-fit:cover; opacity:.9; }
.carousel__caption { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:1.5rem; color:#fff; background:linear-gradient(180deg, rgba(13,11,15,.30), rgba(13,11,15,.72)); }
.carousel__caption h2 { color:#fff; font-size:clamp(1.6rem,5vw,2.8rem); max-width:18ch; }
.carousel__caption p { color:rgba(241,236,227,.88); max-width:46ch; margin-bottom:1.4rem; }
.carousel__nav { position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; border:1px solid rgba(201,164,98,.4); background:rgba(19,16,21,.7); color:var(--gold-deep); font-size:1.5rem; line-height:1; cursor:pointer; transition:background-color .2s, color .2s; }
.carousel__nav:hover { background:var(--gold); color:#191308; }
.carousel__nav--prev { left:14px; } .carousel__nav--next { right:14px; }
.carousel__dots { position:absolute; bottom:16px; left:0; right:0; display:flex; justify-content:center; gap:8px; }
.carousel__dot { width:9px; height:9px; border-radius:50%; border:0; background:rgba(241,236,227,.35); cursor:pointer; padding:0; transition:background-color .2s, transform .2s; }
.carousel__dot.is-active { background:var(--gold); transform:scale(1.25); }

/* COLECCIONES · mosaico asimétrico */
.cat-grid { display:grid; gap:14px; grid-template-columns:repeat(2,1fr); }
.cat-card { position:relative; display:block; border:0; padding:0; text-align:left; background:var(--card); cursor:pointer; border-radius:var(--radius); overflow:hidden; aspect-ratio:1; outline:1px solid var(--line); outline-offset:-1px; }
.cat-card:first-child { grid-column:span 2; aspect-ratio:16/9; }
.cat-card img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease), opacity .3s; }
.cat-card:hover img { transform:scale(1.06); }
.cat-card__label { position:absolute; inset:auto 0 0 0; padding:1.6rem 1rem .9rem; color:#fff; font-weight:600; letter-spacing:.03em; background:linear-gradient(180deg, transparent, rgba(10,8,12,.78)); }
.cat-card__sub { display:block; font-weight:400; font-size:.76rem; color:var(--gold-deep); margin-top:.15rem; }
@media (min-width:900px){
  .cat-grid { grid-template-columns:repeat(4,1fr); }
  .cat-card:first-child { grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }
  .cat-card:nth-child(6), .cat-card:nth-child(7) { grid-column:span 2; aspect-ratio:2/1; }
}

/* FILTROS · tabs subrayados */
.filters { margin-bottom:2rem; }
.filters__row { display:flex; flex-wrap:wrap; gap:.2rem 1.4rem; justify-content:center; }
.filters__row--sub { margin-top:.9rem; padding-top:.7rem; border-top:1px solid rgba(255,255,255,.06); }
.chip { background:transparent; border:0; border-bottom:2px solid transparent; border-radius:0; color:var(--ink-soft); padding:.45rem .1rem; font-size:.82rem; letter-spacing:.09em; text-transform:uppercase; cursor:pointer; transition:color .2s, border-color .2s; }
.chip:hover { color:var(--gold-deep); }
.chip.is-active { color:var(--gold-deep); border-bottom-color:var(--gold); }
.filters__row--sub .chip { text-transform:none; letter-spacing:.03em; font-size:.88rem; }

/* PIEZAS */
.product-grid { display:grid; gap:1.3rem; grid-template-columns:repeat(2,1fr); }
@media (min-width:720px){ .product-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1000px){ .product-grid{ grid-template-columns:repeat(4,1fr); } }
.product { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:transform .25s var(--ease), border-color .25s, box-shadow .25s; }
.product:hover { transform:translateY(-4px); border-color:rgba(201,164,98,.45); box-shadow:0 16px 34px rgba(0,0,0,.45); }
.product__media { aspect-ratio:1; overflow:hidden; background:#f7f3ec; display:block; width:100%; padding:0; border:0; }
.product__media img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.product:hover .product__media img { transform:scale(1.05); }
.product__body { padding:1rem 1rem 1.2rem; display:flex; flex-direction:column; gap:.35rem; flex:1; }
.product__cat { font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); }
.product__title { font-size:1rem; font-weight:600; margin:0; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.4em; }
.product__meta { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:auto; padding-top:.45rem; min-height:1.9em; }
.product__price { font-weight:700; color:var(--gold-deep); min-height:1em; }
.product__sku { font-size:.7rem; color:var(--ink-soft); text-align:right; }
.product__cta { margin-top:.55rem; }
.product__cta .btn { width:100%; }
.empty { text-align:center; color:var(--ink-soft); padding:2rem 0; }
.load-more { text-align:center; margin-top:1.8rem; }

/* CONTACTO */
.contact__grid { display:grid; gap:2rem; grid-template-columns:1fr; }
@media (min-width:820px){ .contact__grid{ grid-template-columns:1.4fr 1fr; } }
.contact__info { list-style:none; margin:1rem 0 1.4rem; padding:0; }
.contact__info li { padding:.3rem 0; color:var(--ink-soft); }
.contact__info strong { color:var(--ink); font-weight:600; }
.contact__info a { color:var(--gold-deep); text-decoration:none; }
.contact__social { display:flex; flex-direction:column; gap:.6rem; align-content:start; }
.contact__social a { text-decoration:none; color:var(--ink); border:1px solid var(--line); border-radius:var(--radius); padding:.85rem 1rem; text-align:center; letter-spacing:.05em; transition:border-color .2s, color .2s, background-color .2s; }
.contact__social a:hover { border-color:var(--gold); color:var(--gold-deep); background:rgba(201,164,98,.06); }

/* FOOTER */
.footer { background:#0d0b0f; color:#b6ada0; padding:3rem 0 1.5rem; border-top:1px solid var(--line); }
.footer__grid { display:grid; gap:1.5rem; grid-template-columns:1fr; }
@media (min-width:720px){ .footer__grid{ grid-template-columns:2fr 1fr 1fr; } }
.footer__logo { margin-bottom:.6rem; }
.footer__nap { color:#8b8378; font-size:.9rem; }
.footer__links { display:flex; flex-direction:column; gap:.5rem; }
.footer__links a, .footer__social a { color:#b6ada0; text-decoration:none; }
.footer__links a:hover, .footer__social a:hover { color:var(--gold-deep); }
.footer__social { display:flex; gap:1rem; }
.footer__copy { text-align:center; color:#6d665c; font-size:.85rem; margin:2rem 0 0; }

/* LIGHTBOX de producto (pantalla completa) */
.lightbox { position:fixed; inset:0; z-index:80; background:rgba(11,9,13,.96); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:clamp(.8rem,3vw,2rem); overflow:auto;
  animation:lbIn .25s var(--ease); }
@keyframes lbIn { from { opacity:0; } to { opacity:1; } }
.lightbox__inner { display:flex; flex-direction:column; gap:1.2rem; width:100%; max-width:1040px;
  max-height:100%; animation:lbCard .3s var(--ease); }
@keyframes lbCard { from { opacity:0; transform:translateY(16px) scale(.98); } to { opacity:1; transform:none; } }
.lightbox__media { flex:1.2; min-height:0; border-radius:var(--radius); overflow:hidden; background:#f7f3ec; }
.lightbox__media img { width:100%; height:100%; object-fit:contain; max-height:52vh; }
.lightbox__info { flex:1; color:var(--ink); }
.lightbox__cat { font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.lightbox__title { font-size:clamp(1.3rem,4vw,1.9rem); margin:.25em 0 .3em; }
.lightbox__desc { color:var(--ink-soft); }
.lightbox__meta { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin:.8rem 0 1.2rem; }
.lightbox__price { font-size:1.35rem; font-weight:700; color:var(--gold-deep); }
.lightbox__sku { font-size:.78rem; color:var(--ink-soft); }
.lightbox__cta { width:100%; }
.lightbox__close { position:fixed; top:14px; right:16px; z-index:81; width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(201,164,98,.4); background:rgba(19,16,21,.7); color:var(--gold-deep);
  font-size:1.7rem; line-height:1; cursor:pointer; transition:background-color .2s, color .2s; }
.lightbox__close:hover { background:var(--gold); color:#191308; }
@media (min-width:860px){
  .lightbox__inner { flex-direction:row; align-items:stretch; }
  .lightbox__media img { max-height:76vh; }
  .lightbox__info { display:flex; flex-direction:column; justify-content:center; max-width:380px; }
}
@media (prefers-reduced-motion: reduce){ .lightbox, .lightbox__inner { animation:none; } }

/* La imagen del producto invita al clic (pointer también evita el bug de burbujeo en iOS) */
.product__media, .product__title { cursor:pointer; }
.product__media img { pointer-events:none; }

/* WhatsApp flotante */
.wa-float { position:fixed; right:clamp(1rem,4vw,1.6rem); bottom:clamp(1rem,4vw,1.6rem); z-index:60;
  display:inline-flex; align-items:center; justify-content:center; width:58px; height:58px; border-radius:50%;
  background:#25d366; color:#fff; box-shadow:0 6px 20px rgba(0,0,0,.5);
  transition:transform .25s var(--ease), box-shadow .25s; }
.wa-float:hover, .wa-float:focus-visible { transform:scale(1.08); box-shadow:0 10px 26px rgba(37,211,102,.45); }

/* Página informativa */
.info { border-top:1px solid rgba(255,255,255,.08); padding-top:1.6rem; margin-top:1.6rem; }
.info:first-of-type { border-top:0; padding-top:0; margin-top:0; }
.info h2 { color:var(--gold-deep); }

:focus-visible { outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }

/* Reveal al hacer scroll */
.reveal, .product, .cat-card { opacity:1; }
.js-reveal .reveal, .js-reveal .product-init { opacity:0; transform:translateY(22px); }
.js-reveal .reveal.is-in, .js-reveal .product-init.is-in { opacity:1; transform:none; transition:opacity .6s var(--ease), transform .6s var(--ease); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .carousel__track{ transition:none; }
  .js-reveal .reveal, .js-reveal .product-init{ opacity:1; transform:none; }
}