/* =========================================================
   JOYASMU — main.css
   Tokens de marca: negro tinta, rojo latido, hueso, dorado joyero.
   ========================================================= */

:root{
  --ink:#0d0d0d;
  --red:#c6122a;
  --red-deep:#7a0a1a;
  --bone:#ffffff;
  --silver:#b9b9b9;
  --gold:#a9822f;
  --line: rgba(13,13,13,0.14);
  --line-bone: rgba(243,238,231,0.22);
  --radius: 16px;
  --radius-sm: 8px;
  --amazon-yellow:#ffd814;
  --amazon-yellow-hover:#f7ca00;
  --amazon-yellow-border:#fcd200;
  --amazon-text:#0f1111;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bone);
  color:var(--ink);
  font-family:'Archivo',sans-serif;
  overflow-x:hidden;
}
::selection{background:var(--red);color:var(--bone);}
a{color:inherit;text-decoration:none;}
nav.primary-nav a,
nav.primary-nav .cart-link{color:var(--ink);}
nav.primary-nav.open a,
nav.primary-nav.open .cart-link{color:var(--bone);}
img{max-width:100%;display:block;}
ul{list-style:none;}
button, input{font-family:inherit;}

.mono{
  font-family:'JetBrains Mono',monospace;
  letter-spacing:0.04em;
  text-transform:uppercase;
}
.display{
  font-family:'Bodoni Moda', serif;
  font-optical-sizing:auto;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

/* ---------- Header ---------- */
header{
  position:fixed; top:0; left:0; right:0;
  z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:34px 5vw;
  transition:background .35s ease, padding .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
header.scrolled{
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(10px);
  padding:20px 5vw;
  border-bottom:1px solid var(--line);
}

.logo{
  display:flex; align-items:center; gap:18px;
  font-family:'Bodoni Moda', serif;
  font-weight:700;
  font-size:1.8rem;
  letter-spacing:0.02em;
}
.logo .mark, .logo .custom-logo-link{
  width:92px;height:92px;
  position:relative;
  flex-shrink:0;
  display:inline-block;
  animation:beat 2.4s ease-in-out infinite;
}
.logo .custom-logo-link img{width:100%;height:100%;object-fit:contain;}
@keyframes beat{
  0%,100%{transform:scale(1);}
  12%{transform:scale(1.12);}
  24%{transform:scale(0.98);}
  36%{transform:scale(1.06);}
  48%{transform:scale(1);}
}
.logo .mark svg{width:100%;height:100%;}
.logo-text{white-space:nowrap;}

nav.primary-nav{display:flex; align-items:center; gap:46px;}
nav.primary-nav a{
  font-family:'JetBrains Mono',monospace;
  font-size:0.95rem;
  letter-spacing:0.07em;
  text-transform:uppercase;
  position:relative;
  padding-bottom:4px;
}
nav.primary-nav a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:0; height:1px;
  background:var(--red);
  transition:width .25s ease;
}
nav.primary-nav a:hover::after{width:100%;}

.cart-link{display:flex; align-items:center; gap:6px; font-size:0.95rem;}
.cart-count{
  background:var(--red); color:var(--bone);
  border-radius:50%;
  width:18px;height:18px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:0.62rem;
}

.nav-toggle{display:none;}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:56px;
  padding:170px 5vw 8vh;
  overflow:hidden;
}
.hero-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:60px;
}
.hero-intro{max-width:420px; padding-top:8px; margin-left:clamp(20px, 8vw, 160px);}
.hero-mark{
  width:22vw; max-width:260px;
  flex-shrink:0;
  animation:beat 2.4s ease-in-out infinite;
}
.hero-mark svg{width:100%;height:100%;display:block;}
.hero-eyebrow{
  font-size:0.72rem;
  margin-bottom:22px;
  display:flex;align-items:center;gap:10px;
}
.hero-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--red);display:inline-block;}
.hero-headline{
  font-size:clamp(3.2rem, 8.4vw, 8rem);
  line-height:0.92;
  font-weight:500;
  letter-spacing:-0.01em;
}
.hero-headline em{
  font-style:italic;
  color:var(--red);
  font-weight:400;
}
.hero-intro p{
  font-size:1.02rem;
  line-height:1.55;
  max-width:34ch;
  margin-bottom:28px;
  color:rgba(13,13,13,0.78);
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:'JetBrains Mono',monospace;
  font-size:0.74rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:16px 26px;
  border:1px solid var(--ink);
  border-radius:var(--radius-sm);
  background:transparent;
  cursor:pointer;
  transition:background .25s ease, color .25s ease;
}
.btn:hover{background:var(--ink); color:var(--bone);}
.btn.solid{background:var(--red); border-color:var(--red); color:var(--bone);}
.btn.solid:hover{background:var(--red-deep); border-color:var(--red-deep);}
.btn.btn-mini{padding:10px 16px; font-size:0.66rem;}
.btn svg{width:14px;height:14px;}

.scroll-cue{
  position:absolute; left:5vw; bottom:4vh;
  display:flex; align-items:center; gap:10px;
  font-size:0.68rem;
  z-index:1;
}
.scroll-cue .line{width:36px;height:1px;background:var(--ink);animation:extend 2s ease-in-out infinite;}
@keyframes extend{0%,100%{width:36px;}50%{width:14px;}}

/* ---------- Marquee strip ---------- */
.strip{
  background:var(--ink);
  color:var(--bone);
  padding:14px 0;
  overflow:hidden;
  white-space:nowrap;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
}
.strip-track{display:inline-flex; animation:scrollstrip 26s linear infinite;}
.strip-track span{
  font-family:'JetBrains Mono',monospace;
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:0 28px;
  display:inline-flex;
  align-items:center;
  gap:28px;
}
.strip-track span::after{content:"♥"; color:var(--red); font-size:0.7rem;}
@keyframes scrollstrip{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}

/* ---------- Section frame ---------- */
section{padding:min(14vh,140px) 5vw;}
.wc-container{
  padding-top:12vh;
  width:80%;
  max-width:1400px;
  margin:0 auto;
  padding-left:0;
  padding-right:0;
}
@media (max-width: 980px){
  .wc-container{width:90%;}
}
@media (max-width: 640px){
  .wc-container{width:92%;}
}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:70px;
  gap:30px;
  border-bottom:1px solid var(--line);
  padding-bottom:26px;
}
.section-head .tag{font-size:0.72rem; color:var(--red); margin-bottom:14px; display:block;}
.section-head h1, .section-head h2{
  font-size:clamp(2.2rem,4.4vw,3.6rem);
  font-weight:500;
  max-width:20ch;
  line-height:1.02;
}
.section-head p{max-width:32ch; font-size:0.95rem; color:rgba(13,13,13,0.65); line-height:1.5;}

/* ---------- Vitrine / product grid ---------- */
.vitrine{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.piece{background:var(--bone); padding:26px 22px 22px; position:relative; cursor:pointer;}
.piece-frame{
  aspect-ratio:1/1.15;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:22px;
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-sm);
}
.piece-frame img{width:100%;height:100%;object-fit:cover; transition:transform .5s cubic-bezier(.16,1,.3,1);}
.piece-frame svg{width:78%;height:78%;transition:transform .5s cubic-bezier(.16,1,.3,1);}
.piece:hover .piece-frame svg, .piece:hover .piece-frame img{transform:scale(1.08) rotate(-1deg);}
.piece-num{position:absolute; top:22px; left:22px; font-size:0.65rem; color:rgba(13,13,13,0.4); z-index:2;}
.piece-name{font-family:'Bodoni Moda',serif; font-size:1.15rem; font-weight:500; margin-bottom:6px;}
.piece-meta{
  display:flex; justify-content:space-between; align-items:center;
  font-size:0.68rem;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.piece-meta .material{color:rgba(13,13,13,0.55);}
.piece-meta .price{color:var(--red);font-weight:600;}
.piece-meta .price ins{text-decoration:none;}
.piece-meta .price del{opacity:0.5; margin-right:6px; font-weight:400;}

/* Variante de 5 columnas (portada: "Selección de la semana").
   Imágenes más pequeñas y con margen interno para disimular
   fotos de baja resolución del distribuidor. */
.vitrine-5{grid-template-columns:repeat(5,1fr);}
.vitrine-5 .piece{padding:16px 14px 14px;}
.vitrine-5 .piece-frame{
  aspect-ratio:1/1;
  padding:15%;
  box-sizing:border-box;
  margin-bottom:14px;
}
.vitrine-5 .piece-frame img{object-fit:contain;}
.vitrine-5 .piece-num{top:14px; left:14px; font-size:0.58rem;}
.vitrine-5 .piece-name{font-size:0.88rem; margin-bottom:4px;}
.vitrine-5 .piece-meta{font-size:0.58rem; padding-top:8px;}

/* ---------- Editorial band ---------- */
.editorial{background:var(--ink); color:var(--bone); text-align:center; padding:min(20vh,220px) 8vw; position:relative;}
.editorial .rule{width:70px; height:2px; background:var(--red); margin:0 auto 40px;}
.editorial blockquote{
  font-family:'Bodoni Moda',serif;
  font-style:italic; font-weight:400;
  font-size:clamp(1.8rem,4.4vw,3.4rem);
  line-height:1.28;
  max-width:20ch;
  margin:0 auto 36px;
}
.editorial cite{font-family:'JetBrains Mono',monospace; font-style:normal; font-size:0.7rem; color:var(--silver);}

/* ---------- Categories ---------- */
.categories{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.cat{
  padding:60px 26px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  min-height:340px;
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden;
  transition:background .35s ease, color .35s ease;
}
.cat:last-child{border-right:none;}
.cat::before{
  content:"";
  position:absolute; inset:0;
  background:var(--ink);
  transform:translateY(101%);
  transition:transform .45s cubic-bezier(.16,1,.3,1);
  z-index:0;
}
.cat:hover::before{transform:translateY(0);}
.cat span, .cat h3, .cat svg{position:relative; z-index:1;}
.cat .tag{font-size:0.68rem; color:var(--red);}
.cat h3{font-family:'Bodoni Moda',serif; font-size:1.7rem; font-weight:500; margin-top:26px; transition:color .35s ease;}
.cat:hover h3, .cat:hover .tag{color:var(--bone);}
.cat .cat-icon{width:46px; height:46px; margin-top:20px; opacity:0.85;}
.cat .cat-icon path, .cat .cat-icon circle{transition:stroke .35s ease;}
.cat:hover .cat-icon path, .cat:hover .cat-icon circle{stroke:var(--bone);}

/* ---------- Certificate / newsletter ---------- */
.cert-wrap{display:flex; justify-content:center;}
.certificate{max-width:640px; width:100%; border:1.5px solid var(--ink); border-radius:var(--radius); padding:60px 50px; position:relative; text-align:center;}
.certificate::before, .certificate::after{content:""; position:absolute; width:14px;height:14px; border:1.5px solid var(--ink);}
.certificate::before{top:10px;left:10px;border-right:none;border-bottom:none;}
.certificate::after{bottom:10px;right:10px;border-left:none;border-top:none;}
.certificate .mark-lg{width:54px;height:54px;margin:0 auto 24px;}
.certificate .mark-lg .custom-logo-link img{width:100%;height:100%;object-fit:contain;}
.certificate .tag{font-size:0.68rem;color:var(--red);display:block;margin-bottom:18px;}
.certificate h3{font-family:'Bodoni Moda',serif; font-size:2rem; font-weight:500; margin-bottom:14px;}
.certificate p{font-size:0.9rem; color:rgba(13,13,13,0.65); max-width:38ch; margin:0 auto 34px; line-height:1.5;}
.cert-form{display:flex; border-bottom:1px solid var(--ink); padding-bottom:10px; max-width:420px; margin:0 auto;}
.cert-form input{flex:1; border:none; background:transparent; font-family:'JetBrains Mono',monospace; font-size:0.8rem; outline:none; color:var(--ink);}
.cert-form input::placeholder{color:rgba(13,13,13,0.4);}
.cert-form button{background:none;border:none;cursor:pointer; font-family:'JetBrains Mono',monospace; font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; display:flex; align-items:center; gap:6px;}
.cert-form button svg{width:14px;height:14px;}
.cert-note{margin-top:22px; font-size:0.62rem; color:rgba(13,13,13,0.4);}

/* ---------- Blog / archive ---------- */
.blog-intro{max-width:52ch; font-size:0.95rem; line-height:1.55; color:rgba(13,13,13,0.65); margin-top:-40px; margin-bottom:60px;}
.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.blog-card{background:var(--bone);}
.blog-card-link{display:block; padding:24px 22px 28px; height:100%;}
.blog-card-thumb{aspect-ratio:1/0.75; overflow:hidden; margin-bottom:22px; background:var(--line); border-radius:var(--radius-sm);}
.blog-card-thumb img{width:100%;height:100%;object-fit:cover; transition:transform .5s cubic-bezier(.16,1,.3,1);}
.blog-card:hover .blog-card-thumb img{transform:scale(1.06);}
.blog-card-meta{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.blog-card-date{font-size:0.62rem; color:rgba(13,13,13,0.45);}
.blog-card-cat{font-size:0.6rem; color:var(--red); border:1px solid var(--red); padding:3px 8px;}
.blog-card h2{font-family:'Bodoni Moda',serif; font-size:1.35rem; font-weight:500; margin-bottom:12px; line-height:1.2;}
.blog-card p{font-size:0.9rem; color:rgba(13,13,13,0.6); line-height:1.55; margin-bottom:18px;}
.blog-card-more{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono',monospace; font-size:0.65rem;
  letter-spacing:0.06em; text-transform:uppercase;
  padding-top:14px; border-top:1px solid var(--line); width:100%;
}
.blog-card-more svg{width:12px;height:12px; transition:transform .25s ease;}
.blog-card:hover .blog-card-more svg{transform:translateX(4px);}

.pagination{display:flex; gap:16px; margin-top:60px; font-size:0.7rem;}
.pagination .page-numbers{padding:8px 14px; border:1px solid var(--line); border-radius:var(--radius-sm);}
.pagination .page-numbers.current{background:var(--ink); color:var(--bone); border-color:var(--ink);}

/* ---------- Entrada individual de blog ---------- */
.single-post-meta{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  font-size:0.68rem; color:rgba(13,13,13,0.5);
  margin-bottom:30px; padding-bottom:26px; border-bottom:1px solid var(--line);
}
.single-post-meta .blog-card-cat{font-size:0.6rem;}
.back-to-blog{
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.68rem; color:rgba(13,13,13,0.55);
  margin-bottom:34px;
}
.back-to-blog svg{width:12px;height:12px;}
.related-posts{margin-top:100px; border-top:1px solid var(--line); padding-top:50px;}
.related-posts h3{font-family:'Bodoni Moda',serif; font-size:1.6rem; font-weight:500; margin-bottom:34px;}

/* ---------- Page / single content typography ---------- */
.entry-content{font-size:1.02rem; line-height:1.7; color:rgba(13,13,13,0.85);}
.entry-content h2, .entry-content h3{font-family:'Bodoni Moda',serif; margin:1.6em 0 0.6em; font-weight:500;}
.entry-content p{margin-bottom:1.2em;}
.entry-content a{color:var(--red); text-decoration:underline;}
.single-thumb{margin-bottom:40px;}

/* ---------- Footer ---------- */
footer{background:var(--ink); color:var(--bone); padding:80px 5vw 30px;}
.footer-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:60px; border-bottom:1px solid var(--line-bone);}
.footer-brand .logo{color:var(--bone);}
.footer-brand p{margin-top:18px; font-size:0.85rem; color:var(--silver); max-width:30ch; line-height:1.55;}
.footer-col .tag{font-size:0.65rem; color:var(--red); display:block; margin-bottom:16px;}
.footer-col ul{list-style:none;}
.footer-col li{margin-bottom:10px;}
.footer-col a{font-size:0.85rem; color:var(--silver); transition:color .2s ease;}
.footer-col a:hover{color:var(--bone);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:26px; font-size:0.68rem; color:rgba(243,238,231,0.45); flex-wrap:wrap; gap:12px;}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1);}
.reveal.in{opacity:1; transform:translateY(0);}

/* ---------- Widgets (sidebar del blog) ---------- */
.widget{margin-bottom:40px;}
.widget ul{list-style:none;}
.widget li{margin-bottom:8px; font-size:0.85rem;}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hero-top{flex-direction:column-reverse; gap:30px;}
  .hero-intro{max-width:100%; margin-left:0;}
  .hero-mark{width:34vw; max-width:160px; align-self:flex-end;}
  .vitrine{grid-template-columns:repeat(2,1fr);}
  .vitrine-5{grid-template-columns:repeat(3,1fr);}
  .categories{grid-template-columns:repeat(2,1fr);}
  .cat:nth-child(2){border-right:none;}
  .footer-top{grid-template-columns:1fr 1fr;}
  .blog-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 640px){
  nav.primary-nav{
    position:fixed; top:0; right:0; height:100svh; width:72vw;
    background:var(--ink); flex-direction:column; justify-content:center;
    align-items:flex-start; gap:26px; padding:0 8vw;
    transform:translateX(100%); transition:transform .4s cubic-bezier(.16,1,.3,1);
    z-index:150;
  }
  nav.primary-nav.open{transform:translateX(0);}
  nav.primary-nav a, nav.primary-nav .cart-link{color:var(--bone); font-size:0.9rem;}
  .nav-toggle{display:flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; z-index:201; position:relative;}
  .nav-toggle span{width:22px;height:1.5px;background:var(--ink);}
  .vitrine{grid-template-columns:1fr;}
  .vitrine-5{grid-template-columns:repeat(2,1fr);}
  .categories{grid-template-columns:1fr;}
  .cat{border-right:none;}
  .footer-top{grid-template-columns:1fr;}
  .certificate{padding:44px 24px;}
  .blog-grid{grid-template-columns:1fr;}
}