/* Suareé · El Laboratorio (colegios, empresas, promociones y familias). Estilos propios; el núcleo vive en su.css. */
.lab-hero{padding:34px 0 8px}
.lab-hero h1{font-size:clamp(36px,5.2vw,64px);max-width:16ch}
.lab-hero .nota{max-width:60ch;margin-top:10px}
.lab-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.lab-chips .chip{cursor:pointer}
.lab-ult{display:inline-flex;gap:10px;align-items:center;margin-top:14px;padding:8px 12px;border:1px solid var(--humo);border-radius:999px;font-size:12px;background:#fff}
.lab-ult b{font-weight:500}

/* progreso */
.lab-prog{position:sticky;top:64px;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--humo);margin:18px 0 0}
.lab-prog .wrap{display:flex;gap:4px;overflow:auto;padding-top:10px;padding-bottom:10px;scrollbar-width:none}
.lab-prog .wrap::-webkit-scrollbar{display:none}
.lab-prog a{flex:1 0 auto;display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);white-space:nowrap}
.lab-prog a i{width:18px;height:18px;border-radius:50%;border:1px solid var(--humo);display:grid;place-items:center;font-style:normal;font-size:10px}
.lab-prog a.ok{color:var(--grafito)}.lab-prog a.ok i{background:var(--grafito);color:#fff;border-color:var(--grafito)}
.lab-prog a.now{color:var(--grafito)}.lab-prog a.now i{border-color:var(--grafito)}
.lab-prog a.lock{opacity:.45;pointer-events:none}

/* la llave (registro) */
.llave{max-width:560px;margin:26px auto 0;padding:26px;border:1px solid var(--humo);border-radius:var(--r);background:#fff;box-shadow:var(--sh)}
.llave .k{margin-bottom:8px}
.llave h2{font-size:30px;margin-bottom:6px}
.llave p{color:#55545A;font-size:14px;margin-bottom:16px}
.llave .dos{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media(max-width:560px){.llave .dos{grid-template-columns:1fr}}
.llave .fin{font-size:12px;color:var(--gris);margin-top:8px}

/* cuerpo: vista fija + pasos */
.lab{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start;margin-top:26px}
@media(max-width:900px){.lab{grid-template-columns:1fr}}
.lab.lock{display:none}
.lab .vista{position:sticky;top:122px;max-height:calc(100vh - 132px);overflow:auto;scrollbar-width:thin;background:var(--crema);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:420px}
@media(max-width:900px){.lab .vista{position:relative;top:0;min-height:0;max-height:none;overflow:visible}}
.lab .vista .lienzo{width:min(100%,360px);aspect-ratio:300/460;position:relative}
.lab .vista .quien{font-family:var(--ft);font-size:24px;text-align:center}
.lab .vista .sub{font-size:12px;color:var(--gris);letter-spacing:.14em;text-transform:uppercase;text-align:center}
.fig{position:relative;width:100%;height:100%}
.fig svg{width:100%;height:100%;transition:.3s}
.fig .lg{position:absolute;object-fit:contain;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.12))}
.fig .lg.pecho{left:52%;top:16%;width:14%;height:9%}
.fig .lg.manga{left:9%;top:17%;width:11%;height:8%}
.fig .lg.espalda{left:32%;top:14%;width:36%;height:14%}
.fig .lg.bolsillo{left:55%;top:27%;width:13%;height:8%}
.fig .luna2{position:absolute;width:7%;aspect-ratio:1;border-radius:50%;background:var(--rosa);pointer-events:none}
.fig .luna2:after{content:"";position:absolute;left:20%;top:18%;width:54%;height:54%;border-radius:50%;background:#fff}
.fig .luna2:before{content:"";position:absolute;left:38%;top:12%;width:54%;height:54%;border-radius:50%;background:var(--rosa);z-index:1}
.fig .luna2.manga{left:81%;top:19%}
.fig .luna2.etiqueta{left:46%;top:9.5%;width:6%}
.fig .esp{position:absolute;left:0;right:0;top:8px;text-align:center;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris)}
.fig.sm .lg.pecho{filter:none}

/* lineup (tipo Sims) */
.lineup{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px;width:100%}
.lineup .mi{border:1px solid var(--humo);border-radius:var(--r);background:#fff;padding:6px 4px 4px;text-align:center;cursor:pointer;position:relative}
.lineup .mi.on{border-color:var(--grafito);box-shadow:0 0 0 1px var(--grafito)}
.lineup .mi .fig{height:112px}
.lineup .mi b{display:block;font-weight:400;font-size:11px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lineup .mi small{display:block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.lineup .mi .foto{margin-top:5px;width:100%;height:26px;border:1px solid var(--humo);border-radius:var(--r);background:#fff;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--grafito)}
.lineup .mas{border:1px dashed var(--gris);border-radius:var(--r);display:grid;place-items:center;color:var(--gris);font-size:12px;text-align:center;padding:10px;min-height:150px}

/* pasos */
.paso{padding:20px 0;border-bottom:1px solid var(--humo)}
.paso .k{margin-bottom:10px;display:flex;justify-content:space-between;gap:10px}
.paso .k span{color:var(--rosa2);letter-spacing:.1em}
.paso h3{font-size:24px;margin-bottom:12px}
.ops{display:flex;gap:8px;flex-wrap:wrap}
.op{padding:10px 14px;border:1px solid var(--humo);border-radius:var(--r);font-size:13px;background:#fff;display:flex;gap:8px;align-items:center;cursor:pointer}
.op.on{border-color:var(--grafito);background:var(--grafito);color:#fff}
.op small{opacity:.7}
.op.tela{flex-direction:column;align-items:flex-start;max-width:100%;text-align:left;gap:2px}
.op.tela small{font-size:11px;opacity:.75;max-width:40ch}
.grupos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media(max-width:560px){.grupos{grid-template-columns:1fr}}
.grupo{border:1px solid var(--humo);border-radius:var(--r);padding:12px;background:#fff}
.grupo.off{opacity:.55}
.grupo .t{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.grupo .t b{font-weight:500}
.grupo .qty{margin-top:8px}
.grupo .md{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.grupo .md .op{padding:6px 10px;font-size:12px}
.grupo textarea{width:100%;min-height:64px;border:1px solid var(--humo);border-radius:var(--r);padding:8px 10px;margin-top:8px;font-size:13px;background:#fff}
.grupo textarea:focus{outline:none;border-color:var(--grafito)}
.grupo .cnt{font-size:11px;color:var(--gris);margin-top:4px}

/* pantone */
.pan-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:14px 0 8px}
.pan-h .k{margin:0}
.pan-fam{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.pan-fam .chip{padding:6px 12px;font-size:12px;cursor:pointer}
.pan{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px}
.pan .sw{border:1px solid rgba(0,0,0,.06);border-radius:var(--r);padding:0;cursor:pointer;background:#fff;text-align:left;overflow:hidden;position:relative}
.pan .sw i{display:block;height:44px}
.pan .sw b{display:block;font-size:9.5px;font-weight:500;padding:5px 5px 0;letter-spacing:.02em;white-space:nowrap}
.pan .sw small{display:block;font-size:8.5px;color:var(--gris);padding:0 5px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pan .sw.on{box-shadow:0 0 0 2px var(--grafito)}
.pan-sel{display:flex;gap:12px;align-items:center;margin-top:12px;padding:10px 12px;border:1px solid var(--humo);border-radius:var(--r);background:#fff;font-size:13px}
.pan-sel i{width:36px;height:36px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--humo);flex:0 0 auto}
.pan-sel b{font-weight:500}
.pan-sel small{display:block;color:var(--gris);font-size:11px}
.hilos{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.hilo{width:38px;height:38px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px var(--humo);cursor:pointer;position:relative}
.hilo.on{box-shadow:0 0 0 2px var(--grafito)}
.porque{margin-top:14px;padding:14px 16px;background:var(--crema);border-radius:var(--r);font-size:13px;color:#55545A}
.porque summary{cursor:pointer;color:var(--grafito);font-weight:500;list-style:none}
.porque summary::-webkit-details-marker{display:none}
.porque p{margin-top:8px}
.porque p+p{margin-top:6px}

/* la marca */
.sube{border:1px dashed var(--gris);border-radius:var(--r);padding:18px;text-align:center;background:#fff;cursor:pointer;position:relative}
.sube.ok{border-style:solid;border-color:var(--humo)}
.sube input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.sube img{max-height:72px;max-width:200px;display:block;margin:0 auto 8px;background:repeating-conic-gradient(#f1efea 0 25%,#fff 0 50%) 0 0/14px 14px}
.sube small{display:block;color:var(--gris);font-size:12px;margin-top:4px}
.fila2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:560px){.fila2{grid-template-columns:1fr}}
.tog{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--humo);border-radius:var(--r);background:#fff;margin-top:10px;cursor:pointer}
.tog b{font-weight:500;font-size:14px;display:block}
.tog small{color:var(--gris);font-size:12px}
.tog .sw2{width:42px;height:24px;border-radius:12px;background:var(--humo);position:relative;flex:0 0 auto;transition:.2s}
.tog .sw2:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.tog.on .sw2{background:var(--grafito)}.tog.on .sw2:after{left:21px}
.fuentes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
@media(max-width:560px){.fuentes{grid-template-columns:repeat(2,1fr)}}
.fuente{border:1px solid var(--humo);border-radius:var(--r);padding:12px 8px;text-align:center;cursor:pointer;background:#fff}
.fuente.on{border-color:var(--grafito);box-shadow:0 0 0 1px var(--grafito)}
.fuente b{display:block;font-size:24px;font-weight:400;line-height:1.1;min-height:30px}
.fuente small{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gris)}
.f-bodoni b{font-family:var(--ft);font-style:italic}.f-script b{font-family:'Great Vibes',cursive;font-size:30px}.f-satoshi b{font-family:var(--fs);font-weight:500}.f-mono b{font-family:var(--ft);letter-spacing:.2em}

/* calculadora */
.preset{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-left:2px solid var(--rosa2);background:var(--crema);font-size:13px;color:#55545A;margin-bottom:14px}
.preset b{color:var(--grafito);font-weight:500;display:block}
.total{background:var(--noche);color:#F4F1EC;padding:20px 22px;border-radius:var(--r);margin-top:6px}
.total .fila{display:flex;justify-content:space-between;gap:10px;padding:6px 0;font-size:14px}
.total .fila.t{font-size:22px;border-top:1px solid #34333A;margin-top:8px;padding-top:12px;font-family:var(--ft)}
.total .k{color:var(--rosa)}.total .bs{color:#9A979F;font-size:13px;text-align:right}
.total .pp{display:flex;justify-content:space-between;font-size:12px;color:#C9C5BE;margin-top:6px}
.desc{background:#2A3A2F;color:#BFE3CE;padding:8px 12px;border-radius:var(--r);font-size:12px;margin-top:8px}
.aviso{background:#3A2F2A;color:#E3CFBF;padding:8px 12px;border-radius:var(--r);font-size:12px;margin-top:8px}
.cashea{margin-top:12px;border:1px solid var(--humo);border-radius:var(--r);padding:14px 16px;background:#fff}
.cashea .t{display:flex;justify-content:space-between;align-items:center;gap:10px}
.cashea .t b{font-weight:500}
.cashea .lunas{display:flex;gap:4px}
.cashea .lunas i{width:10px;height:10px;border-radius:50%;background:var(--humo)}
.cashea .lunas i.on{background:var(--rosa2)}
.cashea .cu{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px;margin-top:10px}
.cashea .cu div{border:1px solid var(--humo);border-radius:var(--r);padding:8px;font-size:12px;text-align:center}
.cashea .cu div b{display:block;font-weight:500;font-size:14px}
.cashea .cu div small{color:var(--gris);font-size:10px}
.cashea p{font-size:12px;color:var(--gris);margin-top:8px}
.enviar{margin-top:18px;padding:18px;border:1px solid var(--humo);border-radius:var(--r);background:#fff}
.enviar h3{font-size:22px;margin-bottom:10px}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
@media(max-width:560px){.acts{grid-template-columns:1fr}}
.err{color:var(--rojo);font-size:13px;margin-top:8px;min-height:1em}

/* listo */
.listo{text-align:center;padding:26px 18px;border:1px solid var(--humo);border-radius:var(--r);background:#fff;margin-top:18px}
.listo .cod{font-family:var(--ft);font-size:44px;letter-spacing:.02em;margin:6px 0}
.listo p{color:#55545A;font-size:14px;max-width:46ch;margin:0 auto}
.listo .acts{max-width:520px;margin:18px auto 0}
.listo .acts .btn{width:100%}
.listo canvas{display:none}