/* Uvamejai · tarjetas de piezas, ficha de detalle y el boceto que nace (portada, tienda y cotizador). */

/* ---------- tarjeta de pieza ---------- */
.pieza{position:relative;display:flex;flex-direction:column}
.js .pieza.revelar{transition-delay:calc(var(--i,0) * 70ms)}
.pieza-foto{
  position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;background:var(--ciruela-2);
  aspect-ratio:3/4;border-radius:var(--arco);overflow:hidden;
  box-shadow:0 0 0 1px var(--linea),0 30px 60px -34px rgba(0,0,0,.8);
  transition:box-shadow .4s ease,transform .5s var(--curva)
}
.pieza-foto img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--curva),filter .5s ease}
.pieza:hover .pieza-foto{box-shadow:0 0 0 1px rgba(227,178,76,.6),0 0 0 7px rgba(20,11,27,.9),0 0 0 8px rgba(227,178,76,.25),0 34px 60px -30px rgba(0,0,0,.85)}
.pieza:hover .pieza-foto img{transform:scale(1.05)}
.pieza-dibujo{position:absolute;inset:0;display:grid;place-items:center;padding:16%;
  background:radial-gradient(70% 55% at 50% 42%,rgba(122,59,156,.45),transparent 75%),linear-gradient(180deg,var(--ciruela-2),var(--ciruela))}
.pieza-dibujo .ilustracion{width:100%;max-height:100%;filter:drop-shadow(0 0 16px rgba(227,178,76,.25))}
.pieza-pendiente{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-family:var(--mano);font-size:14px;color:var(--crema-suave)}
.pieza-unica,.pieza-sello{
  position:absolute;top:18%;right:0;font:600 10.5px/1 var(--texto);letter-spacing:.14em;text-transform:uppercase;
  padding:7px 12px 7px 10px;border-radius:999px 0 0 999px;background:rgba(20,11,27,.78);color:var(--oro);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)
}
/* ya encontró su hogar: la foto conserva su color, una luz cálida de casa y un hada que la cobija */
.pieza-hogar{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 60% at 50% 0%,rgba(255,214,130,.34),transparent 65%),linear-gradient(180deg,transparent 55%,rgba(20,11,27,.55))}
.pieza-hogar .hada{position:absolute;right:5%;top:4%;width:40%;max-width:140px;color:#f6d68a;filter:drop-shadow(0 0 10px rgba(255,214,130,.8))}
.pieza-hogar .hada-ala{fill:rgba(255,236,190,.22);transform-box:fill-box;transform-origin:100% 60%;animation:aleteo 2.4s ease-in-out infinite}
.pieza-hogar .hada-ala-d{transform-origin:0% 60%;animation-delay:-.2s}
.pieza-hogar .hada-chispa{fill:#fff3cf;animation:chispea 1.8s ease-in-out infinite}
@keyframes aleteo{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.82)}}
@keyframes chispea{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.pieza-hogar .hada-ala,.pieza-hogar .hada-chispa{animation:none}}
.pieza-sello{position:absolute;left:50%;bottom:14px;top:auto;right:auto;transform:translateX(-50%) rotate(-3deg);white-space:nowrap;
  background:rgba(255,246,222,.95);color:var(--tinta);font-family:var(--pluma);font-size:19px;letter-spacing:0;text-transform:none;font-weight:500;border-radius:999px;padding:5px 16px 6px;box-shadow:0 8px 24px -6px rgba(255,214,130,.6)}
.pieza.vendida .pieza-foto img{filter:saturate(.95) brightness(.96)}
.pieza-vive{font-family:var(--pluma);font-size:18px;font-weight:500;color:var(--plata)}
.pieza-edad{font-family:var(--pluma);font-size:16px;color:var(--crema-suave);margin:2px 0 0}
.pieza-texto{padding:16px 54px 0 4px}
.pieza-categoria{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--crema-suave);margin:0 0 4px}
.pieza h3{font-size:1.28rem;line-height:1.2;margin-bottom:4px}
.pieza h3 button{all:unset;cursor:pointer}
.pieza h3 button:hover{color:var(--oro)}
.pieza h3 button:focus-visible{outline:2px solid var(--oro);outline-offset:3px;border-radius:4px}
.pieza-precio{font-weight:600;color:var(--oro);margin:0}
.pieza-precio s{color:var(--crema-suave);font-weight:400}
.pieza-agregar{
  position:absolute;right:0;bottom:4px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:var(--oro);color:var(--tinta);border:0;box-shadow:0 10px 24px -10px rgba(227,178,76,.7);transition:transform .25s var(--curva),background-color .25s
}
.pieza-agregar svg{width:21px;height:21px}
.pieza-agregar:hover{transform:scale(1.08) rotate(-6deg)}
.pieza-agregar.en-canasta{background:var(--ciruela-3);color:var(--oro);box-shadow:inset 0 0 0 1.5px var(--oro)}
.chispa{position:fixed;z-index:130;width:22px;height:22px;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,#fff6d8 0 20%,var(--oro) 40%,rgba(227,178,76,0) 70%);box-shadow:0 0 22px 6px rgba(227,178,76,.6)}

/* ---------- ficha de una pieza ---------- */
.detalle-pieza{
  width:min(100%,980px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  background:var(--ciruela);border:1px solid var(--linea);box-shadow:0 40px 120px -30px rgba(0,0,0,.9)
}
.detalle-galeria{padding:18px;display:flex;flex-direction:column;gap:10px;min-width:0}
.detalle-grande{position:relative;aspect-ratio:3/4;border-radius:18px 18px 18px 18px;overflow:hidden;background:var(--ciruela-2)}
.detalle-grande img{width:100%;height:100%;object-fit:cover;animation:aparece .5s ease}
@keyframes aparece{from{opacity:.3}to{opacity:1}}
.detalle-miniaturas{display:flex;gap:8px}
.detalle-miniaturas button{width:64px;height:76px;padding:0;border-radius:10px;overflow:hidden;border:2px solid transparent;cursor:pointer;background:none;opacity:.6;transition:opacity .2s,border-color .2s}
.detalle-miniaturas button[aria-current]{border-color:var(--oro);opacity:1}
.detalle-miniaturas img{width:100%;height:100%;object-fit:cover}
.detalle-texto{padding:clamp(22px,3.4vw,44px) clamp(20px,3vw,40px) 30px 12px;display:flex;flex-direction:column}
.detalle-texto h2{font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.05;margin:2px 0 10px;padding-right:44px}
.detalle-precio{font-family:var(--display);font-size:1.8rem;color:var(--oro);margin-bottom:18px}
.detalle-precio small{font-family:var(--texto);font-size:13px;letter-spacing:.1em;color:var(--crema-suave)}
.detalle-historia{font-family:var(--display);font-style:italic;font-weight:300;font-size:1.15rem;line-height:1.45;color:var(--crema)}
.detalle-datos{margin:6px 0 24px;display:grid;gap:12px;font-size:14.5px}
.detalle-datos div{display:grid;grid-template-columns:90px 1fr;gap:12px;border-top:1px solid var(--linea);padding-top:12px}
.detalle-datos dt{color:var(--plata);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding-top:2px}
.detalle-datos dd{margin:0;color:var(--crema-suave)}
.detalle-botones{display:grid;gap:10px;margin-top:auto}
.detalle-seguro{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;color:var(--crema-suave);margin:14px 0 0}
.detalle-seguro svg{width:16px;height:16px}
.detalle-vendida{font-family:var(--mano);color:var(--oro);font-size:18px}
.detalle-envio{font-size:13.5px;color:var(--crema-suave);margin:0 0 20px}
/* la ficha de nacimiento: como el acta de un ser que acaba de nacer */
.acta{position:relative;margin:4px 0 18px;padding:16px 20px 14px;border-radius:16px;transform:rotate(-.6deg)}
.acta-titulo{font-size:17px;color:var(--oro-hondo);margin:0 0 6px}
.acta-datos{margin:0;display:grid;gap:7px}
.acta-datos div{display:grid;grid-template-columns:82px 1fr;gap:10px;align-items:baseline;border-top:1px dashed var(--linea-tinta);padding-top:7px}
.acta-datos dt{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-suave)}
.acta-datos dd{margin:0;font-family:var(--pluma);font-size:18px;line-height:1.2;color:var(--tinta)}
.acta-datos dd small{display:block;font-family:var(--texto);font-size:12px;color:var(--uva)}
.acta-sello{position:absolute;right:14px;top:10px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:18px;color:#fff3cf;
  background:radial-gradient(circle at 35% 30%,#a64fd0,#5b2477 70%);box-shadow:inset 0 0 0 3px rgba(255,255,255,.18),0 4px 10px rgba(35,23,42,.35);transform:rotate(12deg)}
@media (max-width:760px){
  .detalle-pieza{grid-template-columns:1fr}
  .detalle-texto{padding:6px 20px 26px}
  .detalle-grande{aspect-ratio:4/4.2}
}

/* ---------- el boceto que nace ---------- */
.boceto{width:100%;height:100%;overflow:visible}
.boceto-pieza{transform-origin:150px 300px;transform-box:view-box;transition:transform .6s var(--curva)}
.boceto-cuerpo{opacity:.14;transition:opacity .8s ease}
.boceto.con-color .boceto-cuerpo{opacity:1}
.boceto-espejo{opacity:.9}
.boceto.dibuja .boceto-trazos{stroke-dasharray:1;stroke-dashoffset:1;animation:dibujar 1.5s cubic-bezier(.4,0,.2,1) forwards}
@keyframes dibujar{to{stroke-dashoffset:0}}
.boceto-glifo{transform-box:fill-box;transform-origin:center}
.boceto-glifo.nuevo{animation:brota .7s cubic-bezier(.3,1.5,.5,1) both}
@keyframes brota{from{opacity:0;transform:scale(.2) rotate(-25deg)}to{opacity:1;transform:none}}
.boceto-destello{transform-box:fill-box;transform-origin:center;opacity:0;animation:destello .9s ease-out both}
@keyframes destello{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(2.4)}}
.boceto-nombre{font-family:var(--pluma);font-weight:500}
.boceto-nombre.nuevo{animation:escribe .8s ease both}
@keyframes escribe{from{opacity:0;letter-spacing:.3em}to{opacity:1;letter-spacing:0}}
.boceto-vacio{height:100%;display:grid;place-items:center;align-content:center;gap:6px;text-align:center}
.boceto-vacio svg{width:62%;max-height:78%}
.boceto-vacio p{font-family:var(--mano);color:var(--oro-hondo);font-size:17px;margin:0}