:root{
  --ox:#3B0F1A; --ox2:#4D1624; --bone:#EADFC8; --thread:#5C8DFF; --tab:#C47A33;
  --serif:"Young Serif",Georgia,serif; --sans:Karla,"Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--ox);color:var(--bone);font:1.05rem/1.6 var(--sans);overflow-x:hidden}
:focus-visible{outline:3px solid var(--thread);outline-offset:3px}
a{color:inherit}
/* la costura: el motivo que organiza toda la página */
.stitch{border:2px dashed var(--thread)}

.bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:1rem clamp(1rem,4vw,3rem);
  position:sticky;top:0;z-index:5;background:var(--ox);border-bottom:2px dashed var(--thread)}
.mark{font-family:var(--serif);font-size:1.5rem;text-decoration:none}
.bar nav{display:flex;gap:1.8rem}
.bar nav a{text-decoration:none;opacity:.85}.bar nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:6px}
.bag{justify-self:end;font:inherit;font-weight:700;color:var(--ox);background:var(--bone);border:0;padding:.5rem 1rem;border-radius:99px;cursor:pointer}
.bag:hover{background:var(--tab)}

section{padding:5rem clamp(1rem,5vw,4rem);max-width:1200px;margin:0 auto}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.05}
h1{font-size:clamp(2.6rem,7vw,5.6rem);text-align:center}
h2{font-size:clamp(2rem,4.5vw,3.3rem);margin-bottom:2.5rem}
h3{font-size:1.5rem;margin-bottom:.6rem}

/* hero */
.hero{text-align:center;padding-top:4rem}
.sub{max-width:44ch;margin:1.4rem auto 0;opacity:.85}
.stage{margin:3rem auto 1.5rem;width:min(520px,100%);padding:3rem 1rem;border:2px dashed var(--thread);border-radius:200px 200px 24px 24px;background:var(--ox2)}
.wallet-btn{background:none;border:0;cursor:pointer;display:block;margin:0 auto;width:100%}
.wallet-btn svg{width:100%;height:auto;display:block;overflow:visible}
.cardA,.cardB{transition:transform .6s cubic-bezier(.3,1.3,.5,1)}
.open .cardA{transform:translateY(-70px)}
.open .cardB{transform:translateY(-38px)}
.flap{transition:transform .5s ease;transform-origin:50% 0}
.open .flap{transform:scaleY(.18)}
.swatches{display:flex;gap:.9rem;justify-content:center}
.swatches button{width:44px;height:44px;border-radius:50%;border:3px solid var(--ox);outline:2px solid var(--bone);cursor:pointer}
.swatches button[aria-checked="true"]{outline:3px dashed var(--thread);outline-offset:4px}
.skin{margin-top:1rem;font-family:var(--serif);font-size:1.3rem}

/* colección */
.head{display:flex;justify-content:space-between;align-items:end;gap:1rem}
.head h2{max-width:16ch}
.arrows{display:flex;gap:.6rem;margin-bottom:2.5rem}
.arrows button{width:48px;height:48px;border-radius:50%;border:2px dashed var(--thread);background:none;color:var(--bone);font-size:1.6rem;cursor:pointer;line-height:1}
.arrows button:hover{background:var(--bone);color:var(--ox)}
.rail{display:flex;gap:1.4rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem;scrollbar-width:thin}
.item{flex:0 0 min(300px,80%);scroll-snap-align:start;border:2px dashed var(--thread);padding:1.4rem;border-radius:14px;display:flex;flex-direction:column;gap:.5rem}
.item .pic{background:var(--ox2);border-radius:8px;padding:1.5rem 1rem}
.item .pic svg{width:100%;display:block}
.item h3{margin:.8rem 0 0}
.item p{opacity:.8;font-size:.98rem;flex:1}
.item .buy{display:flex;justify-content:space-between;align-items:center;margin-top:.6rem}
.price{font-family:var(--serif);font-size:1.5rem}
.item button{font:inherit;font-weight:700;background:var(--tab);color:var(--ox);border:0;border-radius:99px;padding:.55rem 1.1rem;cursor:pointer}
.item button:hover{background:var(--bone)}

/* taller */
.cols{display:grid;grid-template-columns:repeat(3,1fr)}
.cols article{padding:0 2rem;border-left:2px dashed var(--thread)}
.cols article:first-child{padding-left:0;border-left:0}
.cols p{opacity:.85;max-width:32ch}

/* cuidado */
.faq{max-width:720px}
details{border-top:2px dashed var(--thread);padding:1.1rem 0}
details:last-child{border-bottom:2px dashed var(--thread)}
summary{cursor:pointer;font-family:var(--serif);font-size:1.3rem;list-style:none;display:flex;justify-content:space-between}
summary::after{content:"+";transition:transform .25s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin-top:.7rem;opacity:.85;max-width:58ch}

footer{border-top:2px dashed var(--thread);padding:3rem clamp(1rem,5vw,4rem);display:flex;justify-content:space-between;flex-wrap:wrap;gap:2rem;align-items:end}
#news{max-width:420px;width:100%}
#news label{font-family:var(--serif);font-size:1.4rem;display:block;margin-bottom:.7rem}
.row{display:flex;gap:.5rem}
.row input{flex:1;font:inherit;padding:.7rem 1rem;border-radius:99px;border:2px solid var(--bone);background:transparent;color:var(--bone);min-width:0}
.row input[aria-invalid="true"]{border-color:#FF8A70}
.row button{font:inherit;font-weight:700;background:var(--bone);color:var(--ox);border:0;border-radius:99px;padding:.7rem 1.2rem;cursor:pointer}
#newsMsg{min-height:1.6em;margin-top:.5rem;font-size:.95rem}
.small{opacity:.7;font-size:.95rem}

.toast{position:fixed;left:50%;bottom:1.5rem;transform:translate(-50%,150%);background:var(--bone);color:var(--ox);
  padding:.8rem 1.4rem;border-radius:99px;font-weight:700;transition:transform .35s ease;z-index:9}
.toast.on{transform:translate(-50%,0)}

@media(max-width:760px){
  .bar{grid-template-columns:1fr auto}.bar nav{display:none}
  .cols{grid-template-columns:1fr;gap:2rem}
  .cols article{padding:0 0 0 1.2rem;border-left:2px dashed var(--thread)!important}
  .arrows{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}.cardA,.cardB,.flap,.toast,summary::after{transition:none}
}