/* ==========================================================================
   components.css · Botões e etiquetas de amostra
   ========================================================================== */
/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 24px;border-radius:999px;border:1px solid transparent;font:600 15.5px/1 var(--disp);letter-spacing:-.01em;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .25s,background .25s,color .25s,border-color .25s,box-shadow .25s}
.btn svg{width:18px;height:18px;flex:none}
.btn-i{background:var(--ink);color:var(--paper)}
.btn-i:hover{background:var(--brown);transform:translateY(-2px)}
.btn-o{border-color:var(--line2);color:var(--ink);background:transparent}
.btn-o:hover{border-color:var(--ink);background:rgba(29,29,27,.04)}
.btn-c{background:var(--cream);color:var(--ink)}
.btn-c:hover{background:#fff;transform:translateY(-2px)}
.btn-od{border-color:var(--dline2);color:var(--cream);background:transparent}
.btn-od:hover{border-color:var(--cream);background:rgba(244,228,212,.06)}

/* etiqueta de amostra */
.lbl{display:inline-flex;align-items:center;gap:10px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.lbl b{display:inline-grid;place-items:center;min-width:30px;height:22px;padding:0 6px;border:1px solid currentColor;border-radius:5px;font-weight:600;color:var(--brown)}
.dk .lbl{color:rgba(244,228,212,.62)}.dk .lbl b{color:var(--crema)}
.ruler{height:16px;background:repeating-linear-gradient(90deg,var(--line2) 0 1px,transparent 1px 12px) 0 100%/100% 7px no-repeat,repeating-linear-gradient(90deg,var(--line2) 0 1px,transparent 1px 120px) 0 100%/100% 16px no-repeat}
.dk .ruler{background:repeating-linear-gradient(90deg,var(--dline2) 0 1px,transparent 1px 12px) 0 100%/100% 7px no-repeat,repeating-linear-gradient(90deg,var(--dline2) 0 1px,transparent 1px 120px) 0 100%/100% 16px no-repeat}