/* TEMPO · configurador de cliente PREMIUM (tema claro, motor de compositing portado del editor).
   Benchmark: crema dominante, dorado racionado, Cinzel display + 'Hanken Grotesk' UI, preview vivo por capas,
   pasos secuenciales, superficies transaccionales quietas y rapidas. Sesion nocturna 2026-05-29. */
*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#ffffff;--paper:#eef1f6;--ink:#1b1c1e;--mut:#6f6a62;--line:#e3e7ee;--gold:#a07d4b;--dark:#16171a}
body{background:var(--bg);color:var(--ink);font-family:'Hanken Grotesk',sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:5;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit}
.top{display:flex;align-items:center;justify-content:space-between;padding:18px 40px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);z-index:30}
.top .brand{font-family:'Cinzel',Georgia,serif;font-weight:600;font-size:20px;letter-spacing:.30em;text-indent:.30em;text-decoration:none;color:var(--ink)}
.top nav{font-size:13px;color:var(--mut)}
.top nav a{text-decoration:none;color:var(--mut)}.top nav a:hover{color:var(--ink)}

.cfg{display:grid;grid-template-columns:1fr 460px;max-width:1340px;margin:0 auto;min-height:calc(100vh - 61px)}
/* preview compacto (D24): el reloj se muestra pequeno con mucho aire */
.stage{position:sticky;top:61px;height:calc(100vh - 61px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 40px;border-right:1px solid var(--line);
  background:
    radial-gradient(54% 40% at 12% 24%, rgba(20,22,32,.06) 0%, rgba(20,22,32,.018) 55%, rgba(20,22,32,0) 100%),
    radial-gradient(54% 40% at 88% 24%, rgba(20,22,32,.06) 0%, rgba(20,22,32,.018) 55%, rgba(20,22,32,0) 100%),
    radial-gradient(50% 36% at 10% 78%, rgba(20,22,32,.05) 0%, rgba(20,22,32,.015) 55%, rgba(20,22,32,0) 100%),
    radial-gradient(50% 36% at 90% 78%, rgba(20,22,32,.05) 0%, rgba(20,22,32,.015) 55%, rgba(20,22,32,0) 100%)}
/* en escritorio los wrappers son transparentes: reloj/nombre/precio/buybar fluyen igual que antes */
.stage-pin,.pin-info,.buybar{display:contents}
.preview{position:relative;width:100%;max-width:340px}
#watch{width:100%;height:auto;display:block;filter:drop-shadow(0 20px 36px rgba(40,30,15,.18))}
.stage .pname{font-family:'Cinzel',Georgia,serif;font-size:22px;font-weight:500;margin-top:18px;text-align:center}
.stage .psum{font-size:12.5px;color:var(--mut);text-align:center;margin-top:6px;max-width:300px;min-height:32px}
.stage .price{font-family:'Cinzel',Georgia,serif;font-size:30px;color:var(--gold);margin-top:12px;font-variant-numeric:tabular-nums}
.stage .price small{display:block;font-family:'Hanken Grotesk';font-size:11.5px;color:var(--mut);letter-spacing:.02em}
.stage .actions{display:flex;flex-direction:column;gap:9px;width:100%;max-width:340px;margin-top:16px}
.btn{display:inline-block;text-align:center;background:var(--gold);color:#fff;padding:14px;border-radius:8px;text-decoration:none;font-size:14px;font-weight:600;border:0;cursor:pointer;transition:.16s}
.btn:hover{background:#8c6c3f}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.minirow{display:flex;gap:9px}.minirow .btn{flex:1;font-size:12.5px;padding:11px}
.fine{text-align:center;color:var(--mut);font-size:11px;margin-top:4px;order:9}

.panel{padding:26px 34px 60px;overflow:auto}
.phead h1{font-family:'Cinzel',Georgia,serif;font-weight:500;font-size:28px;letter-spacing:-.01em}
.phead p{color:var(--mut);font-size:13.5px;margin:6px 0 18px}
.progress{display:flex;gap:5px;margin-bottom:22px}
.progress i{flex:1;height:3px;border-radius:2px;background:var(--line)}
.progress i.done{background:var(--gold)}

.step{border-top:1px solid var(--line)}
.step-h{display:flex;align-items:center;gap:12px;padding:16px 0;cursor:pointer;user-select:none}
.step-h .num{font-family:'Cinzel',Georgia,serif;font-size:13px;color:var(--gold);width:22px}
.step-h .t{font-weight:600;font-size:14.5px;flex:0 0 auto}
.step-h .v{margin-left:auto;font-size:13px;color:var(--mut);text-align:right}
.step-h .chev{margin-left:10px;color:var(--mut);transition:transform .2s}
.step.open .step-h .chev{transform:rotate(180deg)}
.step-body{max-height:0;overflow:hidden;transition:max-height .28s ease}
.step.open .step-body{max-height:600px}
.step-inner{padding:2px 0 20px}
.step.locked{opacity:.45;pointer-events:none}
.step.locked .step-h .v{color:var(--gold);opacity:.8}

.swatches{display:flex;flex-wrap:wrap;gap:12px}
.sw{width:62px;cursor:pointer;text-align:center;background:none;border:0;padding:0}
.sw .chip{width:52px;height:52px;margin:0 auto;border-radius:50%;border:1.5px solid var(--line);overflow:hidden;background:var(--paper);display:grid;place-items:center;transition:border-color .15s,transform .15s}
.sw .chip img{width:100%;height:100%;object-fit:cover}
.sw.hands .chip img{object-fit:contain;padding:7px}
.sw .chip.none{font-size:10px;color:var(--mut);line-height:1.1}
.sw:hover .chip{transform:scale(1.06)}
.sw.on .chip{border-color:var(--gold);box-shadow:0 0 0 2px var(--paper) inset}
.sw .lab{display:block;font-size:11px;color:var(--mut);margin-top:6px;line-height:1.2}
.sw.on .lab{color:var(--ink)}
.toggle{display:flex;align-items:center;gap:10px;font-size:14px}
.toggle input{width:38px;height:22px;-webkit-appearance:none;appearance:none;background:var(--line);border-radius:11px;position:relative;cursor:pointer;transition:.18s;flex:0 0 auto}
.toggle input:checked{background:var(--gold)}
.toggle input:before{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:2px;left:2px;transition:.18s}
.toggle input:checked:before{left:18px}

.designs{margin-top:8px}
.designs .dlist{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.designs .d{width:64px;cursor:pointer;text-align:center}
.designs .d canvas,.designs .d img{width:64px;height:64px;object-fit:contain;border:1px solid var(--line);border-radius:8px;background:var(--paper)}
.designs .d span{display:block;font-size:10px;color:var(--mut);margin-top:3px}
.designs .empty{font-size:12.5px;color:var(--mut)}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(90px);background:#16171a;color:#fff;padding:13px 22px;border-radius:30px;font-size:14px;transition:.3s;z-index:90}
.toast.show{transform:translateX(-50%) translateY(0)}

@media(max-width:900px){
  .top{padding:13px 18px}
  .cfg{display:block}
  /* .stage se vuelve transparente para que .stage-pin pase a ser hijo de .cfg
     (bloque contenedor alto = incluye el panel) y su sticky aguante TODO el scroll.
     .stage-pin sigue siendo una caja flex propia, asi que NO se derrama al layout. */
  .stage{display:contents}
  .stage-pin{
    display:flex;flex-direction:column;align-items:center;gap:5px;
    position:sticky;top:52px;z-index:25;
    background:var(--bg);border-bottom:1px solid var(--line);
    padding:9px 16px 11px;
  }
  .preview{width:100%;max-width:152px}
  #watch{filter:drop-shadow(0 8px 16px rgba(40,30,15,.16))}
  .pin-info{display:flex;flex-direction:row;align-items:baseline;justify-content:center;gap:12px}
  .pin-info .pname{margin:0;font-size:16px}
  .pin-info .price{margin:0;font-size:19px}
  .pin-info .price small{display:none}
  .psum{display:block;text-align:center;margin:14px auto 0;max-width:340px}
  .actions{max-width:380px;width:100%;margin:14px auto 0}
  /* "Añadir a la cesta" + "envío/entrega" siempre visibles: barra inferior fija.
     .buybar sale del flujo de .actions; MANDAR/guardar/compartir siguen scrolleando. */
  .buybar{
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    display:flex;flex-direction:column;align-items:center;gap:1px;
    background:var(--bg);border-top:1px solid var(--line);
    padding:9px 16px calc(9px + env(safe-area-inset-bottom));
    box-shadow:0 -10px 24px -12px rgba(40,30,15,.3);
  }
  .buybar #add{width:100%;max-width:420px;margin:0}
  .buybar .fine{margin:3px 0 0}
  .panel{padding:22px 20px 112px}
}

/* boton del maker: mandar el reloj (build) a la base de datos. Muy evidente (oscuro + borde dorado). */
.senddb{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:16px 14px;border:2px solid var(--gold);border-radius:10px;cursor:pointer;background:var(--dark);color:#fff;font-family:'Hanken Grotesk',system-ui,sans-serif;font-weight:700;font-size:13px;letter-spacing:.07em;text-transform:uppercase;box-shadow:0 12px 28px -12px rgba(22,23,26,.6);margin-bottom:2px}
.senddb:hover{background:#000;border-color:#c79655}
.senddb:active{transform:translateY(1px)}
.senddb:disabled{opacity:.6;cursor:default}
.senddb.ok{background:#1e5b3a;border-color:#1e5b3a}
.sdb-ico{font-size:17px;line-height:1}

/* modal de envio: nombre (con sugeridor IA) + familia */
.sendmodal{position:fixed;inset:0;background:rgba(20,16,8,.5);display:none;place-items:center;z-index:200;padding:20px;overflow-y:auto}
.sendmodal.on{display:grid}
body.sm-open{overflow:hidden}
.sm-card{background:var(--paper);border-radius:18px;padding:26px 26px 24px;width:450px;max-width:100%;position:relative;box-shadow:0 40px 80px -30px rgba(20,15,5,.55);margin:auto}
.sm-x{position:absolute;top:12px;right:14px;background:none;border:0;font-size:26px;line-height:1;color:var(--mut);cursor:pointer;width:34px;height:34px;border-radius:8px}
.sm-x:hover{background:var(--bg);color:var(--ink)}
.sm-card h3{font-family:'Cinzel',Georgia,serif;font-weight:500;font-size:22px}
.sm-sub{color:var(--mut);font-size:13px;margin:4px 0 16px}
.sm-card label{display:block;font-size:12px;color:var(--mut);margin:13px 0 5px}
.sm-card input{width:100%;border:1px solid var(--line);border-radius:9px;padding:11px 12px;font:500 14px 'Hanken Grotesk',sans-serif;background:#fff;color:var(--ink)}
.sm-card input:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(160,125,75,.12)}
.sm-namerow{display:flex;gap:8px}
.sm-ai{flex:0 0 auto;background:var(--dark);color:#fff;border:0;border-radius:9px;padding:0 15px;font:600 12.5px 'Hanken Grotesk',sans-serif;cursor:pointer;white-space:nowrap}
.sm-ai:hover{background:#000}.sm-ai:disabled{opacity:.6;cursor:default}
.sm-sugs{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px;align-items:center}
.sm-chip{background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:6px 13px;font:500 13px 'Hanken Grotesk',sans-serif;color:var(--ink);cursor:pointer}
.sm-chip:hover{border-color:var(--gold);color:var(--gold)}
.sm-aitag{font-family:'Spline Sans Mono',monospace;font-size:10px;letter-spacing:.05em;color:var(--gold)}
.sm-acts{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}
.senddb-go{background:var(--gold);color:#fff;border:0;border-radius:10px;padding:12px 18px;font:700 13px 'Hanken Grotesk',sans-serif;cursor:pointer}
.senddb-go:hover{background:#8c6c3f}.senddb-go:disabled{opacity:.6;cursor:default}

.top-act{display:flex;align-items:center;gap:4px}
.top-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:var(--ink);text-decoration:none;transition:background .2s,color .2s}
.top-ico:hover{background:var(--paper);color:var(--gold)}

/* === Homebar del home integrada en el configurador (sustituye al .top minimal) === */
.announce{display:none}
.nav{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line)}
.nav.scrolled{background:#fff}