/* ===================== DESIGN SYSTEM ===================== */
:root{
  --bg:#0C0C0E;
  --surface:#15151A;
  --elevated:#1E1E24;
  --border:#2A2A31;
  --gold:#C9A24B;
  --gold-light:#E7CB86;
  --gold-dark:#9A7426;
  --text:#F5F2EC;
  --text-2:#A8A29A;
  --text-3:#6E6A63;
  --wa:#25D366;
  --error:#FF6B6B;
  --green:#3FBF6A;
  --r-card:16px;
  --r-btn:14px;
  --ease:cubic-bezier(.16,.84,.44,1);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:'Inter',sans-serif;
  background:#08080A;
  color:var(--text);
  display:flex;align-items:center;justify-content:center;
  min-height:100dvh;
}
/* desktop ambient backdrop */
/* ===================== LAYOUT (MOBILE-FIRST, sin marco de teléfono) =====================
   Base = celular real: la app ocupa TODO el viewport. Sin notch/reloj/marco falsos.
   En pantallas grandes (desktop) se centra como una columna tipo app (ver @media abajo). */
.stage{
  position:fixed;inset:0;
  background:var(--bg);
  display:flex;
  z-index:0;
}
.phone{
  position:relative;
  width:100%;
  height:100%;
  background:var(--bg);
  overflow:hidden;
  display:flex;flex-direction:column;
}
/* textura interior sutil, autocontenida */
.phone::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(600px 300px at 50% -5%, rgba(201,162,75,.06), transparent 70%);
}

/* ===================== SHARED HEADER ===================== */
.app-header{
  position:relative;z-index:10;
  padding:calc(env(safe-area-inset-top, 0px) + 16px) 20px 14px;
  flex:0 0 auto;
  border-bottom:1px solid transparent;
}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.back-btn{
  width:42px;height:42px;border-radius:13px;flex:0 0 auto;
  border:1px solid var(--border);
  background:var(--elevated);
  color:var(--gold);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:transform .12s var(--ease),background .2s;
}
.back-btn:active{transform:scale(.92)}
.back-btn svg{width:20px;height:20px}
.brand-lockup{display:flex;flex-direction:column;align-items:center;line-height:1;gap:3px}
.brand-lockup .b-name{font-family:'Playfair Display',serif;font-weight:700;font-size:22px;color:var(--text);letter-spacing:.5px}
.brand-lockup .b-name b{color:var(--gold);font-weight:700}
.brand-lockup .b-sub{font-family:'Oswald',sans-serif;font-weight:500;font-size:8px;letter-spacing:3.5px;color:var(--gold);text-transform:uppercase}
.brand-logo{height:56px;width:auto;display:block;flex:0 0 auto}
.header-spacer{width:42px;flex:0 0 auto}

/* progress */
.progress{margin-top:18px}
.progress-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.progress-meta span{font-family:'Oswald',sans-serif;font-weight:500;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--text-2)}
.progress-meta .pm-step b{color:var(--gold);font-weight:600}
.progress-track{height:4px;border-radius:99px;background:var(--elevated);overflow:hidden}
.progress-fill{
  height:100%;width:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--gold-dark),var(--gold) 45%,var(--gold-light));
  transform-origin:left center;transform:scaleX(0);
  transition:transform .5s var(--ease);
}

/* ===================== SCREEN STACK ===================== */
.stack{position:relative;flex:1 1 auto;overflow:hidden}
.screen{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;
  opacity:0;transform:translateX(var(--enter,0));
  transition:opacity .28s ease, transform .3s var(--ease);
  pointer-events:none;
}
.screen.active{opacity:1;transform:translateX(0);z-index:2;pointer-events:auto}
.screen.leaving{opacity:0;transform:translateX(var(--leave,0));z-index:1}
.screen-body{
  flex:1 1 auto;overflow-y:auto;overflow-x:hidden;
  padding:22px 20px 8px;
  -ms-overflow-style:none;scrollbar-width:none;
}
.screen-body::-webkit-scrollbar{display:none}
.screen-foot{
  flex:0 0 auto;padding:12px 20px calc(env(safe-area-inset-bottom, 0px) + 20px);
  background:linear-gradient(to top,var(--bg) 60%,transparent);
}

/* ===================== TYPOGRAPHY ===================== */
.title{font-family:'Oswald',sans-serif;font-weight:600;font-size:30px;letter-spacing:1px;text-transform:uppercase;margin:0 0 6px;color:var(--text)}
.subtitle{font-size:13.5px;line-height:1.5;color:var(--text-2);margin:0 0 20px}
.subtitle b{color:var(--gold);font-weight:500}

/* ===================== BUTTONS ===================== */
.btn{
  width:100%;border:none;cursor:pointer;
  border-radius:var(--r-btn);padding:16px;
  font-family:'Inter',sans-serif;font-weight:700;font-size:15px;
  letter-spacing:2px;text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.btn-primary{
  color:#1B1407;
  background:linear-gradient(180deg,var(--gold-light),var(--gold) 55%,var(--gold-dark));
  box-shadow:0 8px 22px -4px rgba(201,162,75,.4);
  transition:transform .12s var(--ease),box-shadow .25s,opacity .3s,filter .3s;
}
.btn-primary:active{transform:scale(.975);box-shadow:0 4px 14px -4px rgba(201,162,75,.5)}
.btn-primary:disabled{
  opacity:.4;filter:grayscale(.6);cursor:not-allowed;
  box-shadow:none;background:linear-gradient(180deg,#54504a,#3a372f);
}
.btn-secondary{
  background:var(--elevated);
  border:1px solid var(--border);
  color:var(--gold);
  font-size:12.5px;letter-spacing:1.5px;
  transition:transform .12s var(--ease),background .2s,border-color .2s;
}
.btn-secondary:active{transform:scale(.975)}
.btn-secondary svg{width:18px;height:18px}

/* ===================== CARDS ===================== */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  padding:16px;
  transition:transform .14s var(--ease),box-shadow .28s ease,border-color .28s ease,background .28s ease;
  cursor:pointer;position:relative;overflow:hidden;
}
.card:active{transform:scale(.985)}
.card.selected{
  border-color:var(--gold);
  background:linear-gradient(180deg,rgba(201,162,75,.08),rgba(201,162,75,0) 55%),var(--surface);
  box-shadow:0 0 0 1px var(--gold), 0 0 22px -2px rgba(201,162,75,.28);
}
.list{display:flex;flex-direction:column;gap:12px}

.ring{
  width:42px;height:42px;border-radius:50%;flex:0 0 auto;
  border:1px solid rgba(201,162,75,.45);
  background:rgba(0,0,0,.25);
  color:var(--gold);
  display:flex;align-items:center;justify-content:center;
}
.ring svg{width:20px;height:20px}

.tick{
  width:26px;height:26px;border-radius:50%;flex:0 0 auto;
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:transparent;background:transparent;
  transition:all .25s var(--ease);
}
.tick svg{width:15px;height:15px;opacity:0;transition:opacity .2s}
.selected .tick{background:var(--gold);border-color:var(--gold);color:#15110A}
.selected .tick svg{opacity:1}

.muted{color:var(--text-2);font-size:13px;display:flex;align-items:center;gap:5px}
.ic12{width:13px;height:13px;flex:0 0 auto}

/* sucursal card */
.card-top{display:flex;align-items:flex-start;gap:13px}
.card-main{flex:1;min-width:0}
.row-name{display:flex;align-items:center;gap:8px;margin-bottom:4px;flex-wrap:wrap}
.name-osw{font-family:'Oswald',sans-serif;font-weight:600;font-size:21px;letter-spacing:.6px;text-transform:uppercase}
.badge{
  font-family:'Oswald',sans-serif;font-size:9px;font-weight:500;letter-spacing:1.5px;
  color:var(--gold);border:1px solid rgba(201,162,75,.5);
  border-radius:99px;padding:2px 8px;text-transform:uppercase;
}
.divider{height:1px;background:var(--border);margin:14px 0}
.card-bot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mini-btn{
  display:flex;align-items:center;gap:7px;
  font-size:11px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--gold);background:rgba(0,0,0,.3);
  border:1px solid var(--border);border-radius:10px;
  padding:8px 12px;cursor:pointer;transition:background .2s,transform .12s var(--ease);
}
.mini-btn:active{transform:scale(.95)}
.mini-btn svg{width:15px;height:15px}
.hint{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-3)}

/* servicio card */
.svc{display:flex;align-items:center;justify-content:space-between;gap:14px}
.svc-left{display:flex;align-items:center;gap:14px;min-width:0}
.svc-ring{
  width:54px;height:54px;border-radius:50%;flex:0 0 auto;
  border:1px solid rgba(201,162,75,.4);background:rgba(0,0,0,.3);
  color:var(--gold);display:flex;align-items:center;justify-content:center;
}
.svc-ring svg{width:27px;height:27px}
.svc-name{font-family:'Oswald',sans-serif;font-weight:500;font-size:20px;letter-spacing:.5px;text-transform:uppercase;line-height:1;margin-bottom:6px}
.svc-price{font-family:'Oswald',sans-serif;font-weight:600;font-size:21px;color:var(--gold);letter-spacing:.5px;flex:0 0 auto}

/* barbero card */
.barber{display:flex;align-items:center;gap:14px}
.avatar{
  width:52px;height:52px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  font-family:'Oswald',sans-serif;font-weight:600;font-size:22px;
  color:var(--gold);
  background:radial-gradient(circle at 30% 25%,rgba(201,162,75,.22),rgba(0,0,0,.35));
  border:1px solid rgba(201,162,75,.35);
}
.avatar.spark{color:var(--gold)}
.avatar.spark svg{width:26px;height:26px}
.barber-info{flex:1;min-width:0}
.barber-name{font-family:'Oswald',sans-serif;font-weight:500;font-size:19px;letter-spacing:.5px;text-transform:uppercase;line-height:1.1}
.barber-sub{font-size:12px;color:var(--text-2);margin-top:3px}

/* ===== Fase 8: imágenes (sucursal / servicio / barbero) ===== */
/* Sucursal con foto: la imagen va de fondo (el gradiente oscuro se aplica inline). */
.suc-card.has-foto{background-size:cover;background-position:center;border-color:rgba(255,255,255,.16);min-height:132px;display:flex;flex-direction:column;justify-content:flex-end}
.suc-card.has-foto .name-osw{color:#fff}
.suc-card.has-foto .muted{color:rgba(255,255,255,.9)}
.suc-card.has-foto.selected{border-color:var(--gold)}
/* Dirección de la sucursal = link al mapa (Google Maps). El área clickeable es EXACTAMENTE el
   pin + el texto de la dirección (inline + fit-content): NO hay ningún botón invisible que ocupe
   el resto de la fila (tocar el resto de la card selecciona la sucursal). La dirección va con un
   subrayado sutil para que se note que ESA LETRA es el link. */
.suc-map{display:inline-flex;align-items:center;gap:5px;width:fit-content;max-width:100%;vertical-align:top;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.suc-map-txt{border-bottom:1px solid rgba(201,162,75,.5);line-height:1.3}
.suc-map:active{opacity:.72}
.suc-card.has-foto .suc-map-txt{border-color:rgba(240,217,138,.6)}
/* Servicio con foto: reemplaza el círculo del ícono, mismo tamaño. */
.svc-img{width:54px;height:54px;border-radius:50%;flex:0 0 auto;background-size:cover;background-position:center;border:1px solid rgba(201,162,75,.4)}
.svc-desc{font-size:11.5px;color:var(--text-3);margin-top:5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Barbero con foto: la imagen cubre el avatar (fallback a inicial si no hay). */
.avatar.has-foto{background-size:cover;background-position:center;color:transparent}

/* ===================== STAGGER ENTRANCE ===================== */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.stagger>*{animation:rise .42s var(--ease) both;animation-delay:var(--d,0ms)}

/* ===================== CALENDAR (paso 4) ===================== */
.cal-card{
  border:1px solid rgba(201,162,75,.3);
  border-radius:18px;background:rgba(0,0,0,.32);
  padding:18px;margin-bottom:20px;
}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.cal-month{font-family:'Oswald',sans-serif;font-weight:500;font-size:16px;letter-spacing:2px;text-transform:uppercase}
.cal-nav{
  width:32px;height:32px;border-radius:50%;
  border:1px solid var(--border);background:transparent;color:var(--gold);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,opacity .2s,transform .12s var(--ease);
}
.cal-nav:active{transform:scale(.9)}
.cal-nav:disabled{opacity:.25;cursor:not-allowed;color:var(--text-3)}
.cal-nav svg{width:16px;height:16px}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.cal-dow span{font-size:10px;font-weight:600;color:var(--text-3);letter-spacing:.5px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px 4px;text-align:center}
.cal-day{
  height:40px;display:flex;align-items:center;justify-content:center;position:relative;
  font-size:14px;color:var(--text);cursor:pointer;border-radius:50%;
  transition:color .2s;
}
.cal-day .num{position:relative;z-index:2;width:40px;height:40px;display:flex;align-items:center;justify-content:center}
.cal-day .dot{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--gold);z-index:2}
.cal-day.disabled{color:var(--text-3);opacity:.45;cursor:not-allowed}
.cal-day.disabled .dot{display:none}
.cal-day.sel{color:#15110A;font-weight:700}
.cal-day.sel .dot{background:#15110A}
.cal-day .pop{
  position:absolute;top:50%;left:50%;width:40px;height:40px;border-radius:50%;
  background:var(--gold);transform:translate(-50%,-50%) scale(0);z-index:1;
  box-shadow:0 0 16px -2px rgba(201,162,75,.6);
}
.cal-day.sel .pop{animation:dayPop .32s var(--ease) forwards}
@keyframes dayPop{0%{transform:translate(-50%,-50%) scale(0)}60%{transform:translate(-50%,-50%) scale(1.12)}100%{transform:translate(-50%,-50%) scale(1)}}

/* slots */
.slots-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:14px}
.slots-head h3{font-family:'Oswald',sans-serif;font-weight:600;font-size:13px;letter-spacing:2px;color:var(--gold);margin:0;text-transform:uppercase}
.slots-head .day-lbl{font-size:11px;color:var(--text-2)}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.slot{
  height:46px;border-radius:12px;border:1px solid var(--border);
  background:rgba(255,255,255,.02);color:var(--text);
  font-size:13.5px;font-weight:500;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .2s,background .25s,color .2s,transform .12s var(--ease);
}
.slot:active{transform:scale(.95)}
.slot.taken{color:var(--text-3);text-decoration:line-through;cursor:not-allowed;background:rgba(0,0,0,.25);opacity:.6}
.slot.sel{border-color:var(--gold);background:var(--gold);color:#15110A;font-weight:700;box-shadow:0 0 14px -3px rgba(201,162,75,.6)}
.slots-empty{font-size:13px;color:var(--text-2);padding:18px 0;text-align:center}
@keyframes slotIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.slots.anim .slot{animation:slotIn .3s var(--ease) both;animation-delay:var(--d,0ms)}

/* ===================== FORM (paso 5) ===================== */
.form-card{
  border:1px solid rgba(201,162,75,.22);
  border-radius:18px;background:rgba(0,0,0,.3);
  padding:20px;display:flex;flex-direction:column;gap:20px;
}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--gold)}
.field input{
  width:100%;height:54px;border-radius:14px;
  background:var(--elevated);border:1px solid var(--border);
  color:var(--text);font-family:'Inter',sans-serif;font-size:16px;
  padding:0 16px;outline:none;
  transition:border-color .25s,box-shadow .25s;
}
.field input::placeholder{color:var(--text-3)}
.field input:focus{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 16px -4px rgba(201,162,75,.4)}
.field .help{font-size:11.5px;color:var(--text-2);margin-top:-2px}

/* --- Selector de código de país (campo WhatsApp) --- */
.phone-row{position:relative;display:flex;gap:8px}
.phone-row #inpWhats{flex:1 1 auto;min-width:0}
.cc-btn{
  flex:0 0 auto;display:flex;align-items:center;gap:7px;height:54px;padding:0 13px;
  border-radius:14px;background:var(--elevated);border:1px solid var(--border);
  color:var(--text);cursor:pointer;font-family:'Inter',sans-serif;
  transition:border-color .25s,box-shadow .25s;
}
.cc-btn:hover{border-color:rgba(201,162,75,.5)}
.cc-btn.open{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 16px -4px rgba(201,162,75,.4)}
.cc-btn .cc-flag{width:26px;height:20px;border-radius:3px;object-fit:cover;display:block;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.cc-btn .cc-dial{font-size:15px;font-weight:600;letter-spacing:.3px}
.cc-btn>svg{width:15px;height:15px;color:var(--text-3);transition:transform .25s var(--ease)}
.cc-btn.open>svg{transform:rotate(180deg)}
.cc-pop{
  position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:50;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;
  box-shadow:0 20px 44px -14px rgba(0,0,0,.75);animation:ccPop .16s var(--ease);
}
@keyframes ccPop{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
.cc-search{display:flex;align-items:center;gap:9px;padding:11px 13px;border-bottom:1px solid var(--border)}
.cc-search svg{width:15px;height:15px;color:var(--text-3);flex:0 0 auto}
.cc-search input{flex:1;min-width:0;height:auto;line-height:1.5;background:none;border:none;outline:none;box-shadow:none;padding:2px 0;color:var(--text);caret-color:var(--gold);font-family:'Inter',sans-serif;font-size:14px}
.cc-search input:focus{border:none;box-shadow:none}
.cc-search input::placeholder{color:var(--text-3)}
.cc-list{list-style:none;margin:0;padding:6px;max-height:208px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(201,162,75,.4) transparent}
.cc-list::-webkit-scrollbar{width:6px}
.cc-list::-webkit-scrollbar-track{background:transparent;margin:6px 0}
.cc-list::-webkit-scrollbar-thumb{background:rgba(201,162,75,.35);border-radius:99px}
.cc-list::-webkit-scrollbar-thumb:hover{background:rgba(201,162,75,.6)}
.cc-item{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:11px;cursor:pointer;transition:background .12s}
.cc-item:hover,.cc-item.hl{background:var(--elevated)}
.cc-item.sel{background:rgba(201,162,75,.13)}
.cc-item .fl{width:26px;height:20px;border-radius:3px;object-fit:cover;flex:0 0 auto;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.cc-item .nm{flex:1;font-size:13.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-item .dl{font-size:13px;color:var(--text-2);font-weight:600;flex:0 0 auto}
.cc-empty{padding:16px;text-align:center;color:var(--text-3);font-size:13px}

/* ===================== SUMMARY (paso 6) ===================== */
.summary{
  border:1px solid rgba(201,162,75,.3);
  border-radius:18px;background:var(--surface);
  padding:6px 18px;margin-bottom:20px;
  box-shadow:0 0 22px -8px rgba(201,162,75,.25);
}
.sum-row{display:flex;align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid var(--border)}
.sum-row:last-child{border-bottom:none}
.sum-ring{
  width:40px;height:40px;border-radius:50%;flex:0 0 auto;
  border:1px solid rgba(201,162,75,.4);color:var(--gold);
  display:flex;align-items:center;justify-content:center;
}
.sum-ring svg{width:18px;height:18px}
.sum-label{flex:1;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--text-2)}
.sum-val{text-align:right}
.sum-val .v1{font-size:15px;font-weight:600;color:var(--text)}
.sum-val .v2{font-size:12px;color:var(--text-2);margin-top:2px}

/* ===================== OTP (ingresá código) ===================== */
.otp-card{
  border:1px solid var(--border);border-radius:24px;background:var(--surface);
  padding:34px 24px 28px;margin-top:8px;
  display:flex;flex-direction:column;align-items:center;position:relative;overflow:hidden;
}
.otp-card::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:180px;height:6px;background:radial-gradient(ellipse at center,rgba(201,162,75,.5),transparent 70%);filter:blur(8px)}
.wa-logo{width:62px;height:62px;margin-bottom:18px;filter:drop-shadow(0 0 10px rgba(37,211,102,.25))}
.otp-title{font-family:'Oswald',sans-serif;font-weight:600;font-size:24px;letter-spacing:1px;text-transform:uppercase;margin:0 0 14px;text-align:center}
.otp-sep{display:flex;align-items:center;gap:10px;margin-bottom:18px;opacity:.8}
.otp-sep .l{width:26px;height:1px;background:rgba(201,162,75,.3)}
.otp-sep .d{width:6px;height:6px;transform:rotate(45deg);border:1px solid rgba(201,162,75,.6)}
.otp-instr{font-size:14px;line-height:1.6;color:var(--text-2);text-align:center;margin:0 0 26px}
.otp-instr b{color:var(--gold);font-weight:500}
.otp-wrap{position:relative;width:100%;display:flex;justify-content:center;margin-bottom:26px}
.otp-boxes{display:flex;gap:14px}
.otp-box{
  width:60px;height:70px;border-radius:16px;border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-family:'Oswald',sans-serif;font-size:30px;font-weight:600;color:var(--text);
  transition:border-color .2s,box-shadow .2s;position:relative;background:rgba(0,0,0,.2);
}
.otp-box.active{border:2px solid var(--gold);box-shadow:0 0 16px -3px rgba(201,162,75,.4)}
.otp-cursor{width:1.5px;height:32px;background:var(--gold);animation:blink 1s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.otp-input{position:absolute;inset:0;opacity:0;border:none;background:transparent;font-size:16px;letter-spacing:50px;cursor:pointer}
@keyframes otpFlash{0%{box-shadow:0 0 0 0 rgba(201,162,75,0)}40%{box-shadow:0 0 22px 2px rgba(201,162,75,.85);border-color:var(--gold)}100%{box-shadow:0 0 0 0 rgba(201,162,75,0)}}
.otp-boxes.flash .otp-box{animation:otpFlash .5s ease}
.otp-meta{display:flex;align-items:center;gap:12px;font-size:13.5px;margin-bottom:22px}
.otp-meta .vence{color:var(--text-2)}
.otp-meta .vence b{color:var(--gold);font-weight:600}
.otp-meta .sep-v{width:1px;height:13px;background:var(--border)}
.otp-resend{display:flex;align-items:center;gap:6px;color:var(--gold);background:none;border:none;cursor:pointer;font-size:13.5px;font-family:'Inter',sans-serif;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(201,162,75,.4)}
.otp-resend svg{width:14px;height:14px}
/* Cooldown de reenvío: contando = texto BLANCO (se diferencia del dorado), sin subrayado ni ícono */
.otp-resend.counting{color:var(--text);text-decoration:none;cursor:default}
.otp-resend.counting>svg{display:none}
.otp-resend:disabled:not(.counting){opacity:.5;cursor:default}
/* Aviso de error del código en ROJO */
#otpMsg.err{color:var(--error);font-weight:500}
.otp-secure{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-2);margin-top:6px}
.otp-secure svg{width:15px;height:15px;color:var(--gold)}

/* ===================== SUCCESS ===================== */
.success-body{align-items:center;text-align:center;display:flex;flex-direction:column;padding-bottom:30px}
.check-wrap{position:relative;margin:14px 0 26px;width:118px;height:118px;display:flex;align-items:center;justify-content:center}
.check-glow{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(201,162,75,.45),transparent 65%);transform:scale(0);opacity:0}
.check-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--gold);background:rgba(0,0,0,.4);box-shadow:0 0 30px -4px rgba(201,162,75,.45)}
.success-check{width:118px;height:118px;position:relative;z-index:2}
.sc-tick{fill:none;stroke:var(--gold);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:48;stroke-dashoffset:0;filter:drop-shadow(0 0 6px rgba(201,162,75,.6))}
.success.play .check-glow{animation:glowPulse 1.1s var(--ease) .15s forwards}
.success.play .sc-tick{animation:drawTick .55s var(--ease) .35s backwards}
.success.play .check-ring{animation:ringPop .5s var(--ease) backwards}
@keyframes drawTick{from{stroke-dashoffset:48}to{stroke-dashoffset:0}}
@keyframes glowPulse{0%{transform:scale(.4);opacity:0}55%{opacity:1}100%{transform:scale(1.25);opacity:.55}}
@keyframes ringPop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
@keyframes contentRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.success.play .s-rise{animation:contentRise .5s var(--ease) both}
.success-title{font-family:'Oswald',sans-serif;font-weight:700;font-size:30px;letter-spacing:1px;text-transform:uppercase;margin:0 0 8px}
.success-msg{font-size:14px;color:var(--text-2);margin:0 0 26px;max-width:280px;line-height:1.5}
.details{
  width:100%;border:1px solid rgba(201,162,75,.3);border-radius:18px;
  background:var(--surface);padding:4px 18px;margin-bottom:24px;
  box-shadow:0 0 24px -8px rgba(201,162,75,.25);
}
.det-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 0;border-bottom:1px solid var(--border)}
.det-row:last-child{border-bottom:none}
.det-left{display:flex;align-items:center;gap:13px}
.det-ring{width:38px;height:38px;border-radius:50%;border:1px solid rgba(201,162,75,.25);background:rgba(0,0,0,.25);color:var(--gold);display:flex;align-items:center;justify-content:center}
.det-ring svg{width:17px;height:17px}
.det-key{font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:2px;color:var(--text-2);text-transform:uppercase}
.det-val{font-size:14.5px;font-weight:600;color:var(--text);text-align:right}
.success-actions{display:flex;gap:12px;width:100%}
.success-actions .btn{flex:1;font-size:11px;padding:15px 8px;letter-spacing:1px}

/* splash */
.splash{align-items:center;justify-content:center;text-align:center;padding:0 30px}
.splash-inner{display:flex;flex-direction:column;align-items:center}
@keyframes splashLogo{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes splashUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.splash .emblem{width:80px;height:80px;color:var(--gold);margin-bottom:26px;animation:splashLogo .7s var(--ease) both}
.splash .emblem svg{width:80px;height:80px}
.splash .sp-name{font-family:'Playfair Display',serif;font-weight:700;font-size:46px;line-height:1;color:var(--text);margin:0;animation:splashUp .6s var(--ease) .18s both}
.splash .sp-name em{font-style:italic;color:var(--gold)}
.splash .sp-rule{display:flex;align-items:center;gap:12px;margin:18px 0;animation:splashUp .6s var(--ease) .3s both}
.splash .sp-rule .l{width:42px;height:1px;background:rgba(201,162,75,.5)}
.splash .sp-rule .d{width:7px;height:7px;transform:rotate(45deg);border:1px solid var(--gold)}
.splash .sp-sub{font-family:'Oswald',sans-serif;font-weight:500;font-size:13px;letter-spacing:5px;text-transform:uppercase;color:var(--gold);margin:0;animation:splashUp .6s var(--ease) .42s both}
.splash .sp-hint{position:absolute;bottom:54px;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--text-3);animation:splashUp .6s var(--ease) .7s both, hintPulse 2s ease-in-out 1.2s infinite}
@keyframes hintPulse{0%,100%{opacity:.4}50%{opacity:.9}}
.home-bar{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:128px;height:4px;border-radius:99px;background:rgba(255,255,255,.18);z-index:40}

/* ===================== DESKTOP: columna centrada tipo app (sin notch ni reloj falso) =====================
   La base es mobile (full-bleed). En pantallas grandes mostramos la app como una tarjeta angosta
   centrada, con un fondo elegante detrás. Cero marco de iPhone. */
@media (min-width:600px){
  .stage{
    background:
      radial-gradient(900px 600px at 50% -10%, rgba(201,162,75,.08), transparent 60%),
      radial-gradient(700px 700px at 110% 120%, rgba(201,162,75,.05), transparent 60%),
      #08080A;
    align-items:center;justify-content:center;padding:24px;
  }
  .phone{
    width:432px;
    height:min(920px, calc(100dvh - 48px));
    border-radius:28px;
    border:1px solid var(--border);
    box-shadow:0 40px 90px -24px rgba(0,0,0,.7);
  }
}

/* ===================== REDUCED MOTION ===================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ===================== FASE 11: reservas grupales ===================== */
/* Badge "Turno X de N" en la barra de progreso (paso Servicios/Barberos del grupo). */
.pm-right{display:flex;align-items:center;gap:8px}
.turno-badge{
  font-family:'Oswald',sans-serif;font-weight:600;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--gold);background:rgba(201,162,75,.12);border:1px solid rgba(201,162,75,.4);
  border-radius:999px;padding:3px 9px;white-space:nowrap;
}

/* Cards "¿para cuántos?" — mismo lenguaje visual que las de barbero. */
.cant-row{display:flex;align-items:center;gap:14px}
.cant-ring{
  width:52px;height:52px;border-radius:16px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;color:var(--gold);
  background:radial-gradient(circle at 30% 25%,rgba(201,162,75,.22),rgba(0,0,0,.35));
  border:1px solid rgba(201,162,75,.35);
}
.cant-ring svg{width:24px;height:24px}
.cant-info{flex:1;min-width:0}
.cant-title{font-family:'Oswald',sans-serif;font-weight:500;font-size:19px;letter-spacing:.5px;text-transform:uppercase;line-height:1.1}
.cant-sub{font-size:12.5px;color:var(--text-2);margin-top:4px;line-height:1.4}

/* Barra de contexto del grupo (chips acumulados) en los pasos de servicio/barbero. */
.grupo-bar{
  background:linear-gradient(180deg,rgba(201,162,75,.06),rgba(201,162,75,0)),var(--surface);
  border:1px solid var(--border);border-radius:14px;padding:12px 13px;margin-bottom:16px;
}
.gbar-top{font-size:12px;color:var(--text-2);margin-bottom:9px}
.gbar-top b{color:var(--gold);font-weight:600}
.gchips{display:flex;flex-wrap:wrap;gap:7px}
.gchip{
  display:flex;align-items:center;gap:6px;max-width:100%;
  background:rgba(0,0,0,.28);border:1px solid var(--border);border-radius:999px;padding:5px 10px 5px 6px;
  animation:gchipIn .32s cubic-bezier(.2,.7,.3,1) both;animation-delay:var(--d,0ms);
}
.gchip.cur{border-color:var(--gold);box-shadow:0 0 0 1px rgba(201,162,75,.5)}
.gchip .gc-n{
  flex:0 0 auto;width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Oswald',sans-serif;font-size:11px;font-weight:600;color:var(--gold);
  background:rgba(201,162,75,.14);border:1px solid rgba(201,162,75,.4);
}
.gchip.done .gc-n{background:var(--gold);color:#15110A;border-color:var(--gold)}
.gchip .gc-t{font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gchip svg{width:13px;height:13px;color:var(--green);flex:0 0 auto}
@keyframes gchipIn{from{opacity:0;transform:scale(.82) translateY(4px)}to{opacity:1;transform:none}}

/* Resumen (s6) y éxito: lista de turnos del grupo. */
.gturnos,.det-turnos{display:flex;flex-direction:column;gap:10px;margin:8px 0 4px;text-align:left}
.gturno,.det-turno{
  background:rgba(0,0,0,.22);border:1px solid var(--border);border-radius:12px;padding:11px 13px;
  animation:gchipIn .34s cubic-bezier(.2,.7,.3,1) both;animation-delay:var(--d,0ms);
}
.gt-h,.dt-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px;gap:10px}
.gt-n,.dt-n{font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold)}
.gt-price,.dt-price{font-family:'Oswald',sans-serif;font-weight:600;font-size:15px;color:var(--gold);white-space:nowrap}
.gt-b,.dt-b{font-size:13.5px;color:var(--text)}
.sum-row.total{border-top:1px solid var(--border);margin-top:4px;padding-top:12px}
.sum-row.total b{color:var(--gold);font-size:18px;font-family:'Oswald',sans-serif}

/* Re-entrada suave del cuerpo al pasar al SIGUIENTE turno del grupo (misma pantalla). */
.reenter{animation:reenterFade .34s cubic-bezier(.2,.7,.3,1)}
@keyframes reenterFade{from{opacity:.25;transform:translateX(5%)}to{opacity:1;transform:none}}

/* ===== Fase 11b: plan del grupo (horario por turno + overflow) ===== */
#slotPlan{margin-top:16px}
.plan-aviso{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.45;border-radius:12px;padding:11px 13px;margin-bottom:10px}
.plan-aviso svg,.plan-aviso i{width:16px;height:16px;flex:0 0 auto;margin-top:1px}
.plan-aviso.ok{color:var(--green);background:rgba(63,191,106,.1);border:1px solid rgba(63,191,106,.3)}
.plan-aviso.warn{color:var(--gold-light);background:rgba(201,162,75,.1);border:1px solid rgba(201,162,75,.32)}
.plan-aviso.err{color:#ff8f8f;background:rgba(255,92,92,.08);border:1px solid rgba(255,92,92,.3)}
.plan-aviso.mini{font-size:11.5px;padding:8px 11px;margin:8px 0}
.plan-list{display:flex;flex-direction:column;gap:6px}
.plan-row{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.24);border:1px solid var(--border);border-radius:10px;padding:9px 12px}
.plan-n{font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);flex:0 0 auto}
.plan-s{flex:1;min-width:0;font-size:12.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plan-h{font-family:'Oswald',sans-serif;font-weight:600;font-size:14px;color:var(--text);flex:0 0 auto}

/* Barbero ya en uso por otro turno del grupo (solapado): igual se puede elegir (le saca al otro). */
.card.taken{opacity:.72}
.card.taken .barber-sub{color:var(--gold)}