@font-face{font-family:UnboundedCompacta;src:url(unbounded-extrabold.woff) format("woff");font-weight:400;font-style:normal;font-display:swap;size-adjust:72%}
/* Seguimiento de pedido, versión hueso: título grande con punto durazno, formulario en tarjeta y el pedido contado en claro:
   qué pasa, cuándo llega, en qué paso va, qué pediste y los datos del envío. Mismo lenguaje que Mi vestidor y la Guía de tallas.
   El texto de cada estado y el orden de la página viven en seguimiento.js; aquí solo el aspecto.
   Para regresar al diseño anterior: ver el commit anterior de seguimiento.html, seguimiento.js y quitar este archivo. */
@font-face{font-family:"Unbounded";src:url(unbounded-extrabold.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
html body.tracking-page{--sg-ink:#151412;--sg-mute:#5f5c55;--sg-or:#ff8346;--sg-or-ink:#c4521c;--sg-peach:#fde9dc;--sg-peach2:#fbd3b9;--sg-paper:#f7f6f2;--sg-line:#e2dfd5;font-family:Rubik,Raleway,Arial,sans-serif}
html body.tracking-page .tracking-wrap>*{width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important}
html body.tracking-page .tracking-wrap{max-width:1180px;padding:clamp(18px,3vw,34px) clamp(16px,3vw,32px) clamp(48px,6vw,84px)}

/* Título */
html body.tracking-page .help-hero{margin:0 0 clamp(16px,2.4vw,26px)!important;padding:0!important}
html body.tracking-page .help-hero h1{margin:0!important;font:400 clamp(38px,7vw,92px)/.98 "Unbounded",UnboundedCompacta,Impact,sans-serif!important;letter-spacing:-.005em!important;text-transform:uppercase;text-wrap:balance}
html body.tracking-page .help-hero h1 .sg-period{color:#fbc7a6}
html body.tracking-page .help-hero .tracking-intro{max-width:none;margin:10px 0 0!important;color:var(--sg-mute)!important;font:500 clamp(16px,1.6vw,22px)/1.35 Rubik,Arial,sans-serif!important}

/* Formulario */
html body.tracking-page .tracking-form{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;align-items:end;gap:clamp(10px,1.6vw,18px);padding:clamp(16px,2.2vw,24px)!important;border:1px solid #ebe8df!important;border-radius:20px!important;background:var(--sg-paper)!important}
html body.tracking-page .tracking-form label{gap:9px;color:var(--sg-ink)!important;font:600 11.5px/1 "IBM Plex Mono",ui-monospace,Menlo,monospace!important;letter-spacing:.12em!important;text-transform:uppercase}
html body.tracking-page .tracking-form input{height:52px;padding:0 16px;border:1px solid #d6d2c6!important;border-radius:14px!important;background:#fff!important;color:var(--sg-ink);font:500 17px Rubik,Arial,sans-serif!important}
html body.tracking-page .tracking-form input::placeholder{color:#a9a69c}
html body.tracking-page .tracking-form input:focus{border-color:var(--sg-ink)!important;box-shadow:0 0 0 3px #ff834666!important}
html body.tracking-page .tracking-form button{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 30px;border:0!important;border-radius:999px!important;background:var(--sg-ink)!important;color:#fff!important;font:600 17px/1 Rubik,Arial,sans-serif!important;letter-spacing:0!important;text-transform:none!important;cursor:pointer}
html body.tracking-page .tracking-form button:hover{background:#2a2a28!important;transform:none!important}
html body.tracking-page .tracking-form button:focus-visible{outline:3px solid var(--sg-or);outline-offset:3px}
html body.tracking-page .tracking-result{margin-top:clamp(12px,1.6vw,18px)}
@media(max-width:760px){html body.tracking-page .tracking-form{grid-template-columns:1fr}}

/* Sin resultado / consultando */
html body.tracking-page .tracking-empty{padding:clamp(18px,2.4vw,26px)!important;border:1px solid #ebe8df!important;border-radius:20px!important;background:var(--sg-paper)!important;color:var(--sg-mute);font:400 16px/1.5 Rubik,Arial,sans-serif}
html body.tracking-page .tracking-empty>strong{margin:0 0 4px;color:var(--sg-ink);font:600 20px/1.3 Rubik,Arial,sans-serif}

/* Tarjeta del pedido */
.sg-card{padding:clamp(18px,3vw,32px);border:1px solid #ebe8df;border-radius:22px;background:var(--sg-paper);color:var(--sg-ink);animation:sg-in .3s ease-out}
@keyframes sg-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.sg-k{margin:0;color:var(--sg-or-ink);font:600 13px/1.2 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase}
.sg-k time{color:#8a877e;font-weight:500}
.sg-title{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;margin-top:10px}
.sg-title h2{margin:0;font:400 clamp(30px,5vw,60px)/1 "Unbounded",UnboundedCompacta,Impact,sans-serif;letter-spacing:-.005em;text-transform:uppercase;text-wrap:balance}
.sg-pill{display:inline-flex;align-items:center;gap:9px;padding:10px 18px;border-radius:999px;background:#fdc9a8;color:#5e260b;font:500 16px/1 Rubik,Arial,sans-serif;white-space:nowrap}
.sg-pill i{width:13px;height:13px;border-radius:50%;background:#b43d0a}
.sg-pill svg{width:20px;height:20px;flex:none;color:#ff8346}
.sg-pill.is-done{background:var(--sg-ink);color:#fff}.sg-pill.is-done i{background:#ff8346}
.sg-pill.is-wait{background:#fff;box-shadow:inset 0 0 0 1.5px #d6d2c6;color:#3d3a34}.sg-pill.is-wait i{background:#ff8346}
.sg-pill.is-bad{background:#fff;box-shadow:inset 0 0 0 1.5px var(--sg-ink);color:#b3261e}
.sg-pill.is-off{background:transparent;box-shadow:inset 0 0 0 1.5px #c2bfb6;color:var(--sg-mute)}.sg-pill.is-off i{background:#a9a69c}
.sg-sub{margin:8px 0 0;color:var(--sg-mute);font:500 clamp(16px,1.7vw,22px)/1.35 Rubik,Arial,sans-serif}
.sg-stale{margin:16px 0 0;padding:12px 16px;border-radius:12px;background:#fff;color:var(--sg-mute);font:400 14px/1.5 Rubik,Arial,sans-serif}

/* Entrega estimada */

/* Pasos */
.sg-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:clamp(24px,3vw,34px) 0 0;padding:0;list-style:none}
.sg-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;color:var(--sg-mute)}
.sg-step b{font:500 clamp(14px,1.4vw,17px)/1.25 Rubik,Arial,sans-serif;overflow-wrap:anywhere}
.sg-dot{position:relative;z-index:2;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;border:3px solid #cfcbc0;color:#fff}
.sg-dot svg{width:20px;height:20px}
.sg-step:not(:first-child)::before,.sg-step:not(:first-child)::after{content:"";position:absolute;z-index:1;top:17.5px;right:50%;width:100%;height:3px}
.sg-step:not(:first-child)::before{background:#d6d2c6}
.sg-step:not(:first-child)::after{background:var(--sg-ink);transform:scaleX(0);transform-origin:left;right:auto;left:-50%}
.sg-step.is-done:not(:first-child)::after,.sg-step.is-active:not(:first-child)::after,.sg-step.is-waiting:not(:first-child)::after{animation:sg-fill .5s ease-out calc(var(--i)*.22s + .15s) forwards}
@keyframes sg-fill{to{transform:scaleX(1)}}
.sg-step.is-done .sg-dot{background:var(--sg-ink);border-color:var(--sg-ink)}
.sg-step.is-done{color:var(--sg-ink)}.sg-step.is-done b{font-weight:600}
.sg-step.is-active .sg-dot,.sg-step.is-waiting .sg-dot{border-color:var(--sg-or);background:var(--sg-or);box-shadow:inset 0 0 0 6px #fff,0 0 0 5px #fdd9c4}
.sg-step.is-active,.sg-step.is-waiting{color:var(--sg-or-ink)}.sg-step.is-active b,.sg-step.is-waiting b{font-weight:600}

/* Equipación + envío */
.sg-card h3{margin:0 0 14px;font:600 12px/1.2 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase}
.sg-item{display:grid;grid-template-columns:clamp(88px,11vw,126px) minmax(0,1fr);align-items:center;gap:clamp(14px,2vw,24px)}
.sg-item+.sg-item{margin-top:14px}
.sg-photo{display:block;aspect-ratio:1;border-radius:16px;background:#fff;overflow:hidden}
.sg-photo img{display:block;width:100%;height:100%;object-fit:contain}
.sg-item h4{margin:0 0 6px;font:600 clamp(19px,2.2vw,26px)/1.2 Rubik,Arial,sans-serif;overflow-wrap:anywhere}
.sg-item p{margin:2px 0;color:var(--sg-mute);font:400 clamp(15px,1.4vw,18px)/1.4 Rubik,Arial,sans-serif}
.sg-item .sg-meta{font-size:14px}
.sg-custom{display:inline-block;margin-top:6px;padding:4px 10px;border-radius:999px;background:var(--sg-ink);color:#fff;font:600 13px/1.3 Rubik,Arial,sans-serif;font-style:normal}
.sg-copy{display:inline-flex;align-items:center;align-self:flex-start;gap:8px;min-height:36px;padding:0;border:0;background:none;color:var(--sg-ink);font:500 15px Rubik,Arial,sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.sg-copy svg{width:20px;height:20px}
.sg-copy:focus-visible{outline:3px solid var(--sg-ink);outline-offset:3px;border-radius:4px}
.sg-track{display:flex;align-items:center;justify-content:center;gap:8px;min-height:54px;margin-top:18px;border-radius:999px;background:var(--sg-ink);color:#fff;font:600 17px/1 Rubik,Arial,sans-serif;text-decoration:none}
.sg-track:hover{background:#2a2a28}
.sg-track:focus-visible{outline:3px solid var(--sg-or);outline-offset:3px}
.sg-soft{margin:0;color:var(--sg-mute);font:400 16px/1.5 Rubik,Arial,sans-serif}

/* Pago pendiente */
.sg-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;margin-top:20px}
.sg-btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 30px;border:0;border-radius:999px;background:var(--sg-ink);color:#fff;font:600 17px/1 Rubik,Arial,sans-serif;text-transform:none;letter-spacing:0;cursor:pointer}
.sg-btn:hover{background:#2a2a28}
.sg-btn:focus-visible{outline:3px solid var(--sg-or);outline-offset:3px}
.sg-btn[disabled]{opacity:.6;cursor:default}
.sg-link{display:inline-flex;align-items:center;gap:10px;color:var(--sg-ink);font:500 16px/1.3 Rubik,Arial,sans-serif;text-decoration:none}
.sg-actions .sg-link{text-decoration:underline;text-underline-offset:4px}
.sg-link u{text-underline-offset:4px;font-weight:600}
.sg-link:focus-visible{outline:3px solid var(--sg-ink);outline-offset:3px;border-radius:4px}
.sg-wa{display:inline-flex;width:26px;height:26px}.sg-wa svg{width:100%;height:100%}

/* Pie de la tarjeta */

/* Celular: pasos en vertical, envío debajo */
@media(max-width:760px){
}
@media(max-width:640px){
  .sg-steps{grid-template-columns:1fr;gap:0}
  .sg-step{flex-direction:row;align-items:flex-start;gap:16px;padding-bottom:20px;text-align:left}
  .sg-step:last-child{padding-bottom:0}
  .sg-step b{align-self:center;font-size:17px}
  .sg-step:not(:first-child)::before,.sg-step:not(:first-child)::after{display:none}
  .sg-step:not(:last-child)::before{content:"";display:block;position:absolute;z-index:1;left:17.5px;top:38px;bottom:0;right:auto;width:3px;height:auto;background:#d6d2c6}
  .sg-step.is-lit:not(:last-child)::before{background:var(--sg-ink)}
  .sg-title h2{font-size:clamp(28px,9vw,40px)}
}
@media(prefers-reduced-motion:reduce){
  .sg-card{animation:none}
  .sg-step:not(:first-child)::after{animation:none!important;transform:scaleX(1)}
  .sg-step.is-future:not(:first-child)::after{transform:scaleX(0)}
}

/* Pedido entregado: Peyo celebrando junto al titular */
.sg-head{position:relative}
.sg-peyo{position:absolute;right:0;top:-4px;width:clamp(88px,10vw,112px);height:auto;pointer-events:none;transform:rotate(3deg)}
.sg-done .sg-head{padding-right:clamp(96px,12vw,128px)}
@media(max-width:520px){.sg-peyo{top:0;width:86px}.sg-done .sg-head{padding-right:92px}}


/* ===== Rediseño: barra "Consultando", franja de envío, caja de pago, fila de tres ===== */
html body.tracking-page .tracking-form[hidden]{display:none!important}
html body.tracking-page .help-hero:has(+ .tracking-form[hidden]) .tracking-intro{display:none}
.sg-period{color:#fbc7a6}
.sg-title h2 .sg-period{color:var(--sg-or)}
.sg-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 20px;margin-bottom:clamp(12px,1.6vw,18px);padding:12px 12px 12px 22px;border:1px solid #ebe8df;border-radius:999px;background:var(--sg-paper);font:400 16px/1.2 Rubik,Arial,sans-serif;color:var(--sg-mute)}
.sg-bar p{margin:0}.sg-bar b{color:var(--sg-ink);font-weight:600}
.sg-again{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 22px;border:0;border-radius:999px;background:var(--sg-ink);color:#fff;font:600 15px/1 Rubik,Arial,sans-serif;cursor:pointer}
.sg-again:hover{background:#2a2a28}
.sg-again:focus-visible{outline:3px solid var(--sg-or);outline-offset:3px}

.sg-strip{display:flex;align-items:center;flex-wrap:wrap;gap:16px clamp(18px,2.4vw,32px);margin-top:clamp(16px,2.2vw,24px);padding:clamp(14px,2vw,20px) clamp(16px,2.4vw,26px);border-radius:16px;background:var(--sg-peach)}
.sg-strip.is-soft{padding:16px 22px}
.sg-cell{display:flex;flex-direction:column;gap:4px;min-width:0}
.sg-cell+.sg-cell{padding-left:clamp(18px,2.4vw,32px);border-left:1px solid #f0bf9f}
.sg-cell small{font:600 12px/1.2 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--sg-or-ink)}
.sg-cell b{font:700 clamp(18px,2vw,24px)/1.2 Rubik,Arial,sans-serif;overflow-wrap:anywhere}
.sg-cell-eta{flex-direction:row;align-items:center;gap:16px}
.sg-cell-eta p{display:flex;flex-direction:column;gap:3px;margin:0}
.sg-cell-eta b{font-size:clamp(20px,2.6vw,30px)}
.sg-cell-eta p span{color:var(--sg-mute);font:400 14px/1.35 Rubik,Arial,sans-serif}
.sg-eta-ico{display:grid;place-items:center;flex:none;width:clamp(48px,5vw,60px);aspect-ratio:1;border-radius:50%;background:var(--sg-peach2);color:var(--sg-or-ink)}
.sg-eta-ico svg{width:46%;height:46%}
.sg-guide b{letter-spacing:.02em}
.sg-track{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;margin:0 0 0 auto;padding:0 28px;border-radius:999px;background:var(--sg-ink);color:#fff;font:600 16px/1 Rubik,Arial,sans-serif;text-decoration:none;white-space:nowrap}
.sg-track:hover{background:#2a2a28}
.sg-track:focus-visible{outline:3px solid var(--sg-or);outline-offset:3px}

.sg-trio{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);margin-top:clamp(22px,3vw,32px);padding-top:clamp(18px,2.4vw,26px);border-top:1px solid var(--sg-line)}
.sg-trio>section{padding:0 clamp(14px,2.4vw,30px);min-width:0}
.sg-trio>section:first-child{padding-left:0}
.sg-trio>section+section{border-left:1px solid var(--sg-line)}
.sg-trio.is-help{grid-template-columns:1fr}
.sg-trio.is-help>section{padding:0}
.sg-items h3,.sg-dest h3,.sg-help h3,.sg-paybox h3{margin:0 0 14px}
.sg-items{padding-right:0}
.sg-dest>div{display:flex;align-items:flex-start;gap:12px}
.sg-pin{flex:none;width:26px;height:26px;color:var(--sg-mute)}
.sg-pin svg{display:block;width:100%;height:100%}
.sg-dest p{display:flex;flex-direction:column;gap:3px;margin:0}
.sg-dest b{font:600 17px/1.35 Rubik,Arial,sans-serif;overflow-wrap:anywhere}
.sg-dest small{color:var(--sg-mute);font:400 14px/1.4 Rubik,Arial,sans-serif}
.sg-help .sg-link{align-items:center;font-size:16px}
.sg-help .sg-link u{text-decoration:underline}

.sg-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(18px,3vw,36px);margin-top:clamp(22px,3vw,32px)}
.sg-paybox{padding:clamp(18px,2.4vw,28px);border-radius:18px;background:var(--sg-peach)}
.sg-paybox h3{color:var(--sg-or-ink)}
.sg-bank{display:grid;gap:0;margin-bottom:18px}
.sg-bank>div{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;padding:12px 0;border-top:1px solid #f0bf9f}
.sg-bank>div:first-child{border-top:0;padding-top:0}
.sg-bank small{flex:0 0 100px;color:var(--sg-mute);font:400 15px/1.2 Rubik,Arial,sans-serif}
.sg-bank b{flex:1;min-width:0;font:700 clamp(18px,2vw,22px)/1.2 Rubik,Arial,sans-serif;overflow-wrap:anywhere}
.sg-actions{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:0}
.sg-paybox .sg-btn{width:100%}
.sg-actions .sg-link{text-decoration:underline;text-underline-offset:4px}
.sg-actions [data-resume-note],.sg-actions [data-resume-panel]{width:100%}
.sg-split-side .sg-items{margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid var(--sg-line)}
.sg-split-side .sg-dest{margin-bottom:18px}
.sg-note{margin:0;padding:12px 16px;border-radius:12px;background:#efede5;color:var(--sg-mute);font:400 15px/1.45 Rubik,Arial,sans-serif}
.sg-trio.is-help{margin-top:clamp(18px,2.4vw,26px)}
.sg-hello{margin:clamp(16px,2vw,22px) 0 0;color:var(--sg-mute);font:400 14px/1.5 Rubik,Arial,sans-serif;text-align:center}

@media(max-width:900px){
  .sg-track{margin-left:0;width:100%}
  .sg-trio{grid-template-columns:1fr;gap:22px}
  .sg-trio>section{padding:0}
  .sg-trio>section+section{border-left:0;padding-top:22px;border-top:1px solid var(--sg-line)}
  .sg-split{grid-template-columns:1fr}
}
@media(max-width:640px){
  .sg-strip{flex-direction:column;align-items:stretch;gap:0}
  .sg-cell+.sg-cell{padding:14px 0 0;margin-top:14px;border-left:0;border-top:1px solid #f0bf9f}
  .sg-track{margin-top:16px}
  .sg-bar{border-radius:22px;padding:14px 14px 14px 18px}
  .sg-again{width:100%;justify-content:center}
  .sg-bank small{flex-basis:100%}
}

/* Franja en una sola fila en escritorio */
@media(min-width:901px){
  .sg-strip{flex-wrap:nowrap;gap:0 clamp(14px,2vw,26px)}
  .sg-cell-eta p span{font-size:13px}
  .sg-cell-eta{gap:12px}
  .sg-track{padding:0 22px;font-size:15px;flex:none}
  .sg-cell+.sg-cell{padding-left:clamp(14px,2vw,26px)}
}
.sg-help .sg-link{white-space:nowrap;font-size:15px;gap:8px}
.sg-help .sg-link>span:last-child{display:inline}
.sg-item.no-photo{grid-template-columns:minmax(0,1fr)}
.sg-item.no-photo .sg-photo{display:none}
@media(min-width:901px){
  .sg-strip{flex-wrap:wrap;row-gap:16px}
  .sg-cell-eta{flex:none}
  .sg-cell:not(.sg-cell-eta){min-width:120px;max-width:100%}
  .sg-cell b{overflow-wrap:anywhere}
}
.sg-track{white-space:normal;text-align:center;padding-top:14px;padding-bottom:14px;line-height:1.25;max-width:100%}