/* =====================================================================
   ARMADOR DE MONTAJES

   Lo cargan los dos sitios, y cada uno trae su propio sistema: la
   rentadora nombra sus variables --s-azul y eventos las llama --azul.
   Por eso el armador define las suyas y no hereda de ninguno: así se ve
   igual en los dos y se arregla en un solo lugar.
   ===================================================================== */

.arm{
  --a-azul:#1e2d5c; --a-azul-osc:#16244d; --a-oro:#d8a21f; --a-rojo:#b91c1c;
  --a-tinta:#111827; --a-gris:#6b7280; --a-linea:#e5e7eb;

  display:grid; gap:1.75rem;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:start;
  font-family:inherit; color:var(--a-tinta);
}
@media(max-width:960px){ .arm{ grid-template-columns:1fr; gap:1.25rem; } }

/* ---------------------------------------------------------------
   EL LIENZO
   Se queda pegado al desplazar: la gracia del armador es ver el
   cambio, y si el dibujo se va de pantalla al bajar por los colores
   deja de servir para lo único que existe.
   --------------------------------------------------------------- */
.arm-lienzo{ position:sticky; top:5rem; }
@media(max-width:960px){
  /* Pegado DEBAJO de la barra del sitio, no en top:0.
     La barra también es sticky en top:0 y va en z-index 50, así que con
     top:0 el dibujo se metía detrás de ella: medido en un teléfono, la
     barra le tapaba los 65px de arriba —justo los respaldos de las
     sillas— en cualquier punto de la página. */
  .arm-lienzo{ top:calc(var(--arm-barra, 64px) + .4rem); z-index:20;
               background:#fff; padding-bottom:.75rem;
               box-shadow:0 12px 20px -18px rgba(16,28,61,.6); }
}

.arm-dibujo{
  background:
    radial-gradient(680px 380px at 50% 12%, #ffffff, transparent 70%),
    linear-gradient(160deg,#f4f7fd,#e9eef8);
  border:1px solid var(--a-linea); border-radius:20px;
  padding:1rem; overflow:hidden;
}
.arm-dibujo svg{ width:100%; height:auto; display:block; }
/* En un teléfono el dibujo se lleva media pantalla y los colores
   quedan fuera de cuadro: ahí sí conviene recortarlo. */
@media(max-width:960px){ .arm-dibujo svg{ max-height:40vh; } }

/* Cada parte del dibujo cambia de color con una transición corta: lo
   suficiente para que el ojo siga el cambio, no tanto como para que
   quien está comparando dos tonos tenga que esperar. */
#dibujo [class^="pintar-"]{ transition:fill .22s ease; }
@media (prefers-reduced-motion: reduce){
  #dibujo [class^="pintar-"]{ transition:none; }
}

/* Lo elegido, en texto, debajo del dibujo */
.arm-resumen{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.85rem; }
.arm-resumen .chip{
  display:inline-flex; align-items:center; gap:.4rem;
  background:#fff; border:1px solid var(--a-linea); border-radius:999px;
  padding:.32rem .75rem; font-size:.82rem; color:var(--a-gris);
}
.arm-resumen .chip strong{ color:var(--a-azul); }
.arm-resumen .chip i{
  width:12px; height:12px; border-radius:50%; display:inline-block;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);
}
.arm-resumen .vacio{ font-size:.85rem; color:var(--a-gris); }

/* La foto real. Solo aparece con la combinación exacta, así que cuando
   aparece merece marco: es la prueba de que eso existe montado. */
.arm-foto{
  margin:1rem 0 0; border-radius:16px; overflow:hidden;
  border:2px solid var(--a-oro);
  box-shadow:0 18px 38px -26px rgba(216,162,31,.9);
  animation:arm-aparece .32s ease both;
}
.arm-foto img{ width:100%; display:block; }
.arm-foto figcaption{
  background:var(--a-azul-osc); color:#fff; padding:.6rem .9rem;
  font-size:.83rem; display:flex; align-items:center; gap:.5rem;
}
.arm-foto figcaption i{ color:var(--a-oro); }
@keyframes arm-aparece{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
@media (prefers-reduced-motion: reduce){ .arm-foto{ animation:none; } }

/* ---------------------------------------------------------------
   LOS PASOS
   --------------------------------------------------------------- */
.arm-paso{
  background:#fff; border:1px solid var(--a-linea); border-radius:16px;
  padding:1.15rem 1.25rem; margin-bottom:.85rem;
}
.arm-paso-cab{ display:flex; gap:.8rem; align-items:flex-start; margin-bottom:.9rem; }
.arm-paso-cab .n{
  width:26px; height:26px; flex-shrink:0; border-radius:50%;
  background:linear-gradient(140deg,#25376b,var(--a-azul-osc)); color:#fff;
  display:grid; place-items:center; font-size:.78rem; font-weight:800;
}
.arm-paso-cab h3{ margin:0; font-size:1rem; font-weight:700; color:var(--a-azul); }
.arm-paso-cab p{ margin:.15rem 0 0; font-size:.83rem; color:var(--a-gris); }

.arm-colores{
  display:grid; gap:.55rem;
  grid-template-columns:repeat(auto-fill,minmax(74px,1fr));
}
.arm-color{
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
  background:none; border:none; padding:.2rem; cursor:pointer;
  font-family:inherit; font-size:.72rem; color:var(--a-gris); line-height:1.25;
  text-align:center;
}
.arm-color .muestra{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background-size:cover; background-position:center;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14), 0 2px 5px rgba(16,28,61,.1);
  transition:box-shadow .18s, transform .18s;
}
.arm-color .muestra i{ color:#fff; font-size:.85rem; opacity:0;
                       text-shadow:0 1px 3px rgba(0,0,0,.55); transition:opacity .15s; }
.arm-color:hover .muestra{ transform:translateY(-2px);
                           box-shadow:inset 0 0 0 1px rgba(0,0,0,.2), 0 8px 16px -8px rgba(16,28,61,.5); }
.arm-color .et{ overflow-wrap:anywhere; }

/* La elegida: anillo azul y palomita. Un borde de color no basta cuando
   la muestra ya ES un color —sobre el mantel blanco no se veía nada. */
.arm-color.on .muestra{
  box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--a-azul), 0 6px 14px -6px rgba(30,45,92,.7);
}
.arm-color.on .muestra i{ opacity:1; }
.arm-color.on .et{ color:var(--a-azul); font-weight:700; }

/* "Sin poner" no es un color, y no debe parecerlo. */
.arm-color.sin .muestra{
  background:repeating-linear-gradient(45deg,#f3f4f6 0 6px,#e8eaef 6px 12px);
}
.arm-color.sin .muestra i{ color:var(--a-gris); opacity:.65; text-shadow:none; }
.arm-color.sin.on .muestra i{ opacity:1; color:var(--a-azul); }

/* ---------------------------------------------------------------
   CIERRE
   --------------------------------------------------------------- */
.arm-cierre{
  background:#fff; border:1px solid var(--a-linea); border-radius:16px;
  padding:1.25rem; margin-top:.25rem;
  box-shadow:0 18px 34px -26px rgba(16,28,61,.55);
}

/* Botones propios: la rentadora los llama .s-btn y eventos .btn, así que
   el armador no puede usar ninguno de los dos y tener el mismo aspecto. */
.arm-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  width:100%; padding:.85rem 1.25rem; border:none; border-radius:12px;
  font-family:inherit; font-size:.95rem; font-weight:700; cursor:pointer;
  text-decoration:none; color:#fff; transition:transform .16s, box-shadow .16s;
}
.arm-btn:hover{ transform:translateY(-1px); }
.arm-btn-wa{ background:#25D366; box-shadow:0 12px 26px -14px rgba(37,211,102,.95); }
.arm-btn-rojo{ background:linear-gradient(135deg,#c62222,#991b1b);
               box-shadow:0 12px 26px -14px rgba(185,28,28,.9); margin-top:.6rem; }

.arm-limpiar{
  display:block; width:100%; margin-top:.85rem; padding:.5rem;
  background:none; border:none; cursor:pointer; font-family:inherit;
  font-size:.82rem; color:var(--a-gris); text-decoration:underline;
}
.arm-limpiar:hover{ color:var(--a-rojo); }

/* Sin nada cargado en el admin */
.arm-nada{
  background:#fff; border:1px dashed var(--a-linea); border-radius:16px;
  padding:2.5rem 1.5rem; text-align:center; color:var(--a-gris);
}
.arm-nada i{ font-size:2rem; color:var(--a-linea); margin-bottom:.75rem; display:block; }
.arm-nada h3{ margin:0 0 .35rem; color:var(--a-azul); font-size:1.05rem; }
.arm-nada p{ margin:0; font-size:.9rem; }

/* =====================================================================
   EL DIBUJO

   Estas reglas estaban en un <style> dentro del propio <svg> y ahí no se
   pueden tener: el navegador trata el contenido de un SVG como contenido
   foráneo, así que un "<" en el CSS —incluso dentro de un comentario— se
   parsea como etiqueta y corta la hoja por la mitad. Perdimos así la
   regla que oculta las capas, y las piezas "sin poner" seguían pintadas.

   El color se aplica por variable, no elemento por elemento: las sillas y
   los moños se repiten con <use> y su contenido vive en un shadow tree
   donde los selectores del documento no entran. La herencia sí entra, y
   una custom property se hereda. Por eso las piezas dentro de <defs>
   llevan su fill:var(...) en línea.
   ===================================================================== */
#dibujo{
  --c-mantel:#fbfbf8; --c-cubremantel:#ffffff; --c-camino:#d8a21f;
  --c-silla:#f7f5ef;  --c-funda:#ffffff;       --c-monio:#d8a21f;
  --c-centro:#6b7a4a;
}
#dibujo .pintar-mantel     { fill:var(--c-mantel); }
#dibujo .pintar-cubremantel{ fill:var(--c-cubremantel); }
#dibujo .pintar-camino     { fill:var(--c-camino); }
#dibujo .pintar-silla      { fill:var(--c-silla); }
#dibujo .pintar-funda      { fill:var(--c-funda); }
#dibujo .pintar-monio      { fill:var(--c-monio); }
#dibujo .pintar-centro     { fill:var(--c-centro); }

#dibujo .mt-linea{ fill:none; stroke:#20293f; stroke-width:3;
                   stroke-linejoin:round; stroke-linecap:round; }
#dibujo .mt-detalle{ fill:none; stroke:#20293f; stroke-width:2; opacity:.30; }

/* El atributo hidden no apaga un grupo de SVG: el reset que lo hace
   desaparecer está pensado para HTML. */
#dibujo .oculta{ display:none; }

/* La vajilla. Es decorativa —no se renta el plato— pero sin ella el
   dibujo se lee como un cilindro de color y no como una mesa puesta.
   Va en tonos neutros a propósito: si compitiera con el mantel,
   estorbaría justo lo que se está comparando. */
#dibujo .mt-plato { fill:#ffffff; stroke:#20293f; stroke-width:2.2; }
#dibujo .mt-plato2{ fill:#eef1f7; stroke:#20293f; stroke-width:1.6; opacity:.9; }
#dibujo .mt-copa  { fill:#eaf1f7; stroke:#20293f; stroke-width:2;
                    stroke-linejoin:round; opacity:.95; }
/* El tallo y la base van sin relleno: con fill, el trazo del tallo se
   cerraba solo y salía un triángulo donde debería haber una línea. */
#dibujo .mt-copa-t{ fill:none; stroke:#20293f; stroke-width:2;
                    stroke-linecap:round; opacity:.95; }
#dibujo #mt-vajilla{ opacity:.96; }

/* =====================================================================
   SEGUNDA PASADA VISUAL
   ===================================================================== */

/* ---- La escena ----
   Pared, piso y una luz cenital. Sobre un fondo plano, una mesa con
   mantel blanco parecía un recorte flotando; con horizonte se lee como
   un montaje dentro de un salón. */
.arm-dibujo{ position:relative; padding:1.25rem; }
.arm-escena{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(520px 300px at 50% 8%, rgba(255,255,255,.95), transparent 72%),
    linear-gradient(#eef2fa 0%, #e7edf8 74%, #dde5f2 74.2%, #cfd9ec 100%);
}
.arm-dibujo svg{ position:relative; z-index:2; }

/* Ver en grande. En un teléfono el dibujo cabe en 38vh, y comparar dos
   tonos de hueso ahí no se puede. */
.arm-lupa{
  position:absolute; z-index:3; top:.7rem; right:.7rem;
  width:34px; height:34px; border-radius:10px; border:none; cursor:pointer;
  background:rgba(255,255,255,.9); color:var(--a-azul); font-size:.8rem;
  display:grid; place-items:center;
  box-shadow:0 2px 8px rgba(16,28,61,.18);
  transition:background .16s, transform .16s;
}
.arm-lupa:hover{ background:#fff; transform:translateY(-1px); }

.arm-dibujo.grande{
  position:fixed; inset:1rem; z-index:120; padding:2rem;
  border-radius:20px; box-shadow:0 40px 80px -30px rgba(8,15,38,.8);
}
.arm-dibujo.grande svg{ max-height:none; height:100%; }

/* ---- Progreso ---- */
.arm-progreso{
  background:#fff; border:1px solid var(--a-linea); border-radius:14px;
  padding:.85rem 1.1rem; margin-bottom:.85rem;
}
.arm-progreso .cab{
  display:flex; justify-content:space-between; align-items:center;
  font-size:.83rem; font-weight:700; color:var(--a-azul); margin-bottom:.55rem;
}
.arm-progreso .cab i{ color:var(--a-oro); }
.arm-progreso .cuenta{ color:var(--a-gris); font-weight:600; }
.arm-progreso .cuenta b{ color:var(--a-azul); }
.arm-progreso .barra{
  height:6px; border-radius:99px; background:#eef1f6; overflow:hidden;
}
.arm-progreso .barra span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--a-azul),#3d5391);
  border-radius:99px; transition:width .34s cubic-bezier(.2,.7,.3,1);
}

/* ---- Pasos: el que ya contestaste se aparta ----
   Sin esto, con seis tarjetas idénticas cuesta ver dónde te quedaste. */
.arm-paso{ position:relative; transition:border-color .2s, box-shadow .2s; }
.arm-paso.listo{ border-color:#dbe3f2; }
.arm-paso.listo .arm-paso-cab .n{
  background:linear-gradient(140deg,#16a34a,#15803d);
}
.arm-paso.listo .arm-paso-cab .n::after{
  content:'\f00c'; font-family:'Font Awesome 6 Free'; font-weight:900; font-size:.62rem;
}
.arm-paso.listo .arm-paso-cab .n{ font-size:0; }

/* ---- Muestras de color ----
   Un degradado suave y un brillo arriba: un cuadro de color plano se ve
   como una casilla de formulario, no como tela. */
.arm-color .muestra{
  position:relative; overflow:hidden;
  width:46px; height:46px; border-radius:13px;
}
.arm-color .muestra::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(150deg, rgba(255,255,255,.42), transparent 46%),
             linear-gradient(0deg, rgba(0,0,0,.10), transparent 55%);
}
.arm-color .muestra i{ position:relative; z-index:2; }
.arm-color.on .muestra{ animation:arm-elegido .32s cubic-bezier(.3,1.4,.5,1); }
@keyframes arm-elegido{ 0%{transform:scale(1)} 45%{transform:scale(1.13)} 100%{transform:scale(1)} }
@media (prefers-reduced-motion: reduce){ .arm-color.on .muestra{ animation:none; } }

/* ---- Copiar enlace ---- */
.arm-compartir{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  width:100%; margin-top:.6rem; padding:.7rem 1rem;
  background:#fff; border:1.5px solid var(--a-linea); border-radius:12px;
  cursor:pointer; font-family:inherit; font-size:.88rem; font-weight:600;
  color:var(--a-azul); transition:border-color .16s, background .16s, color .16s;
}
.arm-compartir:hover{ border-color:var(--a-azul); background:#f7f9fd; }
.arm-compartir.listo{ border-color:#16a34a; background:#f0fdf4; color:#15803d; }
.arm-compartir.listo i::before{ content:'\f00c'; }

/* ---- Chips del resumen: un poco más de cuerpo ---- */
.arm-resumen .chip{
  box-shadow:0 1px 2px rgba(16,28,61,.05);
  transition:transform .16s;
}
.arm-resumen .chip:hover{ transform:translateY(-1px); }

/* El atributo hidden no gana contra una clase que declara display: una
   regla de autor le gana al `[hidden]` de la hoja base del navegador.
   Aquí lo sufrió la foto del montaje, que se quedaba visible con la
   combinación equivocada —justo lo que no debe pasar. */
.arm [hidden]{ display:none !important; }

/* Volumen de la tela. El contorno solo dibuja el borde; estos rellenos
   oscurecen el interior de cada pliegue, que es lo que separa una tela
   que cae de un cilindro pintado. */
#dibujo .mt-pliegue-sombra{ fill:#000; opacity:.055; }

/* ---------------------------------------------------------------
   EMPEZAR DE UNA YA MONTADA
   Con seis pasos de diez colores, arrancar de cero paraliza. Estas
   miniaturas no son una galería: son el atajo para llegar a algo que
   existe y moverle un color.
   --------------------------------------------------------------- */
.arm-sugeridas{
  background:#fff; border:1px solid var(--a-linea); border-radius:16px;
  padding:1rem 1.1rem; margin-bottom:.85rem;
}
.arm-sugeridas .cab{
  display:flex; align-items:center; gap:.5rem; margin-bottom:.75rem;
  font-size:.83rem; font-weight:700; color:var(--a-azul);
}
.arm-sugeridas .cab i{ color:var(--a-oro); }

/* Tira horizontal: con seis o siete combinaciones, apilarlas se comería
   la pantalla antes de llegar al primer paso. */
.arm-sugeridas .tira{
  display:flex; gap:.6rem; overflow-x:auto; padding-bottom:.35rem;
  scrollbar-width:thin;
}
.arm-sugeridas .sug{
  flex:0 0 auto; width:96px; padding:0; border:none; background:none;
  cursor:pointer; font-family:inherit; text-align:left;
}
.arm-sugeridas .sug img{
  width:96px; height:68px; object-fit:cover; border-radius:11px; display:block;
  border:2px solid transparent; box-shadow:0 2px 6px rgba(16,28,61,.12);
  transition:border-color .18s, transform .18s, box-shadow .18s;
}
.arm-sugeridas .sug span{
  display:block; margin-top:.35rem; font-size:.72rem; line-height:1.25;
  color:var(--a-gris); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.arm-sugeridas .sug:hover img{
  transform:translateY(-2px); box-shadow:0 10px 20px -10px rgba(16,28,61,.5);
}
.arm-sugeridas .sug.on img{ border-color:var(--a-oro); }
.arm-sugeridas .sug.on span{ color:var(--a-azul); font-weight:700; }

/* ---------------------------------------------------------------
   CUANDO NO HAY FOTO
   El hueco vacío parecía un error. Decirlo es más honesto, y abre la
   única puerta que sirve aquí: preguntar.
   --------------------------------------------------------------- */
.arm-sinfoto{
  display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
  margin-top:1rem; padding:.9rem 1.05rem; border-radius:14px;
  background:#f7f9fd; border:1px dashed #ccd6ea;
}
.arm-sinfoto > i{ font-size:1.3rem; color:#aab5cc; flex-shrink:0; }
.arm-sinfoto div{ flex:1; min-width:170px; }
.arm-sinfoto strong{ display:block; font-size:.87rem; color:var(--a-azul); }
.arm-sinfoto span{ font-size:.8rem; color:var(--a-gris); }
.arm-sinfoto .wa{
  display:inline-flex; align-items:center; gap:.4rem; flex-shrink:0;
  background:#25D366; color:#fff; text-decoration:none;
  border-radius:10px; padding:.5rem .85rem; font-size:.85rem; font-weight:700;
  transition:transform .16s;
}
.arm-sinfoto .wa:hover{ transform:translateY(-1px); color:#fff; }

/* Los chips son botones: llevan a su paso. Al leer el resumen es justo
   cuando uno piensa "el moño mejor en oro", y buscar la tarjeta entre
   seis rompe el impulso. */
.arm-resumen .chip{
  font:inherit; font-size:.82rem; cursor:pointer; text-align:left;
}
.arm-resumen .chip:hover{ border-color:#c7d0e4; }

/* Al llegar, el paso parpadea una vez: si no, el desplazamiento deja al
   ojo buscando cuál de las seis tarjetas era. */
.arm-paso.senalado{
  border-color:var(--a-oro);
  box-shadow:0 0 0 4px rgba(216,162,31,.16);
}
@media (prefers-reduced-motion: no-preference){
  .arm-paso.senalado{ transition:border-color .2s, box-shadow .2s; }
}

/* ---------------------------------------------------------------
   FORMA DE LA MESA
   Redonda o tablón. Lo que cambia de forma va duplicado en el SVG y
   aquí se enseña una versión; el resto —sillas, moños, fundas— sirve
   igual para las dos.
   --------------------------------------------------------------- */
#dibujo .f-rec{ display:none; }
#dibujo.rect .f-red{ display:none; }
#dibujo.rect .f-rec{ display:inline; }

/* El selector de forma, encima del dibujo */
.arm-forma{
  position:absolute; z-index:3; top:.7rem; left:.7rem;
  display:flex; gap:2px; padding:3px; border-radius:11px;
  background:rgba(255,255,255,.9); box-shadow:0 2px 8px rgba(16,28,61,.18);
}
.arm-forma button{
  border:none; background:none; cursor:pointer; font-family:inherit;
  font-size:.76rem; font-weight:600; color:var(--a-gris);
  padding:.34rem .7rem; border-radius:8px; transition:background .16s, color .16s;
}
.arm-forma button:hover{ color:var(--a-azul); }
.arm-forma button.on{ background:var(--a-azul); color:#fff; }

/* ---------------------------------------------------------------
   CUÁNTAS MESAS
   Sin esto el armador enseña una mesa bonita y el cliente queda igual
   de lejos de saber qué pedir. Con esto sale la lista completa.
   --------------------------------------------------------------- */
.arm-cuantas{
  background:#fff; border:1px solid var(--a-linea); border-radius:16px;
  padding:1rem 1.1rem; margin-bottom:.85rem;
}
.arm-cuantas .cab{
  display:flex; align-items:center; gap:.5rem; margin-bottom:.8rem;
  font-size:.83rem; font-weight:700; color:var(--a-azul);
}
.arm-cuantas .cab i{ color:var(--a-oro); }

.arm-cuantas .campos{
  display:flex; align-items:flex-end; gap:.6rem; flex-wrap:wrap;
}
.arm-cuantas label{ display:flex; flex-direction:column; gap:.25rem; }
.arm-cuantas label span{ font-size:.72rem; color:var(--a-gris); font-weight:600; }
.arm-cuantas input{
  width:86px; padding:.5rem .65rem; font:inherit; font-size:.95rem;
  font-variant-numeric:tabular-nums;
  border:1.5px solid var(--a-linea); border-radius:10px; background:#fcfdff;
  color:var(--a-tinta);
}
.arm-cuantas input:focus{
  outline:none; border-color:var(--a-azul); background:#fff;
  box-shadow:0 0 0 4px rgba(30,45,92,.09);
}
.arm-cuantas .por{ padding-bottom:.55rem; color:var(--a-gris); font-weight:700; }
.arm-cuantas .igual{
  padding-bottom:.55rem; font-size:.85rem; font-weight:700; color:var(--a-azul);
}

.arm-cuantas .lista{
  list-style:none; margin:.9rem 0 0; padding:.75rem .9rem;
  background:#f7f9fd; border-radius:12px;
}
.arm-cuantas .lista li{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.3rem 0; font-size:.87rem; color:var(--a-gris);
  border-bottom:1px solid #e8edf6;
}
.arm-cuantas .lista li:last-child{ border-bottom:none; }
.arm-cuantas .lista li b{
  color:var(--a-azul); font-size:1rem; font-variant-numeric:tabular-nums;
}
.arm-cuantas .lista .vacio{ justify-content:flex-start; color:var(--a-gris); }
.arm-cuantas .nota{
  margin:.7rem 0 0; font-size:.76rem; color:var(--a-gris); line-height:1.45;
}

/* Fecha opcional, dentro del bloque de cantidades */
.arm-cuantas .fecha{ margin-top:.85rem; }
.arm-cuantas .fecha em{ font-style:normal; color:#9aa3b5; font-weight:500; }
.arm-cuantas .fecha input{ width:100%; max-width:220px; }
.arm-cuantas .fecha input.cargando{ opacity:.6; }

/* Cuánto queda de ese color para esa fecha. Solo sale en las opciones
   enlazadas a un producto; en las demás no hay dato que dar y callarse
   es mejor que inventar un cero. */
.arm-color{ position:relative; }
.arm-color .stock{
  position:absolute; top:-4px; right:2px;
  background:var(--a-azul); color:#fff;
  border-radius:999px; padding:.05rem .4rem;
  font-size:.62rem; font-weight:800; line-height:1.5;
  box-shadow:0 0 0 2px #fff;
}
.arm-color .stock.cero{ background:var(--a-rojo); }
.arm-color.agotado .muestra{ filter:grayscale(.65); opacity:.55; }
.arm-color.agotado .et{ color:#b6bdcb; }

/* ---------------------------------------------------------------
   FOTO PARECIDA

   La exacta lleva marco de oro: es la prueba de que ese montaje
   existe. La parecida NO puede verse igual, o se lee como una
   promesa. Va en gris con el pie en ámbar, y el pie dice qué
   cambia respecto a lo que la persona eligió.
   --------------------------------------------------------------- */
.arm-foto.aprox{
  border-color:#d7ddea;
  box-shadow:0 14px 30px -24px rgba(16,28,61,.55);
}
.arm-foto.aprox figcaption{
  background:#59606e;
  font-style:normal;
}
.arm-foto.aprox figcaption i{ color:#f0c14b; }
.arm-foto.aprox img{ filter:saturate(.92); }