@font-face{font-family:UnboundedCompacta;src:url(unbounded-extrabold.woff) format("woff");font-weight:400;font-style:normal;font-display:swap;size-adjust:72%}
/* POST-COMPRA · el estilo nuevo en Pago (checkout), Pedido confirmado y Seguimiento.
   Hueso de fondo, tarjetas papel, títulos UnboundedCompacta y botones en píldora, igual que el inicio.
   Solo cambia cómo se ve: los formularios, el pago y los datos del pedido funcionan igual.
   Para quitarlo: borra este archivo, post-compra.js y sus dos líneas en checkout.html, pedido-confirmado.html y seguimiento.html. */
html body.checkout-page,html body.confirmation-page,html body.tracking-page{
  --pk-bone:#eeede8;--pk-paper:#f7f6f2;--pk-ink:#151412;--pk-mute:#6b675e;--pk-line:#d9d6cd;--pk-or:#ff8346;--pk-or-ink:#c4521c;
  --pk-display:UnboundedCompacta,Impact,"Arial Narrow",sans-serif;--pk-body:Raleway,Arial,sans-serif;
  background:var(--pk-bone)!important;color:var(--pk-ink)!important
}
html body.checkout-page main,html body.confirmation-page main,html body.tracking-page main{background:transparent!important}

/* ---------- Encabezado: hueso, logo negro ---------- */
html body.checkout-page .checkout-header,html body.confirmation-page .checkout-header,html body.tracking-page .tracking-header{height:76px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;padding:0 5vw!important;background:var(--pk-bone)!important;border:0!important;border-bottom:1px solid var(--pk-line)!important;box-shadow:none!important}
html body.checkout-page .checkout-header .brand,html body.confirmation-page .checkout-header .brand,html body.tracking-page .tracking-header .brand{display:block!important;width:150px!important;height:42px!important;background:url('logo-peyote.webp') no-repeat left center/contain!important;font-size:0!important;letter-spacing:0!important;color:transparent!important}
html body.checkout-page .checkout-header .brand *,html body.confirmation-page .checkout-header .brand *,html body.tracking-page .tracking-header .brand *{display:none!important}
html body.checkout-page .checkout-header a:not(.brand),html body.confirmation-page .checkout-header a:not(.brand),html body.tracking-page .tracking-header a:not(.brand){padding:11px 16px!important;border:1.5px solid var(--pk-ink)!important;border-radius:999px!important;background:transparent!important;color:var(--pk-ink)!important;font:700 13.5px/1 var(--pk-body)!important;letter-spacing:0!important;text-transform:none!important;text-decoration:none!important;transition:background .2s,color .2s}
html body.checkout-page .checkout-header a:not(.brand):hover,html body.confirmation-page .checkout-header a:not(.brand):hover,html body.tracking-page .tracking-header a:not(.brand):hover{background:var(--pk-ink)!important;color:var(--pk-bone)!important}
@media(max-width:720px){
  html body.checkout-page .checkout-header,html body.confirmation-page .checkout-header,html body.tracking-page .tracking-header{height:64px!important;padding:0 16px!important}
  html body.checkout-page .checkout-header .brand,html body.confirmation-page .checkout-header .brand,html body.tracking-page .tracking-header .brand{width:112px!important;height:36px!important}
  html body.checkout-page .checkout-header a:not(.brand),html body.confirmation-page .checkout-header a:not(.brand),html body.tracking-page .tracking-header a:not(.brand){padding:9px 12px!important;font-size:12.5px!important}
}

/* Etiquetas chiquitas (antes en letra de máquina): ahora Raleway, igual que el inicio */
html body.checkout-page .checkout-eyebrow,html body.checkout-page .summary-eyebrow,html body.confirmation-page .confirmation-kicker,html body.confirmation-page .confirmation-next-title,html body.tracking-page .tracking-kicker,html body.tracking-page .tracking-eyebrow{color:var(--pk-or-ink)!important;font:700 12px/1 var(--pk-body)!important;letter-spacing:.08em!important;text-transform:uppercase!important}

/* ================= PAGO (checkout) ================= */
html body.checkout-page .checkout h1{font:400 clamp(40px,5.4vw,76px)/.92 var(--pk-display)!important;letter-spacing:0!important;text-transform:uppercase!important;color:var(--pk-ink)!important}
html body.checkout-page .checkout-intro{color:var(--pk-mute)!important;font:600 15.5px/1.5 var(--pk-body)!important}
html body.checkout-page #checkout-form>div,html body.checkout-page #checkout-form>.payment-actions{background:var(--pk-paper)!important;border:0!important;border-radius:22px!important;box-shadow:none!important}
html body.checkout-page #checkout-form h2{font:400 24px/1 var(--pk-display)!important;letter-spacing:.01em!important;text-transform:uppercase!important;color:var(--pk-ink)!important}
html body.checkout-page .step-n{background:var(--pk-ink)!important;color:var(--pk-bone)!important;font:800 13px/1 var(--pk-body)!important}
html body.checkout-page #checkout-form input:not([type=radio]):not([type=checkbox]),html body.checkout-page #checkout-form select,html body.checkout-page #checkout-form textarea,html body.checkout-page .order-summary input{border:1.5px solid var(--pk-line)!important;border-radius:14px!important;background:#fff!important;transition:border-color .2s,box-shadow .2s}
html body.checkout-page #checkout-form input:not([type=radio]):not([type=checkbox]):focus,html body.checkout-page #checkout-form select:focus,html body.checkout-page #checkout-form textarea:focus,html body.checkout-page .order-summary input:focus{border-color:var(--pk-ink)!important;box-shadow:0 0 0 3px rgba(255,131,70,.35)!important;outline:0!important}
html body.checkout-page #checkout-form label{font-family:var(--pk-body)!important}
html body.checkout-page .payment-method{border-radius:16px!important;background:#fff!important;border:1.5px solid var(--pk-line)!important}
html body.checkout-page .payment-method.selected{border:2px solid var(--pk-ink)!important;background:#fff!important}
html body.checkout-page .pay-button{min-height:58px!important;border-radius:999px!important;background:var(--pk-or)!important;color:var(--pk-ink)!important;font:800 16px/1 var(--pk-body)!important;letter-spacing:0!important;text-transform:none!important;transition:transform .2s,background .2s!important}
html body.checkout-page .pay-button:hover:not(:disabled){transform:translateY(-2px);background:var(--pk-ink)!important;color:var(--pk-bone)!important}
html body.checkout-page .order-summary{background:var(--pk-paper)!important;border:0!important;border-radius:22px!important;box-shadow:none!important;color:var(--pk-ink)!important}
html body.checkout-page .order-summary h2{font:400 26px/1 var(--pk-display)!important;letter-spacing:.01em!important;text-transform:uppercase!important}
html body.checkout-page .cart-total{font:400 46px/1 var(--pk-display)!important;letter-spacing:0!important}
html body.checkout-page .order-summary button{border-radius:999px!important}

/* Barra de pasos (la agrega post-compra.js): Datos · Envío · Pago */
.pk-steps{position:sticky;top:0;z-index:8;display:flex;gap:6px;margin:18px 0 6px;padding:10px 0;background:var(--pk-bone);list-style:none}
.pk-steps li{flex:1;display:flex;align-items:center;gap:8px;padding-top:9px;border-top:3px solid var(--pk-line);color:var(--pk-mute);font:700 13.5px/1 var(--pk-body);transition:border-color .35s,color .35s}
.pk-steps li i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--pk-line);color:var(--pk-ink);font:800 12px/1 var(--pk-body);font-style:normal;transition:background .35s,color .35s,transform .35s cubic-bezier(.3,1.4,.5,1)}
.pk-steps li.is-on{border-top-color:var(--pk-ink);color:var(--pk-ink)}
.pk-steps li.is-on i{background:var(--pk-ink);color:var(--pk-bone)}
.pk-steps li.is-done{border-top-color:var(--pk-or);color:var(--pk-ink)}
.pk-steps li.is-done i{background:var(--pk-or);color:var(--pk-ink);transform:scale(1.08)}
.pk-steps button{all:unset;display:flex;align-items:center;gap:8px;cursor:pointer}
.pk-steps button:focus-visible{outline:3px solid var(--pk-or);outline-offset:3px;border-radius:6px}

/* ================= PEDIDO CONFIRMADO ================= */
html body.confirmation-page .confirmation-wrap{background:transparent!important;padding-bottom:80px!important}
html body.confirmation-page .confirmation-wrap>*{width:min(940px,calc(100% - 32px))!important}
html body.confirmation-page .confirmation-hero{background:transparent!important;color:var(--pk-ink)!important;box-shadow:none!important;clip-path:none!important;padding:clamp(30px,5vw,56px) 0 10px!important}
html body.confirmation-page .confirmation-hero h1{color:var(--pk-ink)!important;font:400 clamp(44px,7vw,96px)/.9 var(--pk-display)!important;letter-spacing:0!important;text-transform:uppercase!important}
html body.confirmation-page .confirmation-golazo p{color:var(--pk-ink)!important;font:800 clamp(18px,2vw,22px)/1.3 var(--pk-body)!important}
html body.confirmation-page .confirmation-golazo peyote-logo{color:var(--pk-ink)!important}
html body.confirmation-page .confirmation-lead{color:var(--pk-mute)!important;font:600 16px/1.5 var(--pk-body)!important}
html body.confirmation-page .confirmation-order,html body.confirmation-page .confirmation-order *{color:var(--pk-ink)!important}
html body.confirmation-page .confirmation-order time{color:var(--pk-mute)!important}
/* El sello del estado del pago */
html body.confirmation-page .confirmation-state{display:inline-flex!important;align-items:center;gap:8px;padding:8px 14px!important;border:2.5px solid currentColor!important;border-radius:8px!important;background:transparent!important;font:800 13px/1 var(--pk-body)!important;letter-spacing:.1em!important;transform:rotate(-3deg)}
html body.confirmation-page .confirmation-state-paid{color:#1f7a3f!important}
html body.confirmation-page .confirmation-state:not(.confirmation-state-paid){color:var(--pk-or-ink)!important}
html body.confirmation-page .confirmation-state.pk-stamp{animation:pk-stamp .55s cubic-bezier(.3,1.4,.5,1) .25s both}
@keyframes pk-stamp{0%{opacity:0;transform:rotate(-14deg) scale(2.4)}60%{opacity:1;transform:rotate(-2deg) scale(.92)}100%{opacity:1;transform:rotate(-3deg) scale(1)}}
html body.confirmation-page .confirmation-block,html body.confirmation-page .confirmation-next{background:var(--pk-paper)!important;border:0!important;border-radius:22px!important;box-shadow:none!important}
html body.confirmation-page .confirmation-block h2{font:400 24px/1 var(--pk-display)!important;letter-spacing:.01em!important;text-transform:uppercase!important;color:var(--pk-ink)!important}
html body.confirmation-page .confirmation-total{font-family:var(--pk-display)!important}
html body.confirmation-page .confirmation-actions a{border-radius:999px!important;font:800 14.5px/1 var(--pk-body)!important;letter-spacing:0!important;text-transform:none!important;transition:transform .2s,background .2s,color .2s}
html body.confirmation-page .confirmation-actions .confirmation-action-primary{background:var(--pk-or)!important;color:var(--pk-ink)!important;border:0!important}
html body.confirmation-page .confirmation-actions a:hover{transform:translateY(-2px)}
html body.confirmation-page .vx-invite{border-radius:22px!important;background:var(--pk-paper)!important}
/* Socios Peyote: el carnet va justo debajo del encabezado */
html body.confirmation-page .confirmation-wrap>.pc-club{order:0!important;margin:18px auto!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:28px;padding:clamp(22px,3vw,34px)!important;border-radius:26px!important}
/* Fondo papel (no negro) */
html body.confirmation-page .pc-club,html body.confirmation-page .pc-club.is-vip{background:var(--pk-paper)!important;color:var(--pk-ink)!important}
html body.confirmation-page .pc-club .pc-tag{color:var(--pk-or-ink)!important;font:700 12px/1 var(--pk-body)!important;letter-spacing:.08em!important}
html body.confirmation-page .pc-club.is-vip .pc-tag{color:#9a7428!important}
html body.confirmation-page .pc-club h2{color:var(--pk-ink)!important}
html body.confirmation-page .pc-club .pc-line{color:var(--pk-mute)!important}
html body.confirmation-page .pc-club .pc-line b{color:var(--pk-ink)!important}
html body.confirmation-page .pc-club .pc-share{background:var(--pk-or)!important;color:var(--pk-ink)!important}
html body.confirmation-page .pc-club .pc-share:hover{background:var(--pk-ink)!important;color:var(--pk-bone)!important}
html body.confirmation-page .pc-club .pc-link{border:1.5px solid var(--pk-ink)!important;color:var(--pk-ink)!important}
html body.confirmation-page .pc-club .pc-link:hover{background:var(--pk-ink)!important;color:var(--pk-bone)!important}
html body.confirmation-page .pc-club .pc-copy{display:flex;flex-direction:column;gap:8px;min-width:0}
html body.confirmation-page .pc-club .pc-carnet{min-width:0}
@media(max-width:760px){html body.confirmation-page .confirmation-wrap>.pc-club{grid-template-columns:1fr}html body.confirmation-page .pc-club .pc-carnet{order:-1}}

/* El carnet cae, rebota y se estampa la categoría (como en el inicio) */
.pc-drop{position:relative;opacity:0}
.pc-drop.is-go{animation:pk-fall 1.05s cubic-bezier(.3,.1,.3,1) both}
.pc-drop.is-done{opacity:1;transform:rotate(-3deg)}
@keyframes pk-fall{0%{opacity:0;transform:translateY(-60vh) rotate(-22deg)}12%{opacity:1}55%{transform:translateY(0) rotate(-1deg)}68%{transform:translateY(-5%) rotate(-5deg)}82%{transform:translateY(0) rotate(-2.4deg)}91%{transform:translateY(-1.2%) rotate(-3.5deg)}100%{opacity:1;transform:translateY(0) rotate(-3deg)}}
.pc-carnet .cn-face{border-radius:16px;box-shadow:0 22px 44px rgba(21,20,18,.22)}
.pc-carnet .cn-lvl.pk-lvl{animation:pk-stamp .5s cubic-bezier(.3,1.4,.5,1) both}
.pc-carnet .cn-hint{color:var(--pk-mute)!important}
@media(prefers-reduced-motion:reduce){.pc-drop{opacity:1;transform:rotate(-3deg)}.pc-drop.is-go,.pc-carnet .cn-lvl.pk-lvl,html body.confirmation-page .confirmation-state.pk-stamp{animation:none}}

/* ================= SEGUIMIENTO ================= */
html body.tracking-page .help-hero{background:transparent!important;color:var(--pk-ink)!important;box-shadow:none!important;clip-path:none!important;margin-bottom:18px!important}
html body.tracking-page .help-hero h1{color:var(--pk-ink)!important;font:400 clamp(44px,7vw,96px)/.9 var(--pk-display)!important;letter-spacing:0!important}
html body.tracking-page .help-hero .tracking-intro{color:var(--pk-mute)!important;font:600 16px/1.5 var(--pk-body)!important}
html body.tracking-page .tracking-form,html body.tracking-page .tracking-order,html body.tracking-page .tracking-empty{background:var(--pk-paper)!important;border:0!important;border-radius:22px!important;box-shadow:none!important}
html body.tracking-page .tracking-form label{color:var(--pk-mute)!important;font:700 12px/1.2 var(--pk-body)!important;letter-spacing:.06em!important}
html body.tracking-page .tracking-form input{border:1.5px solid var(--pk-line)!important;border-radius:14px!important;background:#fff!important;font:600 16px var(--pk-body)!important;letter-spacing:0!important}
html body.tracking-page .tracking-form input:focus{border-color:var(--pk-ink)!important;box-shadow:0 0 0 3px rgba(255,131,70,.35)!important;outline:0!important}
html body.tracking-page .tracking-form button{border-radius:999px!important;background:var(--pk-or)!important;color:var(--pk-ink)!important;font:800 14.5px/1 var(--pk-body)!important;letter-spacing:0!important;text-transform:none!important;border:0!important;transition:transform .2s,background .2s,color .2s}
html body.tracking-page .tracking-form button:hover{background:var(--pk-ink)!important;color:var(--pk-bone)!important;transform:translateY(-2px)}
html body.tracking-page .tracking-order-head h2{font:400 clamp(30px,4vw,44px)/1 var(--pk-display)!important;letter-spacing:0!important}
html body.tracking-page .tracking-state{border-radius:999px!important;font:800 12px/1 var(--pk-body)!important;letter-spacing:.06em!important}
html body.tracking-page .tracking-item img{border-radius:14px!important;background:#fff!important}
html body.tracking-page .tracking-secondary-action{border-radius:999px!important}
/* La línea del pedido se va llenando hasta el paso en el que va (post-compra.js le pone el orden a cada paso) */
html body.tracking-page .tracking-step>span{font:800 11px/1.2 var(--pk-body)!important;letter-spacing:.06em!important}
html body.tracking-page .tracking-step>strong{font:800 12.5px/1.3 var(--pk-body)!important;letter-spacing:.02em!important}
html body.tracking-page .pk-anim .tracking-step{border-top:3px solid var(--pk-line)!important;padding-top:12px!important;color:var(--pk-mute)!important;transition:color .3s calc(var(--i,0)*.28s + .2s)}
html body.tracking-page .pk-anim .tracking-step.done,html body.tracking-page .pk-anim .tracking-step.active,html body.tracking-page .pk-anim .tracking-step.waiting{color:var(--pk-ink)!important}
html body.tracking-page .pk-anim .tracking-step.done::after,html body.tracking-page .pk-anim .tracking-step.active::after{content:"";position:absolute;left:0;right:6px;top:-3px;height:3px;background:var(--pk-ink);transform-origin:left;animation:pk-fill .45s ease-out calc(var(--i,0)*.28s) both}
html body.tracking-page .pk-anim .tracking-step.active::after{right:55%;background:var(--pk-or)}
html body.tracking-page .pk-anim .tracking-step.active>strong::before{content:"";display:inline-block;width:9px;height:9px;margin-right:7px;border-radius:50%;background:var(--pk-or);vertical-align:1px;animation:pk-pulse 1.6s ease-in-out calc(var(--i,0)*.28s + .4s) infinite}
@keyframes pk-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pk-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,131,70,.55)}50%{box-shadow:0 0 0 7px rgba(255,131,70,0)}}
@media(max-width:720px){
  html body.tracking-page .pk-anim .tracking-step{border-top:0!important;border-left:3px solid var(--pk-line)!important;padding:0 0 14px 28px!important}
  html body.tracking-page .pk-anim .tracking-step::before{display:none!important}
  html body.tracking-page .pk-anim .tracking-step.done::after,html body.tracking-page .pk-anim .tracking-step.active::after{left:-3px;right:auto;top:0;bottom:0;width:3px;height:auto;transform-origin:top;animation-name:pk-fill-y}
  html body.tracking-page .pk-anim .tracking-step.active::after{bottom:50%}
  @keyframes pk-fill-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
}
@media(prefers-reduced-motion:reduce){html body.tracking-page .pk-anim .tracking-step::after,html body.tracking-page .pk-anim .tracking-step>strong::before{animation:none!important}}