/* Cuenta y piezas que comparte con recompensas (sello de puntos, barra de nivel, partículas). */
#raiz{position:relative;min-height:72vh}

/* ---------- sello de puntos ---------- */
.sello{position:relative;overflow:hidden;background:var(--rojo);color:var(--crema);border:2px solid var(--tinta);border-radius:16px;box-shadow:0 5px 0 var(--tinta);padding:34px 20px 22px}
.sello::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;background:repeating-linear-gradient(90deg,var(--crema) 0 20px,var(--rojo) 20px 40px);border-bottom:2px solid var(--tinta)}
.sello-eti{font-size:var(--t14);font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.sello-num{font-family:"Alfa",serif;font-weight:400;font-size:var(--t56);line-height:1.05;color:var(--amar);margin:2px 0}
.sello-num.grande{font-size:clamp(56px,20vw,88px)}
.sello-uni{font-weight:700}
.sello .btn{margin-top:16px}
.part{position:absolute;top:38%;width:10px;height:14px;border-radius:3px;background:var(--crema);pointer-events:none;will-change:transform,opacity}
.part.am{background:var(--amar)}
.nivel-barra{height:16px;margin-top:16px;border-radius:99px;border:2px solid var(--crema);background:rgba(246,235,211,.22);overflow:hidden}
.nivel-barra i{display:block;height:100%;background:var(--amar);transform-origin:left center;transform:scaleX(var(--p,0));transition:transform 900ms var(--ease-out)}
.nivel-txt{margin-top:8px;font-size:var(--t14);font-weight:700}

/* ---------- entrada ---------- */
.auth{display:grid;gap:20px;margin-top:20px}
.auth-bene{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.auth-card{position:relative;background:var(--papel);border:2px solid var(--tinta);border-radius:16px;box-shadow:0 5px 0 var(--tinta);padding:20px 18px 22px}
.pasos{display:flex;gap:6px;margin-bottom:20px}
.pasos i{position:relative;flex:1;height:6px;border-radius:3px;background:var(--linea);overflow:hidden}
.pasos i::after{content:"";position:absolute;inset:0;background:var(--rojo);transform:scaleX(0);transform-origin:left center;transition:transform 400ms var(--ease-out)}
.pasos i.on::after{transform:none}
.paso-in{animation:paso-in 260ms var(--ease-out) both}
@keyframes paso-in{from{opacity:0;transform:translateX(18px)}}
.paso-t{font-family:"Alfa",serif;font-weight:400;font-size:var(--t28);line-height:1.1;margin-bottom:8px}
.paso-in .sub{margin-bottom:20px}
.atras{display:inline-flex;align-items:center;gap:6px;min-height:48px;margin:-8px 0 0 -8px;padding:0 8px;background:none;border:0;font-weight:800;font-size:var(--t14);cursor:pointer;transition:transform 120ms var(--ease-out)}
.atras:active{transform:scale(.97)}
.atras .i{width:18px;height:18px;transform:scaleX(-1)}
.tel-fila{display:flex;gap:8px}
.tel-fila .pref{display:grid;place-items:center;min-height:52px;padding:0 14px;border:2px solid var(--tinta);border-radius:10px;background:var(--sk);font-weight:800}
.tel-fila input{flex:1;min-width:0;font-size:var(--t20);letter-spacing:.04em;font-weight:700}
.codigo{display:flex;gap:12px;justify-content:center;margin:4px 0 22px}
.codigo input{width:64px;height:76px;padding:0;text-align:center;font-family:"Alfa",serif;font-size:var(--t40);border:2px solid var(--tinta);border-radius:12px;background:var(--papel);caret-color:var(--rojo);transition:border-color 160ms var(--ease-out),background-color 160ms var(--ease-out)}
.codigo input:focus{outline:3px solid var(--amar);outline-offset:0;box-shadow:0 0 0 5px var(--tinta)}
.codigo input.lleno{background:#FFF1D2}
.codigo.err input{border-color:var(--error)}
.codigo.sacude{animation:sacude 240ms var(--ease-out)}
.paso-in .btn+.btn,.paso-in [data-reenviar]{margin-top:12px}
.ayuda{margin-top:14px;font-size:var(--t14);color:rgba(31,26,23,.84)}
.bienvenida .sello{margin-bottom:22px;text-align:center}
.bienvenida .paso-t{text-align:center}
.bienvenida .paso-t .lob{font-size:1.15em;color:var(--rojo)}
.bienvenida .sub{margin-left:auto;margin-right:auto;text-align:center}

/* ---------- perfil ---------- */
.cuenta-grid{display:grid;gap:28px;margin-top:20px}
.col-a{display:grid;gap:20px;align-content:start}
.perfil{display:grid;gap:14px;background:var(--papel);border:2px solid var(--tinta);border-radius:16px;box-shadow:0 5px 0 var(--tinta);padding:18px}
.perfil-fila{display:flex;gap:16px;align-items:center}
.avatar{width:72px;height:72px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--rojo);color:var(--crema);border:2px solid var(--tinta);box-shadow:0 3px 0 var(--tinta);font-family:"Alfa",serif;font-size:var(--t28)}
.perfil-d{min-width:0}
.perfil-d h2{font-family:"Alfa",serif;font-weight:400;font-size:var(--t20);line-height:1.15;overflow-wrap:anywhere}
.perfil-d p{font-size:var(--t14);overflow-wrap:anywhere}
.perfil-d .suave{color:rgba(31,26,23,.78);font-weight:600}
.editar{padding-top:6px}
.editar .acciones{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ped-lista{display:grid;gap:16px}
.ped{display:grid;gap:6px;background:var(--papel);border:2px solid var(--tinta);border-radius:14px;box-shadow:0 4px 0 var(--tinta);padding:14px 16px}
.ped-cab{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ped-turno{font-family:"Alfa",serif;font-size:var(--t20)}
.ped-fecha{font-size:var(--t14);color:rgba(31,26,23,.78)}
.ped-items{font-size:var(--t16);line-height:1.4}
.ped-pie{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}
.ped-pie .precio{font-size:var(--t20);display:block;line-height:1.1}
.ped-pie small{font-size:var(--t14);color:var(--verde);font-weight:800}
.etq.e-listo{background:var(--verde);border-color:var(--verde);color:var(--crema)}
.etq.e-entregado{background:var(--tinta);color:var(--crema)}
.ped-acc{display:flex;gap:10px;align-items:center}
.ped-ver{font-weight:800;font-size:var(--t14);display:inline-flex;align-items:center;min-height:48px}
.salir{margin-top:32px}
.sk-campo{height:52px;border-radius:10px;margin:6px 0 16px}

@media (min-width:900px){
  .auth{grid-template-columns:5fr 6fr;gap:48px;align-items:start;margin-top:32px}
  .auth-lado{padding-top:12px}
  .auth-card{padding:28px 28px 30px}
  .cuenta-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start;margin-top:32px}
  .col-a{position:sticky;top:96px}
}
@media (hover:hover){
  .atras:hover{text-decoration:underline;text-underline-offset:3px}
  .ped-ver:hover{text-decoration:underline;text-underline-offset:3px}
}
@media (prefers-reduced-motion:reduce){
  .paso-in{animation-name:entra-fade;animation-duration:150ms}
  .atras:active{transform:none}
  .codigo.sacude{animation:none}
  .nivel-barra i,.pasos i::after{transition:none}
  .part{display:none}
}
.sello-num .col span{text-align:center}