/* "Arma tu sánduche" (armador.js). --arm-top es la altura de lo que ya está fijo arriba en la página. */
.arm-preferidos { margin: 0 0 .9rem; }
.arm-sub { font-size: .8rem; color: var(--cafe-suave); margin: 0 0 .4rem; }
.armador { display: grid; gap: 1rem; font-family: var(--texto); }
.arm-escenario { position: sticky; top: var(--arm-top, 0px); z-index: 4; background: var(--crema); padding: .4rem 0 .5rem; }
.arm-lienzo { position: relative; border-radius: 18px; border: 1px solid var(--borde); overflow: hidden;
  background: radial-gradient(ellipse at 45% 40%, #fffbe8 0%, #faf4d4 58%, #efe3ba 100%); }
.arm-dibujo { display: block; width: 72%; height: auto; }
.arm-dibujo text { font-family: var(--texto); font-size: 13px; fill: var(--cafe-suave); }
.arm-capa { transition: transform .5s cubic-bezier(.34, 1.45, .64, 1), opacity .35s ease; }
.arm-pila { transform-origin: 150px 222px; transition: transform .4s ease; }
.arm-bebida { position: absolute; right: 4%; bottom: 7%; height: 70%; width: 24%; object-fit: contain; object-position: bottom;
  transition: transform .5s cubic-bezier(.34, 1.45, .64, 1), opacity .3s ease; }
.arm-bebida.fuera { transform: translateX(40px); opacity: 0; }
.arm-unidad { margin: .5rem 0 0; font-size: .82rem; color: var(--cafe-suave); }
.arm-precio { font-size: 1.35rem; color: var(--cafe); }
.arm-lleva { margin: .15rem 0 0; font-size: .78rem; color: var(--cafe-suave); }
.arm-paso { background: var(--vainilla); border: 1px solid var(--borde); border-radius: 16px; padding: .8rem .9rem .9rem; }
.arm-paso + .arm-paso { margin-top: .7rem; }
.arm-paso h3 { font-family: var(--titulo); font-weight: 400; font-size: 1.08rem; margin: 0 0 .55rem; display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; }
.arm-paso h3 small { font-family: var(--texto); font-size: .74rem; color: var(--cafe-suave); }
.arm-num { font-family: var(--texto); font-size: .75rem; font-weight: 600; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--atardecer); display: inline-grid; place-items: center; align-self: center; }
.arm-opciones { display: flex; flex-wrap: wrap; gap: .4rem; }
.arm-op { font: inherit; font-size: .8rem; background: #fff; color: var(--cafe); border: 1.5px solid var(--borde); border-radius: 999px; padding: .38rem .75rem; cursor: pointer; transition: background .15s, border-color .15s; }
.arm-op small { font-size: .72rem; color: var(--cafe-suave); margin-left: .3rem; }
.arm-op[aria-pressed="true"] { background: var(--atardecer); border-color: var(--atardecer); font-weight: 600; }
.arm-op[aria-pressed="true"] small { color: var(--cafe); }
.arm-pref { border-color: var(--atardecer); }
.arm-pref:hover { background: #fbeccd; }
.arm-cero { border-style: dashed; border-color: var(--cafe-suave); font-weight: 600; }
.arm-cero:hover { background: var(--cafe); color: var(--crema); }
.arm-bebidas { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: .45rem; }
.arm-beb { font: inherit; background: #fff; color: var(--cafe); border: 1.5px solid var(--borde); border-radius: 12px; padding: .4rem .3rem .45rem; cursor: pointer; display: grid; justify-items: center; gap: .15rem; text-align: center; }
.arm-beb img { height: 4.2rem; width: 100%; object-fit: contain; }
.arm-sin { height: 4.2rem; display: grid; place-items: center; font-size: 1.6rem; color: var(--cafe-suave); }
.arm-beb span { font-size: .68rem; line-height: 1.2; }
.arm-beb small { font-size: .68rem; color: var(--cafe-suave); }
.arm-beb[aria-pressed="true"] { border-color: var(--atardecer); background: #fbeccd; box-shadow: 0 0 0 1px var(--atardecer); }
.arm-cant { display: flex; align-items: center; gap: .5rem; }
.arm-cant button { font: inherit; width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 2px solid var(--cafe); background: #fff; color: var(--cafe); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0; }
.arm-cant input { width: 4rem; text-align: center; font: inherit; font-weight: 600; padding: .4rem; border-radius: 10px; border: 1.5px solid #cbb89a; background: #fff; color: var(--cafe); }
.arm-agregar { font: inherit; font-weight: 600; width: 100%; margin-top: .7rem; background: var(--atardecer); color: var(--cafe); border: 0; border-radius: 999px; padding: .85rem 1.2rem; cursor: pointer; }
.arm-error { font-size: .84rem; margin: .6rem 0 0; padding: .55rem .75rem; border-radius: 10px; background: #f6d9dc; border-left: 4px solid #b4545f; }
.arm-ok { font-size: .82rem; margin: .7rem 0 0; color: var(--cafe); padding: .7rem .75rem; border-radius: 12px; background: #fbeccd; border-left: 4px solid var(--atardecer); }
.arm-ok p { margin: 0 0 .55rem; font-weight: 600; }
.arm-despues { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; }
.arm-despues .arm-op { background: #fff; }
.arm-extra { border-color: var(--atardecer); font-weight: 600; }
.arm-extra:hover { background: var(--atardecer) !important; }
@media (max-width: 759px) {
  .arm-lienzo { height: 9.5rem; }
  .arm-dibujo { width: auto; height: 100%; margin-left: 4%; }
  .arm-lleva { display: none; }
}
@media (min-width: 760px) {
  .armador { grid-template-columns: 1fr 1.05fr; gap: 1.3rem; align-items: start; }
  .arm-escenario { top: calc(var(--arm-top, 0px) + .8rem); padding: 0; background: none; }
}