/* Open Lambda — página de la pista modular: el precio, el armador con su contador de módulos y lo que trae. */

/* ───────── Cabeza y precio ───────── */
.set__titulo { display: grid; gap: 14px; }
.set__titulo .titular { max-width: 17em; }
.set__precio { display: grid; justify-items: start; gap: 6px; }
.set__precio strong { font: italic 900 clamp(40px, 5vw, 68px)/1 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.set__precio small { font: 400 13px/1.4 var(--mono); color: var(--acero); }

/* ───────── Armador ───────── */
.arma { border-radius: 22px; overflow: hidden; background: var(--tarjeta); box-shadow: inset 0 0 0 1px var(--linea); }
.arma__escena { position: relative; width: 100%; aspect-ratio: 16/9; max-height: max(360px, 100vh - 330px); background: radial-gradient(90% 80% at 50% 100%, #fff 0%, var(--tarjeta) 70%); }
.arma__escena > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.arma__chapa {
  position: absolute; left: clamp(12px, 1.8vw, 22px); top: clamp(12px, 1.8vw, 20px);
  font: 500 11px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--acero);
}

/* --techo: cuánto tapa la cara del módulo; --calado: cuánto se ven los calados. La lupa siempre mira por dentro. */
.arma__huella { fill: none; stroke: var(--ceniza); stroke-width: 5; stroke-dasharray: 26 22; opacity: .55; }
.arma__sombras rect { fill: var(--negro); }
.arma__llave { fill: var(--ed); }
.arma__llave-canto { fill: var(--ed-fondo-b); }
.arma__canto { fill: #3A4049; fill-opacity: var(--techo, 1); }
.arma__cara { fill: var(--negro); fill-opacity: var(--techo, 1); stroke: #2C323B; stroke-width: 3; transition: fill-opacity .3s var(--suave); }
.arma__calado { fill: none; stroke: #fff; stroke-width: 1.6; opacity: var(--calado, 0); transition: opacity .3s var(--suave); }
.arma__linea { fill: none; stroke: #F4F2EE; stroke-width: 19; stroke-linejoin: round; }
.arma__marcas polygon { fill: #F4F2EE; }
.arma__anillo { fill: none; stroke: var(--ed); stroke-width: 9; }
/* el lugar del módulo que sigue: se toca y se suma */
.arma__proximo { cursor: pointer; }
.arma__proximo rect { fill: var(--ed); fill-opacity: .05; stroke: var(--ed); stroke-width: 7; stroke-dasharray: 34 26; transition: fill-opacity .14s var(--suave); }
.arma__proximo path { fill: none; stroke: var(--ed); stroke-width: 24; stroke-linecap: round; }
.arma__proximo:hover rect { fill-opacity: .16; }
.arma--rayos #arma-svg { --techo: .3; --calado: .7; }

.arma__lupa {
  position: absolute; right: clamp(12px, 2.4vw, 30px); top: clamp(12px, 2.4vw, 30px);   /* arriba a la derecha el tablero nunca llega */
  width: clamp(104px, 19%, 230px); display: grid; justify-items: center; gap: 10px;
}
.arma__lupa svg {
  --techo: .3; --calado: .8;
  width: 100%; aspect-ratio: 1; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 3px var(--ed), 0 14px 34px -10px rgba(11, 14, 18, .35);
}
.arma__lupa .arma__huella { opacity: 0; }
.arma__lupa figcaption { font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--acero); white-space: nowrap; }

/* cuántos módulos, cuánto cuesta y al carrito */
.arma__compra {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 14px clamp(16px, 2vw, 26px);
  padding: 18px clamp(16px, 2vw, 26px); background: var(--negro); color: #fff;
}
.arma__cuenta { display: inline-flex; align-items: center; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.arma__cuenta button {
  width: 54px; height: 54px; border-radius: 50%; font: 500 24px/1 var(--mono);
  transition: background-color .14s var(--suave), color .14s var(--suave);
}
.arma__cuenta button:hover:not(:disabled) { background: rgba(255, 255, 255, .16); }
.arma__cuenta button:disabled { color: rgba(255, 255, 255, .28); cursor: default; }
.arma__cuenta output { min-width: 1.7em; text-align: center; font: italic 900 34px/1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.arma__resumen { display: grid; gap: 5px; }
.arma__resumen b { font-size: 17px; font-weight: 600; line-height: 1.2; }
.arma__resumen span { font: 400 12px/1.4 var(--mono); color: rgba(255, 255, 255, .68); }
.arma__total { font: italic 900 clamp(30px, 3.4vw, 46px)/1 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.arma__acciones { display: flex; gap: 8px; }
.arma__carro { min-width: 17.5em; }
.arma__cotiza { padding: 0 18px; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34); }
.arma__cotiza:hover { box-shadow: inset 0 0 0 1px #fff; }

.arma__barra {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px 28px;
  padding: 18px clamp(16px, 2vw, 26px) 20px; background: #fff; border-top: 1px solid var(--linea);
}
.arma__pasos { display: flex; gap: 6px; }
.arma__pasos button {
  display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px 0 8px; border-radius: 999px;
  font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--acero);
  box-shadow: inset 0 0 0 1px var(--linea);
  transition: background-color .14s var(--suave), color .14s var(--suave), box-shadow .14s var(--suave);
}
.arma__pasos b {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  font-weight: 500; background: var(--tarjeta); color: var(--tinta); transition: inherit;
}
.arma__pasos button:hover { box-shadow: inset 0 0 0 1px var(--tinta); color: var(--tinta); }
.arma__pasos button.hecho b { background: var(--tinta); color: #fff; }
.arma__pasos button[aria-pressed="true"] { background: var(--negro); color: #fff; box-shadow: none; }
.arma__pasos button[aria-pressed="true"] b { background: var(--ed); color: var(--ed-sobre); }
.arma__leyenda { font-size: 15.5px; line-height: 1.4; color: var(--tinta); text-wrap: pretty; min-height: 2.8em; display: flex; align-items: center; }

.arma__rango {
  grid-column: 1 / -1; width: 100%; height: 26px; margin: 0; background: none; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.arma__rango::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--ed) var(--avance, 0%), var(--linea) var(--avance, 0%)); }
.arma__rango::-moz-range-track { height: 4px; border-radius: 2px; background: var(--linea); }
.arma__rango::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--ed); }
.arma__rango::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 2px var(--ed), 0 4px 10px -2px rgba(11, 14, 18, .3);
}
.arma__rango::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--ed), 0 4px 10px -2px rgba(11, 14, 18, .3); }

.arma__chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.arma__chip {
  height: 34px; padding: 0 14px; border-radius: 999px;
  font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--grafito);
  box-shadow: inset 0 0 0 1px var(--linea);
  transition: background-color .14s var(--suave), color .14s var(--suave), box-shadow .14s var(--suave);
}
.arma__chip:hover { box-shadow: inset 0 0 0 1px var(--tinta); color: var(--tinta); }
.arma__chip[aria-pressed="true"] { background: var(--negro); color: #fff; box-shadow: none; }

/* ───────── Características ───────── */
.rasgos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.rasgos li { display: grid; gap: 12px; align-content: start; padding: 24px 24px 28px; border-radius: 16px; background: var(--tarjeta); }
.rasgos h3 { font: italic 900 clamp(22px, 2vw, 28px)/1.05 var(--sans); letter-spacing: -.02em; }
.rasgos p { font-size: 15px; line-height: 1.5; color: var(--grafito); text-wrap: pretty; }
.rasgos li.rasgos__clave { background: var(--negro); color: #fff; }
.rasgos__clave .rotulo { color: var(--ed-letras); }
.rasgos__clave p { color: rgba(255, 255, 255, .78); }

/* ───────── Qué trae ───────── */
.trae { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; border-radius: 16px; overflow: hidden; background: var(--linea); box-shadow: 0 0 0 1px var(--linea); }
.trae li { display: grid; gap: 10px; align-content: start; padding: 26px 24px 28px; background: #fff; }
.trae b { font: italic 900 clamp(34px, 3.6vw, 52px)/1 var(--sans); letter-spacing: -.03em; }
.trae span { font-size: 15px; line-height: 1.45; color: var(--grafito); text-wrap: pretty; }
.cierre { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 40px; }
.cierre p { font-size: 15.5px; line-height: 1.5; color: var(--acero); max-width: 56ch; }
.cierre p a { color: var(--tinta); box-shadow: inset 0 -1px 0 var(--ed); }
.cierre p a:hover { color: var(--ed-tinta); }
.cierre .rotulo { color: var(--ed-tinta); }

@media (max-width: 1080px) {
  .arma__compra { grid-template-columns: auto 1fr auto; }
  .arma__acciones { grid-column: 1 / -1; }
  .arma__acciones .btn { flex: 1; min-width: 0; }
}
@media (max-width: 860px) {
  .arma__barra { grid-template-columns: 1fr; gap: 14px; }
  .arma__pasos { order: 1; }
  .arma__leyenda { order: 2; min-height: 2.8em; }
  .arma__rango { order: 3; }
  .arma__chips { order: 4; justify-content: flex-start; }
  .trae, .rasgos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .arma { border-radius: 16px; }
  .arma__escena { aspect-ratio: 1/1; }
  .arma__chapa { font-size: 9.5px; letter-spacing: .12em; max-width: calc(100% - 150px); }
  .arma__pasos button { flex: 1; justify-content: flex-start; padding-right: 10px; font-size: 11px; letter-spacing: .04em; }
  .arma__compra { grid-template-columns: auto 1fr; }
  .arma__total { justify-self: end; }
  .arma__resumen { grid-column: 1 / -1; order: 3; }
  .arma__acciones { order: 4; flex-direction: column-reverse; }
  .arma__acciones .btn { flex: none; }
  .arma__cuenta button { width: 44px; height: 44px; }
  .arma__cuenta output { min-width: 1.5em; font-size: 28px; }
  .arma__total { font-size: 26px; }
  .arma__lupa figcaption { font-size: 9px; letter-spacing: .1em; }
}
@media (max-width: 520px) { .rasgos { grid-template-columns: 1fr; } }