:root{
  --paper:#fbf4e4;
  --red:#b3262e;
  --wine:#5a1620;
  --cream:#fff9ec;
  --ink:#2a1a1a;
  --gold:#d8a53a;
  --olive:#6b7a3a;
  --disp:'Rozha One',Georgia,serif;
  --script:'Yellowtail','Brush Script MT',cursive;
  --sans:'Karla',system-ui,sans-serif;
  --mono:'Courier Prime','Courier New',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.55}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
::selection{background:var(--gold)}
.gingham{background-color:var(--cream);background-image:linear-gradient(90deg,rgba(179,38,46,.28) 50%,transparent 50%),linear-gradient(rgba(179,38,46,.28) 50%,transparent 50%);background-size:56px 56px}
.script{font-family:var(--script);font-size:clamp(28px,3.4vw,46px);color:var(--red);line-height:1;margin-bottom:6px}
.wine .script{color:var(--gold)}
.btn{display:inline-block;background:var(--red);color:var(--cream);border:2px solid var(--red);padding:13px 30px;border-radius:40px;font-weight:700;font-size:16px;transition:.2s;margin:0 10px 10px 0;text-align:center}
.btn:hover{background:var(--wine);border-color:var(--wine)}
.btn.alt{background:transparent;color:var(--red)}
.btn.alt:hover{background:var(--red);color:var(--cream)}
.btn.sm{padding:8px 20px;font-size:15px;margin:0}
.btn.full{display:block;width:100%;margin:0}
.btn.disabled{opacity:.35;pointer-events:none}
.wine .btn.alt{color:var(--cream);border-color:var(--cream)}
.wine .btn.alt:hover{background:var(--cream);color:var(--wine)}

/* Barra centrada */
.bar{position:fixed;inset:0 0 auto 0;z-index:60;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:10px 4vw;background:var(--paper);border-bottom:3px double var(--red)}
.bar nav{display:flex;gap:30px;font-weight:700;font-size:16px;align-items:center}
.bar nav.r{justify-content:flex-end}
.bar nav a{border-bottom:2px solid transparent}
.bar nav a:hover{border-color:var(--red)}
.logo{text-align:center;line-height:1}
.logo span{font-family:var(--script);font-size:44px;color:var(--red);display:block}
.logo small{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:700}
.cartbtn{background:var(--red);color:var(--cream);border:0;border-radius:30px;padding:8px 18px;font-weight:700}
.cartbtn b{display:inline-block;background:var(--cream);color:var(--red);border-radius:20px;min-width:22px;text-align:center;margin-left:6px}
.cartbtn.bump{animation:bump .35s}
@keyframes bump{50%{transform:scale(1.15)}}

/* Hero */
.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:20px;min-height:100vh;padding:130px 4vw 80px}
.plate{background:var(--paper);border:3px double var(--red);padding:50px 44px;max-width:640px;justify-self:center;box-shadow:12px 12px 0 rgba(90,22,32,.18)}
h1{font-family:var(--disp);font-weight:400;font-size:clamp(46px,6vw,92px);line-height:.98;color:var(--wine);margin:6px 0 22px}
.lead{margin-bottom:28px;font-size:19px}
.stack{position:relative;height:min(70vh,560px)}
.stack svg{position:absolute;filter:drop-shadow(0 10px 14px rgba(90,22,32,.25));transition:transform .6s cubic-bezier(.3,1.4,.5,1)}
.stack svg:nth-child(1){left:6%;top:4%;width:62%;transform:rotate(-9deg)}
.stack svg:nth-child(2){right:0;top:22%;width:58%;transform:rotate(7deg)}
.stack svg:nth-child(3){left:20%;bottom:0;width:56%;transform:rotate(-2deg)}
.stack:hover svg:nth-child(1){transform:rotate(-14deg) translate(-10px,-6px)}
.stack:hover svg:nth-child(2){transform:rotate(12deg) translate(10px,0)}
.stack:hover svg:nth-child(3){transform:rotate(2deg) translateY(10px)}
.scallop{height:26px;background:radial-gradient(circle at 20px 0,var(--cream) 19px,transparent 20px) 0 0/40px 26px repeat-x;background-color:var(--red);margin-top:-1px;transform:scaleY(-1)}
.scallop{background:radial-gradient(circle at 20px 26px,var(--paper) 18px,transparent 19px) 0 0/40px 26px repeat-x,var(--red);transform:none;height:26px}

.sec{padding:110px 4vw 0;max-width:1500px;margin:0 auto}
.sec.wine{max-width:none;background:var(--wine);color:var(--cream);margin-top:110px;padding:100px 4vw 110px;position:relative}
.sec.wine>*{max-width:1400px;margin-left:auto;margin-right:auto}
.head{text-align:center;margin:0 auto 46px;max-width:760px}
h2{font-family:var(--disp);font-weight:400;font-size:clamp(36px,5vw,70px);line-height:1}
.sub{margin-top:14px;font-size:19px;opacity:.9}

.chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:38px}
.chip{background:transparent;border:2px solid var(--red);color:var(--red);border-radius:30px;padding:7px 22px;font-weight:700}
.chip:hover{background:rgba(179,38,46,.1)}
.chip[aria-selected="true"]{background:var(--red);color:var(--cream)}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.card{background:#fff;border:2px solid var(--ink);padding:14px 14px 18px;display:flex;flex-direction:column;gap:6px;transition:transform .3s;position:relative;border-radius:4px}
.card::before{content:"";position:absolute;inset:6px;border:1px dashed rgba(42,26,26,.35);pointer-events:none}
.card:hover{transform:rotate(-1deg) translateY(-6px)}
.card.hide{display:none}
.c-art{height:210px;display:grid;place-items:center;background:var(--bgc,#f6e9cf);margin-bottom:6px;overflow:hidden}
.c-art svg{width:64%;height:auto;transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.card:hover .c-art svg{transform:rotate(6deg) scale(1.06)}
.card h3{font-family:var(--disp);font-weight:400;font-size:28px;line-height:1;padding:0 8px}
.card p{font-size:15px;line-height:1.35;min-height:40px;padding:0 8px}
.specs{display:flex;gap:6px;flex-wrap:wrap;font-size:12px;font-weight:700;padding:0 8px}
.specs span{border:1.5px solid var(--ink);border-radius:20px;padding:0 10px}
.card .row{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding:8px 8px 0}
.card .pr{font-family:var(--disp);font-size:28px;color:var(--red)}
.card .add{background:var(--ink);color:var(--cream);border:0;border-radius:30px;padding:8px 18px;font-weight:700}
.card .add:hover{background:var(--red)}

/* Plegado */
.fold{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.fold-stage{background:var(--cream);color:var(--ink);border:3px double var(--gold);padding:24px;aspect-ratio:1;display:grid;place-items:center;position:relative;max-width:560px;width:100%;margin:0 auto}
.fold-stage svg{width:82%;height:auto}
.fold-cap{position:absolute;bottom:14px;font-family:var(--script);font-size:30px;color:var(--red)}
#foldArt polygon,#foldArt path,#foldArt line{transition:all .5s}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{background:transparent;border:2px solid var(--cream);color:var(--cream);border-radius:30px;padding:8px 20px;font-weight:700}
.opt:hover{background:rgba(255,255,255,.12)}
.opt[aria-checked="true"]{background:var(--cream);color:var(--wine)}
.steps{display:flex;gap:8px;margin:22px 0}
.steps i{flex:1;height:8px;border-radius:5px;background:rgba(255,255,255,.25);transition:.3s;cursor:pointer}
.steps i.on{background:var(--gold)}
.colors{display:flex;gap:10px;margin-bottom:22px}
.sw{width:38px;height:38px;border-radius:50%;border:3px solid var(--cream);background:var(--c);padding:0}
.sw[aria-checked="true"]{outline:3px solid var(--gold);outline-offset:3px}
.nav2{display:flex;gap:12px}
.wine .btn.sm{background:var(--gold);border-color:var(--gold);color:var(--wine)}
.wine .btn.sm.alt{background:transparent;color:var(--cream);border-color:var(--cream)}
.tip{margin-top:20px;font-size:16px;opacity:.9;max-width:44ch}

/* Calculadora */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start}
.rng{display:grid;gap:8px;font-family:var(--disp);font-size:28px;margin-bottom:26px}
.rng b{color:var(--red);font-size:56px;line-height:1}
fieldset{border:0;margin-bottom:24px}
legend{font-family:var(--disp);font-size:28px;margin-bottom:10px}
.calc .opts .opt{border-color:var(--red);color:var(--red)}
.calc .opts .opt:hover{background:rgba(179,38,46,.1)}
.calc .opts .opt[aria-checked="true"]{background:var(--red);color:var(--cream)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:30px;background:transparent}
input[type=range]::-webkit-slider-runnable-track{height:8px;background:repeating-linear-gradient(90deg,var(--red) 0 8px,transparent 8px 14px);border-radius:4px}
input[type=range]::-moz-range-track{height:8px;background:repeating-linear-gradient(90deg,var(--red) 0 8px,transparent 8px 14px)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-11px;border-radius:50%;background:var(--gold);border:3px solid var(--wine);cursor:grab}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--gold);border:3px solid var(--wine)}
.ticket{background:#fff;border:2px solid var(--ink);padding:30px 30px 26px;font-family:var(--mono);position:sticky;top:110px;box-shadow:10px 10px 0 rgba(90,22,32,.2)}
.ticket h4{font-family:var(--disp);font-weight:400;font-size:34px;text-align:center;line-height:1}
.ticket .dash,.rec .dash{border-top:2px dashed var(--ink);margin:14px 0}
.ticket .tl,.r-line{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:16px}
.ticket .tl.big{font-weight:700;font-size:24px}
.ticket .big-n{font-family:var(--disp);font-size:clamp(54px,7vw,100px);line-height:.9;text-align:center;color:var(--red);margin:10px 0 0}
.ticket .cen{text-align:center;font-size:14px;margin-bottom:12px}
.ticket .btn{margin:10px 0 0}

.acc details{border-bottom:1px solid rgba(255,249,236,.4)}
.acc details:first-child{border-top:1px solid rgba(255,249,236,.4)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:18px 0;font-family:var(--disp);font-size:26px}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"✦";color:var(--gold);transition:transform .3s}
.acc details[open] summary::after{transform:rotate(135deg)}
.acc p{padding:0 40px 18px 0;animation:fd .4s}
@keyframes fd{from{opacity:0;transform:translateY(-6px)}}
.faq-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:60px;align-items:start}
.faq-grid .head{text-align:left}

.contact{max-width:none;margin-top:0;padding:100px 4vw}
.contact-in{display:grid;grid-template-columns:1fr 1fr;gap:60px;max-width:1300px;margin:0 auto}
.info{list-style:none;display:grid;gap:16px;margin-top:26px;font-family:var(--disp);font-size:28px;line-height:1.1}
.info small{display:block;font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
#form{display:grid;gap:16px;align-content:start}
label{display:grid;gap:6px;font-weight:700;font-size:15px}
input[type=text],textarea{background:#fff;border:2px solid var(--ink);border-radius:8px;padding:11px 14px;font-size:17px;outline:none;resize:none;width:100%}
input[type=text]:focus,textarea:focus{border-color:var(--red);box-shadow:0 0 0 4px rgba(179,38,46,.2)}
#form .error{border-color:var(--red)}
.msg{min-height:22px;font-weight:700}
footer{text-align:center;padding:60px 4vw 30px;border-top:3px double var(--red)}
.foot-script{font-family:var(--script);font-size:clamp(80px,16vw,220px);line-height:.9;color:var(--red);background:var(--paper);display:inline-block;padding:0 40px}

/* Modal ticket */
.modal-bg{position:fixed;inset:0;background:rgba(42,26,26,.6);z-index:80;opacity:0;pointer-events:none;transition:.3s}
.modal-bg.on{opacity:1;pointer-events:auto}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-40%) scale(.92);opacity:0;pointer-events:none;z-index:90;width:min(460px,94vw);max-height:90vh;overflow:auto;transition:.35s cubic-bezier(.3,1.4,.5,1)}
.modal.on{transform:translate(-50%,-50%);opacity:1;pointer-events:auto}
.rec{background:#fff;padding:30px 28px 24px;font-family:var(--mono);position:relative;border-top:10px solid var(--red);clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),96% 100%,92% calc(100% - 10px),88% 100%,84% calc(100% - 10px),80% 100%,76% calc(100% - 10px),72% 100%,68% calc(100% - 10px),64% 100%,60% calc(100% - 10px),56% 100%,52% calc(100% - 10px),48% 100%,44% calc(100% - 10px),40% 100%,36% calc(100% - 10px),32% 100%,28% calc(100% - 10px),24% 100%,20% calc(100% - 10px),16% 100%,12% calc(100% - 10px),8% 100%,4% calc(100% - 10px),0 100%);padding-bottom:36px}
.rec h3{font-family:var(--disp);font-weight:400;font-size:36px;text-align:center;line-height:1}
.r-sub{text-align:center;font-size:13px}
.x{position:absolute;right:12px;top:14px;background:none;border:0;font-size:20px}
.r-item{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:6px 0;font-size:15px}
.r-item small{grid-column:1/3;opacity:.7;font-size:13px}
.qty{display:inline-flex;gap:10px;align-items:center}
.qty button{width:24px;height:24px;border:1.5px solid var(--ink);background:transparent;font-weight:700;line-height:1}
.qty button:hover{background:var(--gold)}
.r-line.big{font-weight:700;font-size:22px;margin-top:4px}
.r-note{font-size:13px;text-align:center;margin:10px 0 14px}
.clear{display:block;margin:10px auto 0;background:none;border:0;text-decoration:underline;font-family:var(--mono);font-size:13px}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,140px);background:var(--wine);color:var(--cream);padding:11px 26px;border-radius:40px;font-weight:700;z-index:100;transition:transform .35s cubic-bezier(.3,1.5,.5,1);white-space:nowrap;border:2px solid var(--gold)}
.toast.show{transform:translate(-50%,0)}
.rv{opacity:0;transform:translateY(30px);transition:opacity .7s,transform .7s}
.rv.in{opacity:1;transform:none}

@media(max-width:1100px){
  .bar nav a{display:none}
  .bar{grid-template-columns:auto 1fr}
  .bar nav.l{display:none}
  .logo{text-align:left}
  .hero{grid-template-columns:1fr;min-height:0}
  .stack{height:420px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .fold,.calc,.faq-grid,.contact-in{grid-template-columns:1fr}
  .ticket{position:static}
}
@media(max-width:620px){
  .grid{grid-template-columns:1fr}
  .plate{padding:34px 22px}
  .info{font-size:22px}
  .gingham{background-size:40px 40px}
}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
