.bracelet-banner-entry{display:block}.bracelet-banner-entry:focus-visible{outline-offset:-5px}.bracelet-banner-caption>.button{margin-bottom:12px;font-size:12px;letter-spacing:.4px;min-width:210px;justify-content:center}.bracelet-banner-entry:hover .bracelet-banner-caption>.button{background:#29584b;transform:translateY(-2px)}.bracelet-banner-caption .builder-entry-hint{display:block;letter-spacing:1px;font-size:9px}
:is(#bracelet-designer,#ring-designer){width:min(1300px,96vw);max-height:94svh;padding:30px 4%;overscroll-behavior:contain;--cord-shadow:#191919;--cord-light:#4d4b49}:is(#bracelet-designer,#ring-designer)[data-color=rojo]{--cord-shadow:#a31423;--cord-light:#e54850}:is(#bracelet-designer,#ring-designer)[open]{animation:builder-enter .25s ease-out}.builder-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:12px}.builder-top .eyebrow{color:var(--muted)}.builder-close{min-height:44px;padding:8px 0;font-size:12px;border-bottom:1px solid var(--line)}.builder-heading{font-size:46px}.builder-instruction{font-size:12px;color:#626958;margin-top:14px;max-width:710px;line-height:1.8}.builder-preview{margin:12px -2% 0;overflow:hidden}.builder-preview svg{display:block;width:100%;height:auto;max-height:350px}.builder-live{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:2px 0 16px;border-bottom:1px solid var(--line)}:is(#builder-count,#ring-builder-count){font-size:12px}.builder-tools{display:flex;gap:20px}.builder-tools button{padding:8px 0;font-size:11px;border-bottom:1px solid var(--line)}.builder-palette{display:grid;grid-template-columns:150px 1fr 1fr;gap:30px;padding:22px 0}.builder-field{border:0;padding:0;margin:0;min-width:0}.builder-field legend{font-size:12px;margin-bottom:13px;font-weight:500}.builder-thread-options{display:flex;gap:10px;flex-wrap:wrap}.builder-thread-options button{display:flex;align-items:center;gap:8px;min-height:44px;padding:7px 10px;border:1px solid var(--line);font-size:11px}.builder-thread-options button[aria-pressed=true]{outline:1px solid var(--green);border-color:var(--green)}.builder-thread-options i{width:15px;height:15px;border-radius:50%;background:#222;display:block}.builder-thread-options [data-thread=rojo] i{background:#b41e2d}.builder-bead-options{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}.builder-bead-options button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:74px;padding:7px 3px;border:1px solid var(--line);font-size:11px;transition:background .15s,transform .15s}.builder-bead-options button:hover{background:var(--paper);transform:translateY(-2px)}.builder-bead-sample{display:block;width:var(--sample-size);aspect-ratio:1;border-radius:50%;background-image:url('assets/size-guide/lisos.jpg');background-size:666.1% 728.9%;background-position:15.11% 4.33%;box-shadow:1px 2px 2px #33220040}.builder-bead-sample.diamantado{background-image:url('assets/size-guide/diamantados.png');background-size:631.1% 690.5%;background-position:63.43% 3.74%}.builder-order{padding:0 0 15px}.builder-order>p{font-size:11px;color:var(--muted);margin:5px 0 10px}:is(#builder-sequence,#ring-builder-sequence){list-style:none;display:flex;flex-wrap:wrap;gap:7px;padding:0;margin:0}:is(#builder-sequence,#ring-builder-sequence) button{border:1px solid var(--line);padding:7px 10px;font-size:10px;min-height:36px;display:flex;gap:8px;align-items:center}:is(#builder-sequence,#ring-builder-sequence) button span:first-child{color:var(--muted)}:is(#builder-sequence,#ring-builder-sequence) button:disabled{opacity:1}:is(#builder-empty,#ring-builder-empty){font-size:12px;color:var(--muted)}.builder-bottom{display:flex;align-items:center;justify-content:space-between;gap:25px;padding-top:15px;border-top:1px solid var(--line)}.builder-bottom>p{font-size:10px;color:var(--muted);max-width:550px}.builder-bottom .button{min-width:180px;justify-content:center}:is(#builder-message,#ring-builder-message){font-size:11px;color:var(--green);min-height:20px;margin-top:10px}:is(#builder-done,#ring-builder-done){font-size:16px;color:var(--green);margin:18px 0 22px}:is(#bracelet-designer,#ring-designer)[data-finished=true] .builder-closed{animation:builder-knot .35s ease-out}
@keyframes builder-enter{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes builder-knot{from{opacity:0}to{opacity:1}}
@media(max-width:760px){:is(#bracelet-designer,#ring-designer){padding:20px 16px;width:96vw;max-height:95svh}.builder-heading{font-size:36px}.builder-top{gap:10px}.builder-top .eyebrow{font-size:8px;letter-spacing:1px}.builder-close{font-size:11px;white-space:nowrap}.builder-instruction{font-size:11px}.builder-preview{margin:12px -12px 8px}.builder-preview svg{min-height:155px}.builder-live{align-items:flex-start;gap:8px;flex-direction:column}.builder-tools{gap:20px}.builder-palette{grid-template-columns:1fr;gap:20px;padding:20px 0}.builder-thread-options{flex-wrap:nowrap}.builder-thread-options button{min-width:90px;justify-content:center}.builder-bead-options{gap:5px}.builder-bead-options button{min-height:75px}.builder-bottom{align-items:stretch;flex-direction:column;gap:15px}.builder-bottom .button{width:100%}.bracelet-banner-caption>.button{margin-top:6px}}
@media(prefers-reduced-motion:reduce){:is(#bracelet-designer,#ring-designer)[open],:is(#bracelet-designer,#ring-designer)[data-finished=true] .builder-closed{animation:none}.builder-bead-options button{transition:none}}
:is(#bracelet-designer,#ring-designer){background:var(--ivory);color:var(--green)}
:is(#bracelet-designer,#ring-designer) [hidden]{display:none}
:is(#bracelet-designer,#ring-designer) .builder-palette{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 26px}
.builder-thread-options [data-thread=dorado] i{background:#bf8838}
.builder-weave-options,.builder-reorder,.builder-share-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.builder-weave-options button,.builder-reorder button,.builder-secondary{border:1px solid var(--line);padding:8px 11px;min-height:44px;font-size:12px;color:var(--green);display:inline-flex;align-items:center}
.builder-weave-options button[aria-pressed=true],:is(#builder-sequence,#ring-builder-sequence) button[aria-pressed=true]{background:var(--green);color:var(--ivory);border-color:var(--green)}
:is(#builder-sequence,#ring-builder-sequence) button[aria-pressed=true] span{color:var(--ivory)}
:is(#bracelet-designer,#ring-designer) :is(button,a):focus-visible{outline:2px solid var(--green);outline-offset:3px}
.builder-reorder{margin-top:12px}
.builder-reorder span{font-size:12px}
.builder-reorder button:disabled{opacity:.5}
.builder-preview{margin:14px 0}
:is(#builder-wrist-svg,#ring-builder-wrist-svg){max-width:600px;justify-self:center;width:100%;border:1px solid var(--line)}
:is(#builder-wrist-svg,#ring-builder-wrist-svg) svg{max-height:480px}
.builder-sharing{margin-top:18px;padding:18px;background:var(--paper);border:1px solid var(--line)}
:is(#builder-share-status,#ring-builder-share-status){margin-top:10px;font-size:12px;line-height:1.55}
@media(max-width:760px){
 :is(#bracelet-designer,#ring-designer) .builder-palette{grid-template-columns:1fr}
 .builder-thread-options{flex-wrap:wrap}
 .builder-thread-options button{min-width:0}
 .builder-share-actions .button{width:100%;justify-content:center}
 .builder-preview svg{min-height:0}
}
/* La vista del dedo conserva el encuadre de cada toma. */
#ring-builder-wrist-svg{max-width:340px;justify-self:center}
#ring-builder-wrist-svg>svg{max-height:none;overflow:hidden}

.builder-reset {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 44px;
  padding: .55rem 1rem;
  margin: 0 0 1rem;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: transparent;
  color: var(--green);
  font: inherit;
  font-size: .875rem;
  cursor: pointer;
}
.builder-reset span { font-size: 1.2em; line-height: 1; }
.builder-reset:not(:disabled):hover { background: var(--green); color: #fff; }
.builder-reset:disabled { opacity: .55; cursor: default; }
.builder-bead-weight { font-size: 11px; white-space: nowrap; }
@media (max-width: 440px) {
  #bracelet-designer .builder-bead-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}