/* ============================================================
   3DAX — section styles · part 1
   nav · hero · story · proceso · catalog
   ============================================================ */

/* ---------------- NAV ---------------- */
.nav{ position:fixed; top:0; left:0; right:0; z-index:80; transition:background .4s var(--ease), border-color .4s, backdrop-filter .4s; border-bottom:1px solid transparent; }
.nav--solid{ background:rgba(251,242,225,.82); backdrop-filter:blur(16px) saturate(1.2); border-bottom:1px solid var(--line-soft); box-shadow:0 6px 24px -18px rgba(94,26,13,.5); }
.nav__inner{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.brand{ display:flex; flex-direction:column; line-height:1; }
.brand__mark{ font-family:var(--display); font-size:24px; letter-spacing:.06em; color:var(--cream); }
.brand__mark span{ color:var(--gold); }
.brand__sub{ font-family:var(--mono); font-size:9px; letter-spacing:.34em; text-transform:uppercase; color:var(--cream-faint); margin-top:4px; }
.nav__links{ display:flex; gap:34px; }
.nav__link{ font-size:14px; font-weight:500; color:var(--cream-dim); transition:color .25s; position:relative; }
.nav__link:hover{ color:var(--cream); }
.nav__link::after{ content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0; background:var(--gold); transition:width .3s var(--ease); }
.nav__link:hover::after{ width:100%; }
.nav__right{ display:flex; align-items:center; gap:22px; }
.nav__shop{ }
.cart-btn{ position:relative; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; color:var(--cream); border:1px solid var(--line); transition:border-color .3s, background .3s, transform .3s; }
.cart-btn:hover{ border-color:var(--gold); background:rgba(217,138,43,.08); }
.cart-btn:active{ transform:scale(.92); }
.cart-btn__count{ position:absolute; top:-4px; right:-4px; min-width:19px; height:19px; padding:0 5px; border-radius:20px; background:var(--rust-bright); color:var(--on-dark); font-family:var(--mono); font-size:11px; font-weight:600; display:grid; place-items:center; border:2px solid var(--ink); }
.nav__login{ font-weight:600; }
.acct-btn{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--rust); color:var(--on-dark); transition:transform .3s, background .3s; }
.acct-btn:hover{ background:var(--rust-bright); transform:translateY(-1px); }
.acct-btn__ini{ font-family:var(--display); font-size:16px; }
@media (max-width:880px){ .nav__links{ display:none; } .nav__shop{ display:none; } }

/* ---------------- HERO ---------------- */
.hero{ position:relative; min-height:100vh; display:flex; align-items:center; padding:120px 0 60px; overflow:hidden; }
.hero__grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; }
.hero__copy{ max-width:560px; }
.hero__title{ font-size:clamp(46px,6.2vw,88px); margin:22px 0 24px; }
.hero__title em{ font-style:italic; color:var(--rust); }
.hero__lead{ max-width:480px; }
.hero__cta{ display:flex; gap:14px; margin:34px 0 26px; flex-wrap:wrap; }
.hero__trust{ display:flex; align-items:center; gap:12px; font-size:14px; color:var(--cream-dim); }
.hero__trust strong{ color:var(--cream); }

.hero__stage{ position:relative; height:min(78vh,680px); display:flex; align-items:center; justify-content:center; perspective:1400px; }
.hero__halo{ position:absolute; width:80%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(217,138,43,.22), rgba(240,72,154,.14) 46%, transparent 70%); filter:blur(10px); top:46%; left:50%; transform:translate(-50%,-50%); }
.hero__prod{ position:relative; z-index:2; width:auto; height:96%; object-fit:contain; will-change:transform; transition:transform .12s linear; filter:var(--shadow-prod); }
.hero__plinth{ position:absolute; bottom:7%; left:50%; transform:translateX(-50%); width:46%; height:26px; border-radius:50%; background:radial-gradient(ellipse, rgba(94,26,13,.26), transparent 70%); filter:blur(7px); z-index:1; }
@keyframes floaty{ 0%,100%{ } }

.hero__scroll{ position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:10px; font-family:var(--mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--cream-faint); }
.hero__scroll-line{ width:1px; height:46px; background:linear-gradient(var(--gold),transparent); position:relative; overflow:hidden; }
.hero__scroll-line::after{ content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--cream); animation:scrolldot 1.8s var(--ease) infinite; }
@keyframes scrolldot{ 0%{ top:-50%; } 100%{ top:120%; } }
@media (max-width:880px){
  .hero__grid{ grid-template-columns:1fr; gap:10px; text-align:center; }
  .hero__copy{ margin:0 auto; }
  .hero__lead{ margin:0 auto; } .hero__cta,.hero__trust{ justify-content:center; }
  .hero__stage{ height:54vh; order:-1; }
}

/* ---------------- STORY ---------------- */
.story{ position:relative; min-height:360vh; }
.story__sticky{ position:sticky; top:0; height:100vh; overflow:hidden; display:flex; align-items:center; }
.story__inner{ position:relative; z-index:2; width:100%; max-width:var(--maxw); display:grid; grid-template-columns:.92fr 1.08fr; gap:30px; align-items:center; height:100%; }

.story__text{ position:relative; }
.story__chapters{ position:relative; height:340px; }
.story__chapter{ position:absolute; inset:0; opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); pointer-events:none; }
.story__chapter.is-active{ opacity:1; transform:none; }
.story__chapter.is-past{ opacity:0; transform:translateY(-26px); }
.story__title{ font-size:clamp(34px,4.4vw,60px); margin:16px 0 18px; }
.story__title em, .story em{ font-style:italic; color:var(--rust); }
.story__body{ max-width:420px; }
.story__dots{ display:flex; gap:10px; margin-top:30px; }
.story__dot{ width:30px; height:3px; border-radius:3px; background:var(--line); transition:background .4s; }
.story__dot.on{ background:var(--gold); }

.story__stage{ position:relative; height:78vh; display:flex; align-items:center; justify-content:center; }
.story__halo{ position:absolute; width:72%; aspect-ratio:1; border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%); background:radial-gradient(circle, rgba(217,138,43,.18), rgba(240,72,154,.10) 50%, transparent 70%); filter:blur(10px); }
.story__frame{ position:absolute; max-width:88%; max-height:92%; width:auto; height:auto; object-fit:contain; will-change:transform,opacity; }
.story__labels{ position:absolute; inset:0; z-index:20; pointer-events:none; }
.story__label{ position:absolute; display:flex; align-items:center; gap:10px; transform:translate(-50%,-50%); }
.story__label-dot{ width:9px; height:9px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 5px rgba(217,138,43,.18); position:relative; }
.story__label-dot::after{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--gold); animation:pulse 2s ease-out infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(217,138,43,.5); } 100%{ box-shadow:0 0 0 16px rgba(217,138,43,0); } }
.story__label-t{ font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--cream); background:rgba(255,250,240,.88); backdrop-filter:blur(6px); padding:6px 12px; border-radius:100px; border:1px solid var(--line); box-shadow:var(--shadow-card); }

.story__progress{ position:absolute; right:34px; top:50%; transform:translateY(-50%); z-index:5; }
.story__progress-track{ display:block; width:3px; height:160px; background:var(--line-soft); border-radius:3px; overflow:hidden; }
.story__progress-fill{ display:block; width:100%; height:100%; background:linear-gradient(var(--gold),var(--rust)); transform-origin:top; transform:scaleY(0); }

.story-outro{ position:relative; z-index:3; text-align:center; padding:90px 0 130px; }
.story__outro-inner h3{ font-size:clamp(32px,4.6vw,58px); margin-bottom:30px; }
.story__outro-inner em{ font-style:italic; color:var(--rust); }
@media (max-width:880px){
  .story{ min-height:300vh; }
  .story__inner{ grid-template-columns:1fr; gap:0; }
  .story__text{ order:2; position:absolute; bottom:6vh; left:0; right:0; padding:0 20px; }
  .story__chapters{ height:240px; }
  .story__stage{ height:52vh; margin-top:-4vh; }
  .story__progress{ display:none; }
}

/* ---------------- PROCESO ---------------- */
.proceso{ padding:120px 0 110px; position:relative; }
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:30px 0 64px; border-bottom:1px solid var(--line-soft); margin-bottom:80px; }
.stats__item{ text-align:center; }
.stats__value{ font-size:clamp(34px,4vw,52px); color:var(--gold); }
.stats__label{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--cream-dim); margin-top:8px; }
.proceso__head{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; margin-bottom:64px; }
.proceso__title{ font-size:clamp(32px,4.4vw,58px); margin-top:18px; }
.proceso__title em{ font-style:italic; color:var(--rust); }
.proceso__intro{ }
.proceso__steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-bottom:96px; }
.pstep{ padding:30px; border:1px solid var(--line-soft); border-radius:var(--r-lg); background:var(--ink-2); transition:border-color .4s, transform .4s, box-shadow .4s; }
.pstep:hover{ border-color:var(--gold); transform:translateY(-4px); box-shadow:var(--shadow-card); }
.pstep__n{ font-family:var(--mono); font-size:13px; color:var(--gold); letter-spacing:.2em; margin-bottom:18px; }
.pstep__title{ font-size:24px; margin-bottom:12px; }
.pstep__text{ color:var(--cream-dim); font-size:15px; line-height:1.7; }

.etsy{ display:grid; grid-template-columns:.85fr 1.15fr; gap:54px; align-items:center; padding:54px; border:1px solid var(--line); border-radius:var(--r-lg); background:radial-gradient(120% 140% at 0% 0%, rgba(130,38,20,.16), transparent 55%), var(--ink-2); position:relative; overflow:hidden; }
.etsy__media{ position:relative; }
.etsy__media img{ width:100%; filter:var(--shadow-prod); }
.etsy__title{ font-size:clamp(28px,3.4vw,46px); margin:18px 0 16px; }
.etsy__row{ display:flex; align-items:center; gap:24px; margin-top:28px; flex-wrap:wrap; }
.etsy__score{ display:flex; flex-direction:column; gap:6px; font-size:14px; color:var(--cream-dim); }
.etsy__score strong{ color:var(--cream); }
@media (max-width:880px){
  .stats{ grid-template-columns:repeat(2,1fr); gap:34px 20px; }
  .proceso__head{ grid-template-columns:1fr; gap:22px; }
  .proceso__steps{ grid-template-columns:1fr; }
  .etsy{ grid-template-columns:1fr; gap:30px; padding:30px; }
  .etsy__media{ max-width:300px; margin:0 auto; }
}

/* ---------------- CATALOG ---------------- */
.catalog{ padding:30px 0 120px; }
.catalog__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:50px; }
.catalog__title{ font-size:clamp(34px,4.6vw,62px); margin-top:14px; }
.catalog__sub{ max-width:380px; text-align:right; }
.catalog__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.card{ }
.card__inner{ border:1px solid var(--line-soft); border-radius:var(--r-lg); overflow:hidden; background:var(--ink-2); transition:border-color .4s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease); height:100%; }
.card__inner:hover{ border-color:var(--gold); transform:translateY(-6px); box-shadow:var(--shadow-card); }
.card__media{ position:relative; aspect-ratio:1; padding:22px; background:radial-gradient(120% 120% at 50% 18%, rgba(217,138,43,.10), rgba(240,72,154,.06) 55%, transparent 75%); overflow:hidden; }
.card__imgwrap{ position:relative; width:100%; height:100%; }
.card__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:opacity .5s var(--ease), transform .6s var(--ease); filter:drop-shadow(0 18px 26px rgba(94,26,13,.22)); }
.card__inner:hover .card__img{ transform:scale(1.05); }
.card__badge{ position:absolute; top:14px; left:14px; z-index:3; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; padding:6px 10px; border-radius:100px; background:rgba(255,250,240,.92); border:1px solid var(--line); color:var(--rust); backdrop-filter:blur(6px); box-shadow:var(--shadow-card); }
.card__badge--feat{ background:var(--pink); color:var(--on-dark); border-color:var(--pink); font-weight:600; }
.card__hoverbar{ position:absolute; left:0; right:0; bottom:0; padding:14px 22px; display:flex; justify-content:space-between; align-items:center; gap:10px; white-space:nowrap; font-size:13px; font-weight:600; color:var(--cream); background:linear-gradient(transparent, rgba(255,250,240,.94)); transform:translateY(100%); opacity:0; transition:transform .4s var(--ease), opacity .4s; }
.card__inner:hover .card__hoverbar{ transform:none; opacity:1; }
.card__body{ padding:22px 22px 24px; border-top:1px solid var(--line-soft); }
.card__char{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; }
.card__row{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.card__name{ font-size:22px; }
.card__price{ font-family:var(--display); font-size:20px; color:var(--cream); white-space:nowrap; }
.card__meta{ display:flex; align-items:center; gap:8px; margin:10px 0 16px; }
.card__reviews{ font-size:12px; color:var(--cream-faint); }
.card__ways{ display:flex; align-items:center; gap:8px; }
.way{ width:18px; height:18px; border-radius:50%; border:1px solid rgba(44,26,16,.2); }
.card__waylbl{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--cream-faint); margin-left:4px; }
@media (max-width:880px){
  .catalog__head{ flex-direction:column; align-items:flex-start; }
  .catalog__sub{ text-align:left; }
  .catalog__grid{ grid-template-columns:1fr 1fr; gap:16px; }
}
@media (max-width:560px){ .catalog__grid{ grid-template-columns:1fr; } }