.button { display: inline-flex; min-height: 54px; align-items: center; justify-content: center; gap: 16px; padding: 15px 20px; border: 1px solid transparent; border-radius: 10px; font-weight: 700; line-height: 1.2; transition: transform .3s var(--ease), background .3s ease, box-shadow .3s ease; }
.button:hover { box-shadow: 0 12px 26px rgba(36, 54, 47, .13); transform: translateY(-3px); }
.button-primary { color: white; background: var(--forest); }
.button-secondary { color: var(--forest); background: rgba(255, 249, 239, .7); border-color: rgba(40, 77, 60, .28); }
.button-whatsapp { color: var(--forest); background: var(--paper); }
.button-call { display: flex; flex-direction: column; align-items: flex-start; color: white; background: transparent; border-color: rgba(255, 255, 255, .35); }
.button-call span { color: rgba(255, 255, 255, .68); font-size: .78rem; font-weight: 500; }
.button-call strong { font-size: 1.08rem; }

.leash-layer { position: absolute; inset: 0 0 auto; z-index: 1; height: 100%; pointer-events: none; }
.leash-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.leash-mobile { display: none; }
.leash-reveal, .leash-cast, .leash-edge, .leash-body, .leash-weave, .leash-stitch { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.leash-reveal { stroke: white; stroke-width: 60; vector-effect: none; }
.leash-cast { stroke: rgba(57, 24, 22, .26); stroke-width: 46; transform: translate(5px, 8px); }
.leash-edge { stroke: #762120; stroke-width: 38; }
.leash-body { stroke-width: 31; filter: drop-shadow(0 2px 1px rgba(255, 255, 255, .22)); }
.leash-desktop .leash-body { stroke: url(#leashRedDesktop); }
.leash-mobile .leash-body { stroke: url(#leashRedMobile); }
.leash-weave { stroke: rgba(255, 242, 226, .15); stroke-width: 24; stroke-dasharray: 1.5 5; stroke-linecap: butt; }
.leash-stitch { stroke: #f3bea1; stroke-width: 2.4; stroke-dasharray: 7 11; }
.leash-clasp { position: absolute; top: 0; left: 0; z-index: 10; display: block; width: 60px; height: 130px; overflow: visible; opacity: 0; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(20, 28, 36, .28)); will-change: transform; transform-origin: 50% 17%; }

.js [data-reveal] { opacity: 0; transform: translateY(26px); }
.no-gsap [data-reveal], .motion-ready [data-reveal].is-visible { opacity: 1; transform: none; }
.js .pet-panel-content { visibility: hidden; }
.js .pet-panel.is-active .pet-panel-content { visibility: visible; }

@media (max-width: 820px) {
  .leash-reveal { stroke-width: 44; }
  .leash-cast { stroke-width: 34; transform: translate(3px, 5px); }
  .leash-edge { stroke-width: 28; }
  .leash-body { stroke-width: 22; }
  .leash-weave { stroke-width: 17px; }
  .leash-stitch { stroke-width: 1.8px; stroke-dasharray: 5 9; }
  .leash-clasp { width: 46px; height: 100px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal], .word { opacity: 1 !important; transform: none !important; }
  .leash-reveal { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .leash-clasp { display: none; }
}

.order-spot { padding: 20px 0 150px; }
.order-card { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .75fr); gap: clamp(42px, 7vw, 96px); padding: clamp(30px, 5vw, 72px); background: linear-gradient(135deg, var(--paper-deep), #f2e2d3); border: 1px solid rgba(36, 54, 47, .12); border-radius: 18px; box-shadow: var(--shadow); }
.order-copy { min-width: 0; }
.order-copy h2 { max-width: 720px; margin-bottom: 28px; font-size: clamp(3rem, 5vw, 5.6rem); }
.order-lead { max-width: 560px; margin-bottom: 0; color: var(--forest); font-size: clamp(1.12rem, 1.7vw, 1.35rem); font-weight: 600; }
.order-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 42px 0 30px; }
.order-fact { padding-top: 17px; border-top: 1px solid var(--line); }
.order-fact span { color: var(--leash); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.order-fact strong { display: block; margin: 11px 0 7px; font-family: var(--display); font-size: clamp(1.35rem, 2.1vw, 2rem); font-weight: 500; line-height: 1.05; }
.order-fact p { margin-bottom: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.45; }
.order-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.qr-row { display: flex; align-items: center; gap: 18px; margin-top: 38px; padding-top: 24px; border-top: 1px solid var(--line); }
.qr-code { width: 104px; height: 104px; padding: 8px; background: #fff; border: 1px solid rgba(36, 54, 47, .15); border-radius: 10px; }
.qr-row strong { display: block; max-width: 250px; margin: 8px 0 5px; font-size: .98rem; line-height: 1.25; }
.qr-row p { margin: 0; color: var(--ink-soft); font-size: .83rem; }
.qr-label { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; padding: 4px 7px; color: var(--paper); background: var(--plum); border-radius: 5px; font-size: .7rem; font-weight: 800; letter-spacing: .1em; }
.order-proof { min-width: 0; align-self: center; margin: 0; padding: 18px; color: var(--paper); background: var(--forest); border-radius: 14px; box-shadow: 0 18px 42px rgba(36, 54, 47, .2); transform: rotate(1.2deg); }
.proof-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.proof-heading strong { padding: 7px 9px; color: var(--forest); background: var(--orange); border-radius: 5px; font-size: .7rem; letter-spacing: .04em; }
.order-proof a { display: block; overflow: hidden; margin-top: 14px; background: white; border-radius: 8px; }
.order-proof img { width: 100%; height: 500px; object-fit: cover; object-position: top center; transition: transform .8s var(--ease); }
.order-proof a:hover img { transform: scale(1.035); }
.order-proof figcaption { margin: 14px 3px 0; color: rgba(255, 249, 239, .78); font-family: var(--display); font-size: 1rem; font-style: italic; line-height: 1.25; }