:root{
  --bg:#D3EAD0; --ink:#12261D; --wood:#C9984F; --wood-d:#8A5F22; --flag:#E4452B; --paper:#F2FAEF;
  --f:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:var(--f);background:var(--bg);color:var(--ink);line-height:1.55;font-size:1.0625rem;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:3px solid var(--flag);outline-offset:3px}

/* regla de progreso */
.ruler{position:fixed;left:0;top:0;bottom:0;width:22px;z-index:5;
  background:repeating-linear-gradient(to bottom,var(--ink) 0 1px,transparent 1px 10px);
  background-size:8px 100%;background-repeat:repeat-y;border-right:1px solid var(--ink)}
.ruler-fill{position:absolute;left:0;top:0;width:100%;height:0;background:var(--wood);mix-blend-mode:multiply;opacity:.85}

.top{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 2rem 1.2rem 3.5rem;position:relative;z-index:4}
.logo{font-weight:800;font-size:1.6rem;letter-spacing:-.04em;text-decoration:none}
.top nav{display:flex;gap:1.5rem}
.top nav a{text-decoration:none;border-bottom:2px solid transparent}
.top nav a:hover{border-color:var(--flag)}

main,footer{padding-left:3.5rem;padding-right:2rem}
section{max-width:1100px;margin:0 auto;padding:6rem 0}
h1{font-weight:800;font-size:clamp(3.4rem,13vw,10.5rem);line-height:.88;letter-spacing:-.055em;position:relative;z-index:2}
h2{font-weight:800;font-size:clamp(2rem,5vw,3.6rem);letter-spacing:-.04em;line-height:1;margin-bottom:2.5rem;max-width:14ch}

/* hero */
.hero{position:relative;min-height:88vh;padding-top:2rem}
.hero-pick{position:absolute;right:8%;top:-60px;z-index:3;transform:rotate(14deg);transform-origin:50% 0;
  transition:transform .15s ease-out;pointer-events:none;animation:drop 1.1s cubic-bezier(.2,.9,.3,1.1) both}
.hero-pick svg{max-width:none;filter:drop-shadow(10px 14px 0 rgba(18,38,29,.18))}
@keyframes drop{from{transform:translateY(-110%) rotate(14deg)}}
.hero-copy{max-width:34ch;margin:2.5rem 0 1.8rem;font-size:1.25rem}
.btn{display:inline-block;background:var(--ink);color:var(--paper);font:inherit;font-weight:500;padding:.9rem 1.6rem;
  border:0;border-radius:0 40px 40px 0;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,0 100%);
  padding-right:2.6rem;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--flag)}

/* taller */
.taller{background:var(--paper);max-width:none;margin:0 -2rem 0 -3.5rem;padding:6rem 2rem 6rem 3.5rem}
.taller>*{max-width:1100px;margin-left:auto;margin-right:auto}
.taller-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:3rem;align-items:center}
.stage{border:2px solid var(--ink);padding:2.5rem 1.5rem 1.2rem;background:
  repeating-linear-gradient(90deg,transparent 0 9px,rgba(18,38,29,.18) 9px 10px)}
.stage svg{width:100%;height:auto;display:block;overflow:visible}
.mm{text-align:right;font-weight:800;font-size:2.4rem;letter-spacing:-.04em;margin-top:.5rem}
.mm span{display:inline-block;min-width:2ch}
.tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem}
.tabs button{font:inherit;font-weight:500;background:none;border:2px solid var(--ink);padding:.35rem 1rem;border-radius:99px;cursor:pointer;color:var(--ink)}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper)}
h3{font-size:2rem;letter-spacing:-.03em;font-weight:800;line-height:1.1;margin-bottom:.6rem}
dl{margin-top:1.4rem}
dl div{display:grid;grid-template-columns:7rem 1fr;gap:1rem;padding:.6rem 0;border-top:2px solid var(--ink)}
dt{font-weight:800}

/* fábrica */
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s}
.steps li{padding:1.4rem 1.2rem 0 0;border-top:6px solid var(--wood);display:flex;flex-direction:column;gap:.5rem;position:relative}
.steps li:nth-child(1){border-top-width:6px}.steps li:nth-child(2){border-top-width:12px}
.steps li:nth-child(3){border-top-width:18px;border-top-color:var(--wood-d)}.steps li:nth-child(4){border-top-width:24px;border-top-color:var(--flag)}
.steps strong{font-size:1.25rem;letter-spacing:-.02em}
.facts{display:flex;flex-wrap:wrap;gap:3rem;margin-top:4.5rem}
.facts p{max-width:15ch}
.facts b{display:block;font-size:4.2rem;line-height:1;letter-spacing:-.05em;font-weight:800}

/* pedido */
.pedido{padding-bottom:7rem}
form{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 2rem;max-width:760px}
label{display:flex;flex-direction:column;gap:.4rem;font-weight:500}
input,select{font:inherit;padding:.75rem .9rem;border:2px solid var(--ink);background:var(--paper);border-radius:0;color:var(--ink)}
input[aria-invalid="true"]{border-color:var(--flag)}
.err{color:#B42A12;min-height:1.2em;font-size:.9rem}
.total,.ok,form .btn{grid-column:1/-1}
.total{font-size:1.4rem}
.total b{font-size:2rem;letter-spacing:-.03em}
.ok{background:var(--ink);color:var(--paper);padding:1rem 1.2rem}
form .btn{justify-self:start}
footer{border-top:2px solid var(--ink);padding-top:2rem;padding-bottom:3rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}

@media (max-width:820px){
  .top nav{display:none}
  .taller-grid,form{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr;gap:2rem 1rem}
  .hero-pick{right:-10px;opacity:.9}
  .hero-pick svg{height:620px;width:auto}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}.hero-pick{animation:none;transition:none}
}