:root{--paper:#E7EAE3;--paper2:#DADFD5;--ink:#0F1B2D;--night:#0B1422;--green:#2F7F73;--lilac:#8E7BB8;--thread:#F1E3BF;--saddle:#8A4B22;--dim:#475569;
  --serif:"Young Serif",Georgia,serif;--sans:"Hanken Grotesk",system-ui,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.06rem/1.65 var(--sans)}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.08;margin:0}
h1{font-size:clamp(2.7rem,9.5vw,6rem);letter-spacing:-.015em}
h2{font-size:clamp(1.9rem,6vw,3.1rem);letter-spacing:-.01em}
h3{font-size:1.35rem}
p{margin:.6rem 0}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:68rem;margin:0 auto;padding:0 1.3rem}
:focus-visible{outline:3px solid var(--lilac);outline-offset:3px;border-radius:6px}

.preview{margin:0;background:var(--night);color:#C8D2E3;text-align:center;font-size:.82rem;padding:.35rem 1rem}

/* bar */
.bar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:1.4rem;padding:.7rem 1.3rem;background:rgba(231,234,227,.9);backdrop-filter:blur(10px);border-bottom:1px solid rgba(15,27,45,.12)}
.mark{font:400 1.45rem var(--serif);color:var(--ink);text-decoration:none;margin-right:auto}
.bar nav{display:flex;gap:1.3rem}
.bar nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem;padding:.3rem 0;border-bottom:2px solid transparent}
.bar nav a:hover{border-bottom-color:var(--green)}
@media(max-width:46rem){.bar nav{display:none}.bar{padding:.6rem 1rem}}

.pill{display:inline-block;font:700 .95rem var(--sans);border-radius:999px;padding:.7rem 1.3rem;text-decoration:none;border:2px solid var(--ink);transition:transform .15s,background .2s}
.pill:active{transform:translateY(2px)}
.pill--solid{background:var(--ink);color:#fff}
.pill--solid:hover{background:var(--green);border-color:var(--green)}
.pill--ghost{background:transparent;color:var(--ink)}
.pill--ghost:hover{background:var(--ink);color:#fff}
.pill--wa{background:var(--green);border-color:var(--green);color:#fff;padding:.55rem 1.05rem}
.pill--wa:hover{background:var(--ink);border-color:var(--ink)}
.pill--big{padding:.95rem 1.7rem;font-size:1.02rem}

/* hero */
.hero{position:relative;min-height:min(92vh,56rem);display:grid;align-items:end;color:#fff;background:#2a2417 url(img/pampa.jpg) center/cover;overflow:hidden}
.hero__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,20,34,.25) 0,rgba(11,20,34,.1) 35%,rgba(11,20,34,.78) 100%)}
.hero__txt{position:relative;max-width:68rem;margin:0 auto;width:100%;padding:0 1.3rem 5.2rem}
.hero__txt p{max-width:34rem;font-size:1.18rem;color:#E8EDF4;margin:1.1rem 0 1.5rem}
.hero__cta{display:flex;gap:.7rem;flex-wrap:wrap}
.hero .pill--solid{background:#fff;color:var(--ink);border-color:#fff}
.hero .pill--solid:hover{background:var(--thread);border-color:var(--thread)}
.hero .pill--ghost{color:#fff;border-color:rgba(255,255,255,.8)}
.hero .pill--ghost:hover{background:#fff;color:var(--ink)}
.hero h1{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both}
.hero__txt p,.hero__cta{animation:rise 1.1s .25s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.thread{position:absolute;left:0;right:0;bottom:1.6rem;width:100%;height:46px;pointer-events:none}
.thread path{fill:none;stroke:var(--thread);stroke-width:3;stroke-linecap:round;stroke-dasharray:9 12;stroke-dashoffset:0;opacity:.9;vector-effect:non-scaling-stroke}
.thread.sewn path{animation:sew 4.5s .6s cubic-bezier(.4,0,.2,1) both}
@keyframes sew{from{stroke-dasharray:1 3000}to{stroke-dasharray:9 12}}

section{padding:4.6rem 0 1rem}
.sub{max-width:40rem;color:var(--dim);font-size:1.1rem}
.note{color:var(--dim);font-size:.92rem;margin-top:1.4rem}

/* belts */
.belts{padding-bottom:3.5rem}
.grid{display:grid;gap:1.1rem;margin-top:2rem;grid-template-columns:1fr}
@media(min-width:34rem){.grid{grid-template-columns:1fr 1fr}}
@media(min-width:62rem){.grid{grid-template-columns:repeat(3,1fr)}}
.card{display:flex;flex-direction:column;background:var(--paper2);border-radius:18px;overflow:hidden;transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(15,27,45,.16)}
.card__img{aspect-ratio:4/3;display:grid;place-items:center;padding:1.1rem;background:var(--paper2)}
.card__img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.card__img.coming{background:var(--ink);padding:0;position:relative}
.card__img.coming::before,.card__img.coming::after{content:"";position:absolute;left:0;right:0;height:24px;background:url(guarda.svg) 0 0/72px 24px repeat-x;opacity:.9}
.card__img.coming::before{top:14px}.card__img.coming::after{bottom:14px}
.card__img.coming span{position:relative;z-index:1;color:var(--thread);font:400 1.05rem var(--serif)}
.card__body{padding:1rem 1.1rem 1.2rem;display:grid;gap:.25rem;flex:1}
.card__top{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem}
.card__top h3{font-size:1.4rem}
.card__price{font-weight:700;white-space:nowrap}
.card__tag{font-size:.8rem;font-weight:700;color:var(--green)}
.card__ask{margin-top:.6rem;align-self:start;font-weight:700;font-size:.92rem;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--green);padding-bottom:1px}
.card__ask:hover{color:var(--green)}

/* guarda border */
.guarda{height:24px;background:url(guarda.svg) 0 0/72px 24px repeat-x;margin:.5rem 0}
.guarda--foot{margin-bottom:1.6rem}

/* made */
.made h2{margin-bottom:1.6rem}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:2.4rem}
.steps li{display:grid;gap:1rem;align-items:center}
.steps img{border-radius:16px;width:100%;aspect-ratio:16/10;object-fit:cover}
.steps p{color:var(--dim);max-width:28rem}
@media(min-width:48rem){
  .steps li{grid-template-columns:1.2fr 1fr;gap:2.2rem}
  .steps li:nth-child(even) img{order:2}
}

/* story */
.story{padding:0;margin-top:3.5rem;display:grid;background:var(--night);color:#E8EDF4}
.story__img img{width:100%;height:100%;min-height:15rem;object-fit:cover}
.story__txt{padding:3rem 1.3rem 3.4rem}
.story h2{color:#fff;margin-bottom:1rem}
.story p{color:#CBD5E4;max-width:34rem}
.story .sign{color:var(--thread);font-family:var(--serif);font-size:1.2rem;margin-top:1.6rem;line-height:1.35}
.story .sign em{font-style:normal;color:#fff}
@media(min-width:56rem){
  .story{grid-template-columns:1fr 1fr;align-items:stretch}
  .story__txt{padding:4.5rem 3rem;align-self:center;margin:0}
}

/* gallery */
.gallery{padding-bottom:2rem}
.gallery h2{margin-bottom:1.2rem}
.rail{display:flex;gap:.8rem;overflow-x:auto;scroll-snap-type:x proximity;padding:0 1.3rem 1.2rem;scrollbar-width:thin}
.rail img{flex:0 0 min(70vw,19rem);height:min(60vw,22rem);object-fit:cover;border-radius:14px;scroll-snap-align:start}

/* order */
.order{background:var(--paper2);margin-top:2.5rem;padding:4rem 0}
.order p{max-width:34rem;font-size:1.12rem}
.order__cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.4rem}

footer{padding:1.4rem 1.3rem 3rem;text-align:center;color:var(--dim);font-size:.95rem}
footer .small{font-family:var(--serif);color:var(--green);font-size:1.1rem}

@media(prefers-reduced-motion:reduce){.hero h1,.hero__txt p,.hero__cta{animation:none}.thread.sewn path{animation:none}.card{transition:none}html{scroll-behavior:auto}}

/* Argentina section */
.arg{padding:5rem 0 2.5rem}
.lead{max-width:40rem;font-size:1.2rem;color:var(--dim);margin:.8rem 0 2.2rem}
.route{list-style:none;margin:0 0 3rem;padding:0 0 0 1.6rem;position:relative;display:grid;gap:1.6rem}
.route::before{content:"";position:absolute;left:.45rem;top:.5rem;bottom:.5rem;border-left:3px dashed var(--lilac)}
.route li{position:relative;display:grid;gap:.15rem}
.route li::before{content:"";position:absolute;left:-1.6rem;top:.38rem;width:.95rem;height:.95rem;border-radius:50%;background:var(--thread);border:3px solid var(--green)}
.route b{font:400 1.45rem var(--serif)}
.route span{color:var(--dim);max-width:30rem}
@media(min-width:56rem){
  .route{grid-template-columns:repeat(4,1fr);padding:2.4rem 0 0;gap:1.6rem}
  .route::before{left:.5rem;right:.5rem;top:.55rem;bottom:auto;border-left:0;border-top:3px dashed var(--lilac)}
  .route li::before{left:0;top:-2.4rem}
}
.values{display:grid;gap:1.4rem}
.values div{border-top:2px solid var(--ink);padding-top:.9rem}
.values p{color:var(--dim)}
@media(min-width:48rem){.values{grid-template-columns:repeat(3,1fr);gap:2rem}}
section{padding:5.2rem 0 1rem}
.hero__txt h1{text-shadow:0 2px 30px rgba(11,20,34,.35)}

.route li{align-content:start}
.route{align-items:start}