:root{
  --paper:#D9C8A6; --card:#F7F0DE; --ink:#1C2541; --red:#C8342B; --pine:#2F5D3A; --tape:rgba(255,232,140,.75);
  --t:"Special Elite","Courier New",monospace; --b:"Courier Prime","Courier New",monospace; --h:Caveat,"Segoe Script",cursive;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background-color:var(--paper);color:var(--ink);font:400 1.05rem/1.6 var(--b);overflow-x:hidden;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/><feColorMatrix values='0 0 0 0 .3 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .2 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>")}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
h1,h2,h3,.logo,.btn,.stamp{font-family:var(--t);font-weight:400}
a{color:inherit}

.bar{display:flex;justify-content:space-between;align-items:center;padding:.9rem clamp(1rem,4vw,3rem);border-bottom:3px double var(--ink);position:sticky;top:0;background:#D9C8A6ee;backdrop-filter:blur(4px);z-index:10}
.logo{font-size:1.5rem;text-decoration:none;letter-spacing:.08em;display:flex;flex-direction:column;line-height:1.1}
.logo small{font:400 .7rem var(--b);letter-spacing:.12em;text-transform:uppercase}
.bar nav{display:flex;gap:2rem}
.bar nav a{text-decoration:none;border-bottom:2px dotted var(--ink)}
.bar nav a:hover{background:var(--ink);color:var(--card)}
.tick{background:var(--card);border:2px solid var(--ink);padding:.3rem 1rem;text-decoration:none;font-family:var(--t);transform:rotate(1.5deg)}
.tick b{background:var(--red);color:#fff;padding:0 .5rem;margin-left:.3rem}

section{padding:4.5rem clamp(1rem,5vw,4rem);max-width:1260px;margin:0 auto}
h2{font-size:clamp(2.2rem,6vw,4.4rem);line-height:1;margin-bottom:1rem;text-transform:uppercase;letter-spacing:-.02em}
.lead{margin-bottom:2.4rem;max-width:44ch}

.btn{display:inline-block;background:var(--ink);color:var(--card);border:0;padding:.85rem 1.5rem;font-size:1.05rem;text-decoration:none;cursor:pointer;letter-spacing:.04em;box-shadow:4px 4px 0 var(--red)}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--red)}

/* tarjetas de espécimen */
.card{background:var(--card);padding:1.4rem 1.4rem 1.2rem;position:relative;box-shadow:0 10px 18px rgba(60,40,10,.28);display:flex;flex-direction:column;gap:.3rem}
.card::before{content:"";position:absolute;top:-14px;left:50%;width:96px;height:30px;transform:translateX(-50%) rotate(-3deg);background:var(--tape);box-shadow:0 1px 3px rgba(0,0,0,.15);clip-path:polygon(0 8%,4% 0,8% 10%,12% 0,100% 0,96% 50%,100% 100%,0 100%,4% 50%)}
.pic{display:flex;align-items:flex-end;justify-content:center;min-height:300px;border-bottom:2px solid var(--ink);padding-bottom:.4rem}
.pic svg{width:auto;display:block;overflow:visible;filter:drop-shadow(2px 3px 0 rgba(40,30,10,.22))}
.latin{font:400 1.5rem var(--t);font-style:italic;margin-top:.7rem;line-height:1.1}
.small{font-size:.92rem}
.stamp{position:absolute;right:-.6rem;bottom:3.2rem;border:4px double var(--red);color:var(--red);padding:.3rem .9rem;transform:rotate(-12deg);text-transform:uppercase;letter-spacing:.1em;font-size:1.05rem;mix-blend-mode:multiply;opacity:.88;background:rgba(247,240,222,.4)}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center;padding-top:3.5rem;min-height:84vh}
.file{font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;border:2px solid var(--ink);display:inline-block;padding:.15rem .7rem}
h1{font-size:clamp(3.6rem,11vw,9rem);line-height:.9;margin:1.2rem 0;letter-spacing:-.04em;text-transform:uppercase;color:var(--pine)}
.type{min-height:3.4em;max-width:40ch;margin-bottom:1.6rem;font-size:1.15rem}
.type::after{content:"▌";animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hero-card{position:relative;padding:1rem}
.tilt{transform:rotate(3deg)}.tilt2{transform:rotate(-1.6deg)}.tilt3{transform:rotate(1.4deg)}
.note{font:700 1.7rem var(--h);position:absolute;left:-2.2rem;top:1rem;transform:rotate(-8deg);width:8.5rem;line-height:1;z-index:3}
.note svg{display:block;margin:.2rem 0 0 4rem}

/* tiempo */
.versus{display:grid;grid-template-columns:1fr auto 1fr;gap:1.4rem;align-items:center}
.versus h3{font-size:1.5rem;text-transform:uppercase}
.vs{font:400 2rem var(--t);background:var(--red);color:#fff;border-radius:50%;width:68px;height:68px;display:grid;place-items:center;transform:rotate(-8deg);z-index:2}
dl{margin-top:.5rem}
dl div{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px dotted var(--ink);padding:.25rem 0}
dd{font-weight:700}
.timebar{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap;margin-top:3rem;background:var(--card);padding:1.2rem 1.6rem;box-shadow:0 8px 16px rgba(60,40,10,.25)}
.timebar label{font-family:var(--t);font-size:1.3rem;min-width:13ch}
.timebar b{color:var(--red)}
input[type=range]{flex:1;min-width:200px;accent-color:var(--red);height:30px}
.verdict{font:700 1.8rem var(--h);margin-top:1.4rem;min-height:2.2em;max-width:44ch}

/* catálogo */
.cat-grid{display:grid;grid-template-columns:1fr 320px;gap:2.4rem;align-items:start}
.specs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2.4rem 1.6rem;padding-top:1rem}
.spec{transition:transform .25s}
.spec:nth-child(6n+1){transform:rotate(-1.5deg)}.spec:nth-child(6n+2){transform:rotate(1deg) translateY(14px)}
.spec:nth-child(6n+3){transform:rotate(-.6deg)}.spec:nth-child(6n+4){transform:rotate(1.8deg)}
.spec:nth-child(6n+5){transform:rotate(-1deg) translateY(10px)}.spec:nth-child(6n){transform:rotate(.7deg)}
.spec:hover{transform:rotate(0) translateY(-6px)}
.spec .pic{min-height:320px}
.spec .no{font-size:.8rem;letter-spacing:.16em}
.spec .common{font:700 1.5rem var(--h);line-height:1}
.spec dl{font-size:.92rem}
.spec .row{display:flex;justify-content:space-between;align-items:center;margin-top:.6rem}
.spec .price{font:400 1.5rem var(--t)}
.spec .btn{font-size:.9rem;padding:.5rem .9rem;box-shadow:3px 3px 0 var(--red)}

.receipt{background:#fff;padding:1.4rem 1.3rem 2.2rem;position:sticky;top:90px;box-shadow:0 10px 20px rgba(60,40,10,.3);font-size:.95rem;
  --z:linear-gradient(135deg,transparent 75%,#fff 75%) 0 0/14px 14px,linear-gradient(45deg,transparent 75%,#fff 75%) 0 0/14px 14px}
.receipt::after{content:"";position:absolute;left:0;right:0;bottom:-14px;height:14px;background:var(--z);transform:rotate(180deg);background-color:transparent}
.receipt h3{text-align:center;font-size:1.7rem;letter-spacing:.3em}
.r-date{text-align:center;font-size:.82rem;margin-bottom:.8rem;border-bottom:2px dashed var(--ink);padding-bottom:.6rem}
.receipt ul{list-style:none;padding:0}
.receipt li{display:flex;gap:.4rem;align-items:baseline;padding:.2rem 0}
.receipt li .nm{flex:1;border-bottom:1px dotted var(--ink)}
.receipt li button{background:none;border:0;color:var(--red);font:700 1rem var(--b);cursor:pointer}
.r-empty{font-style:italic;padding:.6rem 0}.r-empty[hidden]{display:none}
.r-tot{display:flex;justify-content:space-between;border-top:2px dashed var(--ink);margin-top:.6rem;padding-top:.6rem;font-size:1.2rem}
form{margin-top:1rem;display:flex;flex-direction:column;gap:.7rem}
label{display:flex;flex-direction:column;gap:.2rem;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em}
input:not([type=range]){font:inherit;font-size:1rem;text-transform:none;letter-spacing:0;border:0;border-bottom:2px solid var(--ink);background:#F5F1E6;padding:.4rem .5rem;color:var(--ink)}
input[aria-invalid="true"]{border-bottom-color:var(--red);background:#FCE3DF}
small{color:var(--red);min-height:1.1em;text-transform:none;letter-spacing:0}
#ok{font-weight:700;min-height:1.4em}

.mats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.mats div{border-top:4px double var(--ink);padding-top:1rem}
.mats b{font:400 clamp(3rem,7vw,5.4rem)/1 var(--t);color:var(--pine);display:block}
.mats span{display:block;max-width:22ch}
footer{border-top:3px double var(--ink);padding:1.6rem clamp(1rem,5vw,4rem);font-size:.92rem}

@media(max-width:900px){
  .bar nav{display:none}
  .hero,.cat-grid,.mats{grid-template-columns:1fr}
  .versus{grid-template-columns:1fr}.vs{justify-self:center}
  .receipt{position:static}
  .note{left:0;top:-1rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}.type::after{animation:none}*{transition:none!important}
}