/* The customer's order after paying: one colour and one big word per real stage. */
@font-face{font-family:'Muralla Signs';src:url('/fonts/makeover/muralla-signs.woff2') format('woff2');font-display:block}
.sf .sf-panel-retiro{padding:0;background:transparent}
.sf .sf-panel-retiro>.sf-panel-nav{display:none}
.sf .sf-panel-retiro>.sf-panel-scroll{display:flex;flex-direction:column;flex:1;padding:0}
.pj,.pj-curtain{--pj-bg:#f4f1e9;--pj-ink:#06483e;--pj-dot:#ea645a;--pj-rule:rgba(6,72,62,.3)}
.pj[data-stage=recibido],.pj-curtain[data-stage=recibido]{--pj-bg:#a1b6ad}
.pj[data-stage=preparando],.pj-curtain[data-stage=preparando]{--pj-bg:#ea645a;--pj-ink:#002e27;--pj-dot:#f4f1e9;--pj-rule:rgba(0,46,39,.35)}
.pj[data-stage=listo],.pj-curtain[data-stage=listo],.pj[data-stage=encamino],.pj-curtain[data-stage=encamino]{--pj-bg:#06483e;--pj-ink:#f4f1e9;--pj-rule:rgba(244,241,233,.4)}
.pj[data-stage=saliendo],.pj-curtain[data-stage=saliendo]{--pj-bg:#a1b6ad}
.sf .pj{position:relative;display:flex;flex-direction:column;flex:1;min-height:100%;overflow:hidden;background:var(--pj-bg);color:var(--pj-ink)}
.sf .pj-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px;padding:0 22px}
.sf .pj-back{min-height:44px;padding:0;background:none;color:inherit;font:400 11px/1.4 var(--sf-mono)}
.sf .pj-live{display:inline-flex;align-items:center;gap:8px;font:400 10px/1 var(--sf-mono);letter-spacing:.1em;text-transform:uppercase}
.sf .pj-live i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:pj-live 1.9s ease-in-out infinite}
.sf .pj-live.off i{animation:none;opacity:.4}
@keyframes pj-live{0%,100%{opacity:1}50%{opacity:.25}}
.pj-band{flex:none;position:relative;height:14px;overflow:hidden}
.pj-band>i{position:absolute;inset:0 -28px 0 0;background:url('/img/makeover/checker-repeat.png') left center/auto 14px repeat-x}
.pj-band.march>i{animation:pj-march 3.2s linear infinite}
.pj-band.march-slow>i{animation:pj-march 9s linear infinite}
@keyframes pj-march{to{transform:translateX(-27.03px)}}
.sf .pj-body{flex:1;display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-content:start;min-width:0;padding:22px 22px 12px}
.sf .pj-main,.sf .pj-side{min-width:0}
.sf .pj-kicker{margin:0;font:400 11px/1 var(--sf-mono);letter-spacing:.13em;text-transform:uppercase;animation:pj-up .5s cubic-bezier(.05,.7,.1,1) both}
.sf .pj-word{margin:12px 0 0;color:inherit;font:italic 400 clamp(64px,24vw,170px)/1.12 Newsreader,Georgia,serif;letter-spacing:-.02em;white-space:nowrap}
.pj-write{display:inline-block;animation:pj-write .72s cubic-bezier(.3,0,.1,1) both}
@keyframes pj-write{from{clip-path:inset(-20% 100% -25% -6%);transform:translateX(-5px)}to{clip-path:inset(-20% -6% -25% -6%);transform:none}}
.pj-dot{display:inline-block;color:var(--pj-dot);transform-origin:50% 82%}
.pj-dot-pop{animation:pj-pop .36s cubic-bezier(.175,.885,.32,1.275) .62s both}
.pj-dot-pulse{animation:pj-pop .36s cubic-bezier(.175,.885,.32,1.275) .62s both,pj-pulse 1.9s ease-in-out 1.1s infinite}
.pj-dot-drop{transform-origin:50% 90%;animation:pj-drop .78s linear .62s both}
@keyframes pj-pop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
@keyframes pj-pulse{0%,100%{scale:1}50%{scale:1.32}}
@keyframes pj-drop{0%{transform:translateY(-190%) scale(.92,1.1);animation-timing-function:cubic-bezier(.5,0,.9,.5)}48%{transform:translateY(0) scale(1.34,.66);animation-timing-function:cubic-bezier(.1,.7,.3,1)}70%{transform:translateY(-22%) scale(.94,1.08);animation-timing-function:cubic-bezier(.5,0,.8,.6)}86%{transform:translateY(0) scale(1.1,.9)}100%{transform:none}}
.sf .pj-verbline{display:flex;align-items:flex-end;gap:6px;margin:12px 0 0;color:inherit;font:italic 400 64px/1.3 Newsreader,Georgia,serif;letter-spacing:-.02em;animation:pj-up .5s cubic-bezier(.05,.7,.1,1) both}
.pj-spin{flex:none;width:44px;height:44px;margin-bottom:calc(var(--pj-verb,64px)*.5 - 22px);font-size:34px;color:var(--pj-dot);animation:pj-spin 3.04s linear infinite}
.pj-spin-window{display:block;width:100%;height:100%;overflow:hidden}
.pj-spin-column{display:block;height:1600%;animation:pj-column 1.52s steps(16) infinite}
.pj-sign{display:flex;align-items:center;justify-content:center;height:6.25%;font:400 1em/1 'Muralla Signs',sans-serif;font-style:normal;letter-spacing:0}
.pj-sign>span{display:block}
@keyframes pj-spin{to{transform:rotate(360deg)}}
@keyframes pj-column{to{transform:translateY(-100%)}}
.pj-rollbox{flex:1;min-width:0;position:relative;display:block;height:86px;overflow:hidden}
.pj-roll{position:absolute;left:0;bottom:0;padding-left:.04em;white-space:nowrap;line-height:1.3}
.pj-roll-in{animation:pj-roll-in .52s cubic-bezier(.7,0,.2,1) both}
.pj-roll-out{animation:pj-roll-out .52s cubic-bezier(.7,0,.2,1) both}
@keyframes pj-roll-in{from{transform:translateY(100%)}to{transform:none}}
@keyframes pj-roll-out{to{transform:translateY(-100%)}}
.sf .pj-line,.sf .pj-note{margin:6px 0 0;color:inherit;font:italic 400 clamp(25px,7vw,38px)/1.12 Newsreader,Georgia,serif;animation:pj-up .5s cubic-bezier(.05,.7,.1,1) .34s both}
.sf .pj-paid{margin:22px 0 0;font:400 13px/1.6 var(--sf-mono);animation:pj-up .5s cubic-bezier(.05,.7,.1,1) .42s both}
@keyframes pj-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.sf .pj-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:24px 0 0;padding:0;list-style:none;font:400 10px/1.2 var(--sf-mono);animation:pj-up .5s cubic-bezier(.05,.7,.1,1) .24s both}
.sf .pj-steps li{display:flex;flex-direction:column;gap:8px;opacity:.62}
.sf .pj-steps li.on{opacity:1}
.sf .pj-steps li[aria-current]{font-weight:500}
.pj-step-bar{display:block;height:10px;background:linear-gradient(currentColor,currentColor) left 4px/100% 1px no-repeat}
.on>.pj-step-bar{background:url('/img/makeover/checker-repeat.png') left center/auto 10px repeat-x}
.on>.pj-step-bar.now{animation:pj-seg .72s cubic-bezier(.05,.7,.1,1) .3s both}
@keyframes pj-seg{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
.sf .pj-ticket{--t:9px;display:flex;flex-direction:column;gap:12px;padding:18px 18px 26px;background:#f4f1e9;color:#06483e;-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/calc(2*var(--t)) 51% repeat-x,linear-gradient(#000 0 0) top/100% calc(100% - var(--t) + 1px) no-repeat;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/calc(2*var(--t)) 51% repeat-x,linear-gradient(#000 0 0) top/100% calc(100% - var(--t) + 1px) no-repeat;animation:pj-print 1s steps(14) .38s both}
@keyframes pj-print{from{clip-path:inset(0 0 100% 0);transform:translateY(-16px)}to{clip-path:inset(0 0 -20px 0);transform:none}}
.pj[data-stage=confirmando] .pj-ticket,.pj[data-stage=verificando] .pj-ticket,.pj[data-stage=revisando] .pj-ticket,.pj[data-stage=sinrepartidor] .pj-ticket{outline:1px solid var(--pj-rule);outline-offset:-1px}
.sf .pj-ticket-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font:400 11px/1.2 var(--sf-mono)}
.sf .pj-ticket-code{font:800 44px/1 Archivo,Arial,sans-serif;letter-spacing:-.04em}
.sf .pj-ticket-items{display:flex;flex-direction:column;margin:0;padding:0;border-top:1px dashed var(--sf-rule,rgba(6,72,62,.4));list-style:none}
.sf .pj-ticket-items li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:7px 0;font:600 15px/1.2 Archivo,Arial,sans-serif}
.sf .pj-ticket-items li>span:last-child{font:400 12px/1 var(--sf-mono)}
.sf .pj-ticket-items small{display:block;margin-top:3px;font:400 11px/1.2 var(--sf-mono)}
.sf .pj-ticket-items img,.pj-ticket-blank{display:block;width:44px;height:52px;object-fit:contain}
.pj-ticket-blank{background:#e3e2dd}
.sf .pj-ready{display:flex;flex-direction:column;gap:10px;container-type:inline-size}
.sf .pj-ready>span{font:400 11px/1.2 var(--sf-mono);letter-spacing:.13em;text-transform:uppercase;animation:pj-up .5s cubic-bezier(.05,.7,.1,1) .46s both}
.sf .pj-ready>strong{font:800 64px/1 Archivo,Arial,sans-serif;font-size:min(26.5cqw,120px);letter-spacing:-.04em;white-space:nowrap;transform-origin:0 70%;animation:pj-code .7s cubic-bezier(.175,.885,.32,1.275) .5s both}
@keyframes pj-code{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:none}}
.sf .pj-ready>ul{margin:10px 0 0;padding:14px 0 0;border-top:1px solid var(--pj-rule);list-style:none;font:400 13px/1.7 var(--sf-mono);animation:pj-up .5s cubic-bezier(.05,.7,.1,1) .7s both}
.sf .pj-actions{display:flex;flex-direction:column;gap:10px;margin-top:30px;animation:pj-up .5s cubic-bezier(.05,.7,.1,1) .44s both}
.sf .pj-primary,.sf .pj-secondary{display:flex;align-items:center;justify-content:center;min-height:54px;padding:0 18px;font:600 16px/1 Archivo,Arial,sans-serif;text-decoration:none}
.sf .pj-primary{background:#06483e;color:#f4f1e9}
.sf .pj-secondary{border:1px solid #06483e;color:#06483e}
.sf .pj-foot{flex:none;display:flex;justify-content:space-between;gap:12px;padding:12px 22px 18px;font:400 11px/1.3 var(--sf-mono)}
.sf .pj-foot a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.sf .pj-foot-links{display:flex;gap:14px;white-space:nowrap}
.pj-curtain{position:absolute;inset:0;z-index:5;background:var(--pj-bg);animation:pj-curtain .62s cubic-bezier(.65,0,.2,1) both}
@keyframes pj-curtain{from{transform:translateY(100%)}to{transform:none}}
@media (min-width:701px){
  .sf .pj-bar{padding:0 44px}
  .sf .pj-body{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:44px;align-items:center;align-content:center;padding:clamp(14px,3dvh,36px) 44px}
  .sf .pj-foot{padding:10px 44px 16px}
  .pj-spin{width:72px;height:72px;margin-bottom:calc(var(--pj-verb,120px)*.5 - 36px);font-size:56px}
  .sf .pj-actions{flex-direction:row;max-width:520px}
  .sf .pj-actions>*{flex:1}
  .sf .pj-steps{font-size:12px;max-width:640px}
}
/* The payment step: the options arrive as one, and a failed payment nudges once. */
.sf-other-payments:has(>:only-child){grid-template-columns:minmax(0,1fr)}
.sf-hold-clock{margin:10px 0 0;font:400 12px/1.5 var(--sf-mono);color:var(--sf-muted)}
.sf .sf-pass-follow{width:100%;margin-top:14px}
.sf-payment-options:not([hidden]){animation:pj-up .42s cubic-bezier(.05,.7,.1,1) both}
.sf-checkout .sf-notice.error,.sf-checkout .sf-notice[role=alert]{animation:pj-shake .36s ease-in-out}
@keyframes pj-shake{20%{transform:translateX(-7px)}45%{transform:translateX(6px)}70%{transform:translateX(-3px)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.pj *,.pj-curtain,.sf-payment-options,.sf-checkout .sf-notice,.sf-street-options{animation:none!important}}

/* Pickup or delivery, and the address. Same rules as the customer's form. */
.sf-fulfillment{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 18px}
.sf-fulfillment button{min-height:52px;padding:12px;border:1px solid var(--sf-rule);background:transparent;color:inherit;font:700 15px/1.2 Archivo,Arial,sans-serif;letter-spacing:-.02em;cursor:pointer}
.sf-fulfillment button[aria-pressed=true]{background:var(--sf-ink);border-color:var(--sf-ink);color:var(--sf-paper)}
.sf-delivery-selection{display:grid;gap:15px;padding:0 0 22px}
.sf-delivery-selection label{display:block;font:11px/1.4 var(--sf-mono);text-transform:uppercase}
.sf-delivery-selection label>span{margin-left:10px;color:var(--sf-muted);font-size:9px;text-transform:none}
.sf-delivery-selection :is(input,select,textarea){display:block;width:100%;min-width:0;min-height:48px;margin-top:7px;padding:12px;border:1px solid var(--sf-rule);border-radius:0;background:transparent;color:var(--sf-ink);font:16px/1.3 Archivo,Arial,sans-serif;text-transform:none;appearance:none}
.sf-delivery-selection select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 19px) 21px,calc(100% - 13px) 21px;background-size:6px 6px;background-repeat:no-repeat;padding-right:34px}
/* The street with Google's suggestions under it: the list hangs from the field, on the same paper. */
.sf-street{position:relative}
.sf-street-options{position:absolute;z-index:5;left:0;right:0;top:100%;margin-top:-1px;border:1px solid var(--sf-ink);background:var(--sf-paper);box-shadow:0 12px 28px rgba(6,72,62,.14);animation:sf-street-in .16s cubic-bezier(.2,0,0,1) both}
.sf-street-options ul{margin:0;padding:0;list-style:none}
.sf-street-options li{display:grid;gap:2px;min-height:48px;padding:10px 12px;border-bottom:1px solid var(--sf-rule);cursor:pointer;font:16px/1.25 Archivo,Arial,sans-serif;text-transform:none}
.sf-street-options li b{font-weight:600}
.sf-street-options li span{font-size:13px;color:var(--sf-muted)}
.sf-street-options li[aria-selected=true]{background:var(--sf-ink);color:var(--sf-paper)}
.sf-street-options li[aria-selected=true] span{color:inherit;opacity:.82}
.sf-street-source{margin:0;padding:6px 12px 7px;text-align:right;font:400 12px/1 Roboto,Arial,sans-serif;letter-spacing:normal;color:#5e5e5e;white-space:nowrap}
.sf-street-hint{margin:8px 0 0;font:13px/1.35 Archivo,Arial,sans-serif}
@keyframes sf-street-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.sf-delivery-code summary{min-height:44px;display:flex;align-items:center;font:11px/1.4 var(--sf-mono);cursor:pointer}
.sf-delivery-code input{text-transform:uppercase}
.sf-delivery-price{display:grid;gap:7px;padding:14px;border:1px solid var(--sf-ink);font:13px/1.3 Archivo,Arial,sans-serif}
.sf-delivery-price>div{display:flex;justify-content:space-between;gap:12px}
.sf-delivery-price b{font-weight:600}
.sf-delivery-pay{padding-top:8px;border-top:1px solid var(--sf-rule);font-weight:700;font-size:15px}
.sf-delivery-price p{margin:4px 0 0;font:italic 400 17px/1.2 Newsreader,Georgia,serif}

/* The courier on a real map. The map decides its own colours; these are only the pins on top. */
.sf .pj-map{width:100%;height:clamp(250px,42vh,420px);background:#efebdf;overflow:hidden;animation:pj-up .5s cubic-bezier(.05,.7,.1,1) .2s both}
.sf .pj-map .maplibregl-ctrl-attrib{background:rgba(244,241,233,.86);color:#06483e;font:9px/1.3 var(--sf-mono)}
.sf .pj-map .maplibregl-ctrl-attrib a{color:inherit}
.pj-pin{display:flex;flex-direction:column;align-items:center;gap:3px;pointer-events:none}
.pj-gpin{position:absolute;left:0;top:0;pointer-events:none}
.pj-gmap{width:100%;height:100%}
.pj-pin i{display:block;width:13px;height:13px;border-radius:50%;background:#06483e;box-shadow:0 0 0 3px #f4f1e9}
.pj-pin span{padding:2px 5px;background:#f4f1e9;color:#06483e;font:400 10px/1.2 'IBM Plex Mono',monospace;white-space:nowrap}
.pj-pin-courier{z-index:2}
.pj-pin-courier i{position:relative;width:19px;height:19px;background:#ea645a}
.pj-pin-courier i::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid #ea645a;animation:pj-pin-ring 1.8s cubic-bezier(.2,0,0,1) infinite}
.pj-pin-courier span{font-weight:600}
@keyframes pj-pin-ring{from{transform:scale(1);opacity:.75}to{transform:scale(2.3);opacity:0}}
@media (prefers-reduced-motion:reduce){.pj-pin-courier i::after{animation:none;opacity:0}}