/* ============================================================
   JEWELSathome — Proceso de compra
   Se carga DESPUÉS de style.css. Extiende el mismo sistema:
   mismas variables, misma tipografía, mismas reglas de filete.
   ============================================================ */

:root{
  /* --acento (#D27541) no llega a 4.5:1 sobre --base: se reserva para
     texto grande y superficies. Para texto pequeño usamos su versión tinta. */
  --acento-ink:#9C4A1B;
  --ok:#3E6B4F;
  --err:#8C2B1B;
  --line-soft: color-mix(in srgb, var(--marca) 9%, transparent);
  --wash: color-mix(in srgb, var(--marca) 4%, var(--base));
  --wash-strong: color-mix(in srgb, var(--marca) 7%, var(--base));
}

/* ---------- Superficies del navegador ----------
   Selección, cursor, foco y scrollbar también son parte del diseño. */
::selection{background:var(--marca);color:var(--base);}
html{scrollbar-color: color-mix(in srgb, var(--marca) 35%, var(--base)) var(--base);}
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-track{background:var(--base);}
::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--marca) 28%, var(--base));
  border:3px solid var(--base);border-radius:99px;
}
::-webkit-scrollbar-thumb:hover{background: color-mix(in srgb, var(--marca) 45%, var(--base));}
:focus-visible{outline:2px solid var(--acento-ink);outline-offset:3px;border-radius:1px;}
input,textarea{caret-color:var(--acento-ink);}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}

/* ============================================================
   1. Cabecera del configurador
   ============================================================ */
.shop-page{background:var(--base);min-height:100vh;}

.shop-head{
  position:sticky;top:0;z-index:120;background:var(--base);
  border-bottom:1px solid var(--line-marca);
}
.shop-head-in{
  max-width:1360px;margin:0 auto;padding:18px 40px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.shop-head .logo{color:var(--marca);}
.shop-head .logo .wm2{color:var(--secundario);}
.shop-exit{
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  color:var(--text-soft);display:inline-flex;align-items:center;gap:8px;
  border-bottom:1px solid transparent;padding-bottom:3px;transition:color .2s,border-color .2s;
}
.shop-exit:hover{color:var(--marca);border-color:var(--line-marca-strong);}
.shop-exit svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}

/* Progreso — filete con marcas, no "pills" */
.shop-progress{display:flex;align-items:center;gap:0;flex:0 1 480px;}
.shop-progress-step{
  flex:1 1 0;display:flex;flex-direction:column;gap:8px;min-width:0;
  background:none;padding:0;text-align:left;
}
.shop-progress-bar{height:2px;background:var(--line-marca);position:relative;overflow:hidden;}
.shop-progress-bar::after{
  content:"";position:absolute;inset:0;background:var(--acento);
  transform:scaleX(0);transform-origin:left;
  transition:transform .55s cubic-bezier(.16,1,.3,1);
}
.shop-progress-step.done .shop-progress-bar::after,
.shop-progress-step.current .shop-progress-bar::after{transform:scaleX(1);}
.shop-progress-step.current .shop-progress-bar::after{background:var(--marca);}
.shop-progress-label{
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:var(--text-soft);opacity:.55;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding-right:14px;transition:opacity .3s ease,color .3s ease;
}
.shop-progress-step.done .shop-progress-label{opacity:.85;}
.shop-progress-step.current .shop-progress-label{opacity:1;color:var(--marca);}
.shop-progress-step[disabled]{cursor:default;}
.shop-progress-step:not([disabled]){cursor:pointer;}

.shop-progress-mobile{display:none;}

/* ============================================================
   2. Estructura: pasos + raíl del pedido
   ============================================================ */
.shop-layout{
  max-width:1360px;margin:0 auto;padding:56px 40px 120px;
  display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:72px;align-items:start;
}

.shop-intro{margin-bottom:52px;max-width:560px;}
.shop-intro h1{font-size:38px;line-height:1.15;}
.shop-intro p{margin-top:16px;font-size:16px;color:var(--text-soft);}

/* ---------- Bloque de paso ---------- */
.bstep{border-top:1px solid var(--line-marca);}
.bstep:last-of-type{border-bottom:1px solid var(--line-marca);}

.step-h{margin:0;font:inherit;color:inherit;letter-spacing:normal;}
.step-head{
  display:flex;align-items:baseline;gap:22px;width:100%;padding:30px 0;
  background:none;text-align:left;
}
.step-head[disabled]{cursor:default;}
.step-num{
  flex:0 0 26px;font-family:var(--font-display);font-style:italic;font-weight:300;
  font-size:19px;line-height:1;color:var(--acento-ink);
}
.step-title-wrap{flex:1 1 auto;min-width:0;}
.step-title{
  display:block;font-family:var(--font-display);font-size:23px;font-weight:500;
  color:var(--marca);letter-spacing:-0.01em;line-height:1.25;
}
.step-answer{
  display:block;margin-top:6px;font-size:14px;color:var(--text-soft);
  overflow:hidden;text-overflow:ellipsis;
}
.step-edit{
  flex:0 0 auto;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  color:var(--text-soft);border-bottom:1px solid var(--line-marca-strong);padding-bottom:3px;
  transition:color .2s,border-color .2s;
}
.step-head:hover .step-edit{color:var(--marca);border-color:var(--marca);}

.bstep.is-pending .step-num,
.bstep.is-pending .step-title{opacity:.38;}
.bstep.is-active .step-num{color:var(--acento);font-size:26px;}
.bstep.is-active .step-title{font-size:27px;}

.step-body{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .5s cubic-bezier(.16,1,.3,1);
}
.bstep.is-active .step-body{grid-template-rows:1fr;}
.step-body-in{overflow:hidden;min-height:0;}
.step-body-pad{padding:2px 0 42px 48px;}
.step-lead{font-size:15px;line-height:1.65;color:var(--text-soft);max-width:56ch;margin-bottom:28px;}

.step-foot{margin-top:34px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
.step-foot .btn{min-width:190px;}
.step-hint{font-size:13px;color:var(--text-soft);}
.step-hint.warn{color:var(--err);}

/* ============================================================
   3. Paso 1 — personas
   ============================================================ */
.people-row{display:flex;gap:10px;flex-wrap:wrap;}
.opt{
  position:relative;background:var(--base);border:1px solid var(--line-marca-strong);
  border-radius:var(--radius);color:var(--marca);
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.opt:hover{border-color:var(--marca);}
.opt.on{background:var(--marca);border-color:var(--marca);color:var(--base);}

.people-opt{
  width:88px;padding:20px 8px 16px;display:flex;flex-direction:column;align-items:center;gap:6px;
}
.people-opt .n{font-family:var(--font-display);font-size:28px;line-height:1;}
.people-opt .t{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft);transition:color .2s;}
.people-opt.on .t{color:color-mix(in srgb, var(--base) 78%, transparent);}
.people-opt.people-more .n{font-size:19px;padding-top:6px;padding-bottom:3px;}

.people-more-row{
  margin-top:20px;display:flex;align-items:center;gap:14px;
  animation:shopFade .4s cubic-bezier(.16,1,.3,1);
}
.people-more-row label{font-size:14px;color:var(--text-soft);}
.field-num{
  width:88px;padding:12px 14px;border:1px solid var(--line-marca-strong);border-radius:var(--radius);
  font-family:var(--font-sans);font-size:15px;color:var(--marca);background:var(--base);text-align:center;
}
.field-num:focus{outline:none;border-color:var(--marca);}

@keyframes shopFade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* ============================================================
   4. Paso 2 — el kit de cada persona
   ============================================================ */
.seg{
  display:inline-flex;border:1px solid var(--line-marca-strong);border-radius:var(--radius);
  overflow:hidden;margin-bottom:32px;
}
.seg button{
  padding:13px 26px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  color:var(--text-soft);background:var(--base);transition:background .2s,color .2s;
}
.seg button + button{border-left:1px solid var(--line-marca-strong);}
.seg button:hover{color:var(--marca);}
.seg button.on{background:var(--marca);color:var(--base);}

/* Tira de personas 

/* Filtros de colección */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px;}
.filter{
  padding:9px 18px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  color:var(--text-soft);border:1px solid var(--line-marca);border-radius:999px;background:var(--base);
  transition:border-color .2s,color .2s,background .2s;
}
.filter:hover{border-color:var(--line-marca-strong);color:var(--marca);}
.filter.on{background:var(--marca);border-color:var(--marca);color:var(--base);}

/* Rejilla de kits */
.kit-pick{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 22px;}
.pick{background:none;padding:0;text-align:left;display:flex;flex-direction:column;position:relative;}
.pick .frame{
  aspect-ratio:4/5;overflow:hidden;background:var(--wash);
  border:1px solid var(--line-marca);border-radius:var(--radius);
  transition:border-color .25s ease,box-shadow .25s ease;
}
.pick .frame img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
}
.pick:hover .frame img{transform:scale(1.045);}
.pick:hover .frame{border-color:var(--line-marca-strong);}
.pick .coll{
  margin-top:14px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  color:var(--acento-ink);
}
.pick .name{
  margin-top:6px;font-family:var(--font-display);font-size:17px;color:var(--marca);
  text-transform:uppercase;letter-spacing:.05em;line-height:1.2;
}
.pick .price{margin-top:6px;font-size:13px;color:var(--text-soft);}
.pick .price s{opacity:.6;margin-left:6px;}
.pick.on .frame{border-color:var(--marca);box-shadow:0 0 0 1px var(--marca);}
.pick .tick{
  position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:50%;
  background:var(--marca);color:var(--base);display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.6);transition:opacity .2s ease,transform .3s cubic-bezier(.16,1,.3,1);
}
.pick .tick svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.pick.on .tick{opacity:1;transform:scale(1);}

/* ============================================================
   5. Paso 2 — el kit de cada persona, pieza a pieza
   ============================================================ */

/* La cabecera del recorrido: quién y por qué pieza va. */
.pz-cab{margin-bottom:30px;}
.pz-hilo{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding-bottom:16px;border-bottom:1px solid var(--line-marca);
}
.pz-quien{
  font-family:var(--font-display);font-size:19px;color:var(--marca);
  flex:0 0 auto;
}
.pz-pasos{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0;}
/* La caja de estos botones va en brand.css, que es donde se le puede
   ganar al estilo de botón del tema. Aquí solo lo de dentro. */
.pz-paso .pz-n{
  display:inline-flex;align-items:center;justify-content:center;
  width:19px;height:19px;border-radius:50%;
  border:1px solid var(--line-marca-strong);
  font-size:11px;line-height:1;flex:0 0 auto;
}
.pz-paso .pz-n svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.4;}
.pz-paso.on .pz-n{border-color:color-mix(in srgb, var(--base) 55%, transparent);}
.pz-paso.hecho .pz-n{background:var(--marca);color:var(--base);border-color:var(--marca);}

/* La tira de personas. Solo con más de una, claro. */
.pz-tira{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;}
.pz-chip{
  display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;
  font-size:13px;text-align:left;line-height:1.3;
}
.pz-chip:disabled{opacity:.4;cursor:default;}
.pz-chip-foto{
  width:38px;height:38px;border-radius:calc(var(--radius) - 6px);
  overflow:hidden;background:var(--wash);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
}
.pz-chip-foto img{width:100%;height:100%;object-fit:cover;display:block;}
.pz-chip-foto .plus{font-size:17px;color:var(--text-soft);}
.pz-chip-txt{display:flex;flex-direction:column;gap:1px;}
.pz-chip-n{font-weight:600;}
.pz-chip-q{font-size:11.5px;color:var(--text-soft);}
/* Todos los estados van sobre claro, así que el texto no cambia de
   color: lo que cambia es el borde y el fondo de la caja. */
.pz-chip-q{display:flex;align-items:center;gap:5px;}
.pz-ok{display:inline-flex;}
.pz-ok svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.6;}

/* Copiar lo de la persona de antes: en grupos es lo que quiere casi todo
   el mundo, y sin esto son tres pantallas repetidas por cabeza. */
/* Copiar la persona anterior entera. Va antes que las tarjetas porque
   es el atajo, y quien no lo quiera sigue de largo sin leerlo. */
.pz-todo{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:0 0 18px;
}
.pz-todo-b{
  display:flex;align-items:center;gap:12px;
  padding:12px 18px;text-align:left;
}
.pz-todo-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;flex:0 0 auto;
  background:var(--marca);color:var(--base);
}
.pz-todo-ico svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.4;}
.pz-todo-txt{display:flex;flex-direction:column;gap:2px;min-width:0;}
.pz-todo-t{font-size:14px;font-weight:600;}
.pz-todo-d{font-size:12px;color:var(--text-soft);}
.pz-todo-nota{font-size:12.5px;color:var(--text-soft);flex:1 1 200px;line-height:1.45;}

.pz-copiar{margin:0 0 18px;}
.pz-copiar button{
  font-size:13px;color:var(--marca);text-decoration:underline;
  text-underline-offset:3px;
}

/* Dorado o plateado, encima de las tarjetas: cambia las fotos en vivo. */
.pz-acabado{display:flex;gap:10px;margin-bottom:22px;flex-wrap:wrap;}
.pz-ac{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;font-size:13.5px;}

/* Las tres tarjetas de la pieza. */
/* Cuatro cadenas y tres pendientes: cada pantalla pide su reparto, y
   dejarlo en auto-fit deja huecos raros cuando sobra ancho. */
.pz-rejilla{display:grid;gap:16px;}
/* Dos tarjetas a lo ancho de mil píxeles salen enormes: la de dos
   lleva su propio tope y se queda centrada. */
.pz-rejilla-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:620px;}
.pz-rejilla-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.pz-rejilla-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.pz-carta{
  position:relative;display:flex;flex-direction:column;
  padding:0;overflow:hidden;text-align:left;
}
.pz-foto{
  width:100%;aspect-ratio:1/1;background:var(--wash);
  display:flex;align-items:center;justify-content:center;
}
.pz-foto img{width:100%;height:100%;object-fit:cover;display:block;}
/* Mientras no llegue la foto de una pieza, un hueco con su aviso. Es
   más honesto que una imagen rota y no descuadra la rejilla. */
.pz-sinfoto{
  font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-soft);
}
.pz-txt{display:flex;flex-direction:column;gap:3px;padding:14px 16px 16px;}
.pz-nombre{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-family:var(--font-display);font-size:17px;color:var(--marca);
}
/* El largo, pegado al nombre: es lo primero que se compara entre la
   Fina y la Fina larga, y en el lema se perdería. */
.pz-medida{
  font-family:var(--font-ui);font-size:11.5px;font-weight:600;
  letter-spacing:.04em;color:var(--text-soft);
}
.pz-lema{font-size:12.5px;color:var(--text-soft);line-height:1.4;}
.pz-check{
  position:absolute;top:10px;right:10px;
  width:26px;height:26px;border-radius:50%;
  background:var(--marca);color:var(--base);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.7);transition:opacity .18s,transform .18s;
}
.pz-check svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4;}
.pz-carta.on .pz-check{opacity:1;transform:none;}

/* ============================================================
   LOS CHARMS
   ============================================================ */

/* El marcador: cuántos llevas y en qué huecos. Va pegado arriba porque
   es la única pregunta que se hace quien está mirando veinticuatro
   tarjetas: "¿cuántos me quedan?". */
.ch-marcador{
  border:1px solid var(--line-marca);
  border-radius:var(--radius);
  padding:14px 16px;
  margin:0 0 20px;
  background:var(--wash, #F6EFE7);
}
.ch-cuenta{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.ch-cuenta strong{
  font-family:var(--font-display);font-size:26px;line-height:1;color:var(--marca);
}
.ch-cuenta span{font-size:13px;color:var(--text-soft);}
.ch-vaciar{margin-left:auto;font-size:12.5px;}

/* El resumen, agrupado. Antes eran siete huecos numerados y cuatro
   lunas escribían "Luna" cuatro veces; ahora es una entrada por tipo y
   acabado, que es como se va a leer en el pedido.

   align-items en flex-start a propósito: por defecto los de una misma
   fila se estiran al más alto y basta un nombre largo para que todos
   los demás crezcan con él. */
.ch-grupos{
  list-style:none;margin:12px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;
}
.ch-grupo{
  display:flex;align-items:center;gap:7px;
  min-height:34px;padding:4px 6px 4px 10px;
  border:1px solid var(--line-marca);border-radius:8px;
  background:var(--base);
}
.ch-grupo-n{
  max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:12.5px;color:var(--marca);
}
.ch-grupo-x{font-size:12.5px;font-weight:600;color:var(--marca);}
.ch-nada{margin:10px 0 0;font-size:13px;color:var(--text-soft);}

/* El aviso de que la cadena y los charms no van del mismo metal. No
   bloquea nada: informa y ofrece la vuelta. */
.ch-aviso{
  display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;
  margin:0 0 20px;padding:14px 16px;
  border:1px solid var(--marca);border-radius:var(--radius);
  background:var(--base);
}
.ch-aviso-ico{display:inline-flex;flex:0 0 auto;color:var(--marca);margin-top:2px;}
.ch-aviso-ico svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;}
.ch-aviso-txt{flex:1 1 260px;min-width:0;}
.ch-aviso-txt strong{display:block;font-size:14px;color:var(--marca);margin-bottom:3px;}
.ch-aviso-txt p{margin:0;font-size:13px;line-height:1.5;color:var(--text-soft);}
.ch-aviso-txt b{color:var(--marca);}
.ch-aviso-acc{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}

/* Las dos familias del charm del kit. El encabezado hace falta porque
   nueve tarjetas seguidas de veinticuatro iguales se leen como una sola
   lista de treinta y tres. */
.ck-tit{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin:26px 0 12px;
  font-family:var(--font-display);font-size:17px;color:var(--marca);
}
.ck-tit:first-of-type{margin-top:4px;}
.ck-tit-n{font-family:var(--font-ui);font-size:12px;color:var(--text-soft);}
.ck-rejilla{margin-bottom:4px;}

/* ---------- La salida, con todo ya montado ----------
   Se separa del pie con una línea porque no es un paso más del
   recorrido: es irse. Y no lleva el color de acción de "Continuar",
   que es el que manda mientras quede algo por elegir. */
.pz-salida{
  margin:18px 0 0;
  padding:16px 0 0;
  border-top:1px solid var(--line-marca);
}
.pz-salida-d{
  display:block;
  margin-top:3px;
  font-family:var(--font-ui);
  font-size:12.5px;
  line-height:1.45;
  color:var(--text-soft);
}
.pz-salida-t{
  font-size:15px;
  color:var(--marca);
}
.pz-salida-ico{
  display:inline-flex;flex:0 0 auto;color:var(--marca);
}
.pz-salida-ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;}

/* ---------- La letra ----------
   El desplegable vive dentro de la tarjeta, en el mismo hueco donde
   las demás enseñan su contador. Ocupa el ancho entero porque es el
   único control que tiene esa tarjeta: elegir, cambiar y quitar están
   los tres dentro de él. */
/* Con las dos clases: .ch-paso llega después en el archivo y con una
   sola le ganaría el 'display:flex' en fila. */
.ch-paso.ch-paso-letra{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:6px;
  padding:0 2px;
}
/* El punto del acabado delante de cada letra: son todas las de la
   persona, también las del otro metal. */
.lt-fila{
  display:flex;align-items:center;gap:6px;min-width:0;
}
.lt-fila .lt-sel{
  flex:1 1 auto;
  width:auto;
  min-width:0;
}

/* El grupo del resumen al que le falta la letra. */
.ch-grupo-falta .ch-grupo-n{ color:var(--marca); }

/* ---------- La ficha del charm, a una columna ----------
   El armazón es el de la ficha del kit, que reparte la caja en dos
   columnas: foto a un lado, texto al otro. La del charm no tiene
   columna de foto, así que la mitad derecha salía vacía y la pieza se
   quedaba en 344 px dentro de una ventana de 840. */
.kit-ficha.charm-ficha .kf-caja{
  grid-template-columns:minmax(0, 1fr);
  width:min(560px, 100%);
  max-height:min(680px, calc(100vh - 48px));
}
.kit-ficha.charm-ficha .kf-cuerpo{
  padding:32px 34px 30px;
}

/* ---------- La pieza en grande ----------
   Los dos acabados a la vez: es la comparación que no cabe en una
   tarjeta de 70 px, y la razón de abrir esto. */
.chf-fotos{
  display:flex;gap:14px;margin:0 0 20px;flex-wrap:wrap;
}
.chf-foto{
  flex:1 1 140px;margin:0;min-width:0;
}
/* Cuando va sola —que es siempre, desde que la ficha enseña un solo
   acabado— se lleva el ancho entero hasta un tope razonable y se
   centra. Sin tope, en un portátil salía una foto de 600 px de un
   charm de dos centímetros. */
.chf-foto.chf-sola{
  flex:0 1 100%;
  max-width:440px;
  margin-inline:auto;
}
.chf-foto img{
  width:100%;aspect-ratio:1/1;
  object-fit:contain;padding:10px;
  background:#fff;
  border:1px solid var(--line-soft);
  border-radius:8px;
  display:block;
}
/* El acabado que estabas mirando, marcado: se abre desde una tarjeta
   concreta y conviene no perder de vista cuál era. */
.chf-foto.on img{ border-color:var(--marca); }
.chf-foto figcaption{
  margin-top:7px;
  font-family:var(--font-ui);
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-soft);text-align:center;
}
.chf-foto.on figcaption{ color:var(--marca); }
.chf-sinfoto{
  margin:0 0 20px;padding:22px;
  border:1px dashed var(--line-marca);border-radius:var(--radius);
  font-size:13.5px;color:var(--text-soft);text-align:center;
}

/* ---------- Las perlas de la cadena ----------
   Debajo de la rejilla y con caja propia: no son un charm y no deben
   leerse como una tarjeta más que se quedó fuera de la cuadrícula. */
.pl-caja{
  margin:24px 0 0;
  padding:16px;
  border:1px solid var(--line-marca);
  border-radius:var(--radius);
  background:var(--base);
  display:flex;
  align-items:flex-start;
  gap:16px;
}
/* La única pieza con una sola foto: no hay perla dorada ni plateada. */
.pl-foto{
  flex:0 0 96px;
  width:96px;height:96px;
  border-radius:8px;overflow:hidden;
  background:#fff;
  border:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:center;
}
.pl-foto img{
  width:100%;height:100%;
  object-fit:contain;padding:6px;
  display:block;
}
.pl-txt{flex:1 1 auto;min-width:0;}
.pl-tit{
  margin:0 0 8px;
  font-size:16px;color:var(--marca);
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
}
.pl-tit-n{
  font-family:var(--font-ui);
  font-size:13px;font-weight:400;color:var(--text-soft);
}
.pl-info{
  margin:0 0 14px;
  display:flex;gap:8px;align-items:flex-start;
  font-size:13px;line-height:1.5;color:var(--text-soft);
}
.pl-info svg{
  width:19px;height:19px;flex:0 0 auto;margin-top:2px;
  stroke:currentColor;fill:none;stroke-width:1.7;color:var(--marca);
}
.pl-info strong{color:var(--marca);}
.pl-paso{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.pl-n{
  min-width:24px;text-align:center;font-size:16px;color:var(--marca);
}
.pl-cuenta{
  font-size:13px;color:var(--text-soft);margin-left:4px;
}
.pl-cuenta strong{color:var(--marca);}
.pl-nota{
  margin:10px 0 0;font-size:13px;color:var(--text-soft);
}

/* Una línea del resumen sin foto —las perlas no tienen— con la inicial
   en el hueco, para que la columna no se descuadre. */
.rsinfoto{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
  font-family:var(--font-display);
  font-size:22px;color:var(--marca);
  background:var(--base);
}

/* El marcador de este paso reutiliza .ch-marcador entero, que es lo que
   hace que "0 de 1" y "0 de 7" se lean como la misma cosa. Aquí solo
   van las tres diferencias. */

.ck-marcador .ck-quitar{margin-left:auto;}

/* Dónde va la pieza. Una línea, sin negritas y sin icono: es un dato,
   no un aviso. Parte por los dos puntos, así que en un móvil estrecho
   cae en dos renglones que siguen teniendo sentido cada uno. */
.ck-donde{
  margin:9px 0 0;
  font-size:13px;line-height:1.5;
  color:var(--text-soft);
}

/* Aquí solo cabe uno, así que su nombre no compite por sitio con
   ningún otro: entero, sin recortar a 130 px como en la cadena. */
.ck-marcador .ch-grupo-n{max-width:none;white-space:normal;}
.ck-marcador .ck-ver{margin-left:5px;}

/* Aquí se elige uno solo, así que la tarjeta lleva marca de elegido y
   no contador. Mismo sitio que el contador de los de la cadena, para
   que las dos pantallas se lean igual. */
.ck-marca{
  position:absolute;top:5px;right:5px;
  width:22px;height:22px;border-radius:50%;
  background:var(--marca);color:var(--base);
  display:flex;align-items:center;justify-content:center;
}
.ck-marca svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.4;}

/* La rejilla. Seis por fila: con veinticuatro tarjetas, cuatro columnas
   obligarían a bajar la vista seis veces para compararlas. */
.ch-rejilla{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;
  /* Sin esto, la tarjeta de las letras —que crece un desplegable por
     cada letra puesta— estiraría a las otras cinco de su fila. */
  align-items:start;
}
.ch-carta{position:relative;display:flex;flex-direction:column;gap:5px;}
.ch-foto{
  position:relative;width:100%;aspect-ratio:1/1;
  /* Blanco y con filete: las fotos vienen recortadas sobre fondo casi
     blanco, y sobre crema sin borde el charm flotaba en una mancha. */
  background:#fff;
  border:1px solid var(--line-soft);
  border-radius:8px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
/* 'contain' y no 'cover': las fotos vienen con proporciones muy
   distintas —una chapa alargada mide 192×360 y una espiral 292×256— y
   recortarlas a un cuadrado le cortaba la cabeza al colgante. Con el
   relleno, todas respiran igual dentro de su cuadro. */
.ch-foto img{
  width:100%;height:100%;
  object-fit:contain;
  padding:8px;
  display:block;
}
/* Sin foto, la inicial del charm. Es un hueco reconocible y distinto
   para cada uno, que es más de lo que da un cuadro gris repetido
   veinticuatro veces. */
.ch-sinfoto{
  font-family:var(--font-display);font-size:22px;
  color:var(--line-marca);
}
/* Cuántos llevas de este tipo, con su − y su +. La tarjeta entera sigue
   sumando al pulsarla; esto es para llegar a cuatro sin dudar de si has
   pulsado cuatro veces. */
.ch-paso{
  display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:26px;
}
/* A cero se esconde pero deja el hueco: si desapareciera, las tarjetas
   de una misma fila cambiarían de alto según lo elegido. */
.ch-paso.vacia{visibility:hidden;}
.ch-paso-n{
  min-width:14px;text-align:center;
  font-size:13px;font-weight:600;color:var(--marca);
}
/* Hasta dos líneas, con el sitio reservado. En una sola línea,
   "Estrella de mar" y "Mano de Fátima" se cortaban; dejándolas crecer
   sin reservar, sus filas quedaban quince píxeles más altas que las de
   al lado. Y sin fotos todavía, el nombre es lo único que identifica
   cada charm: cortarlo sale caro. */
.ch-nombre{
  font-size:12px;line-height:1.3;text-align:center;width:100%;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.6em;
  /* A 1024 px la tarjeta se estrecha y «redonda» no cabía entera en su
     línea: se cortaba por la derecha. Que parta la palabra con guion. */
  hyphens:auto;overflow-wrap:anywhere;
}
.ch-estado{
  font-size:10.5px;line-height:1.3;text-align:center;color:var(--text-soft);
  min-height:13px;
}
.ch-menos,
.ch-mas-uno{
  width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;line-height:1;
}
.ch-tope{
  margin:16px 0 0;font-size:13px;color:var(--text-soft);
}

/* Las dos piezas de cada línea, en el resumen. */
.rpiezas{display:flex;flex-direction:column;gap:2px;margin-top:5px;}
.rpiezas span{font-size:12.5px;color:var(--text-soft);}

@media (max-width:1020px){
  .pz-rejilla-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ch-rejilla{grid-template-columns:repeat(5,minmax(0,1fr));}
}
@media (max-width:860px){
  .pz-rejilla-3,
  .pz-rejilla-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .ch-rejilla{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media (max-width:560px){
  .pz-hilo{gap:12px;}
  .pz-quien{font-size:17px;width:100%;}
  /* Con seis pasos no caben los seis rótulos ni en tres filas sin
     comerse media pantalla. Se quedan los números, y el rótulo solo del
     paso que estás haciendo: sigue diciendo dónde estás y cuántos
     quedan, que es para lo que sirve el raíl. */
  .pz-pasos{width:100%;flex-wrap:nowrap;justify-content:flex-start;gap:4px;}
  .pz-paso{min-width:0;}
  /* Los rótulos se ocultan en brand.css: la caja de estos botones vive
     allí, con un id delante, y desde aquí no hay peso para ganarle. */
  /* A una columna no: las tarjetas se comparan de un vistazo y eso es
     justo lo que se está haciendo aquí. Dos por fila y el resto debajo. */
  .pz-rejilla-3,
  .pz-rejilla-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .pz-nombre{font-size:15px;gap:6px;}
  .pz-medida{font-size:10.5px;}
  .pz-txt{padding:11px 12px 13px;}
  .pz-nombre{font-size:15px;}
  .pz-lema{font-size:11.5px;}
  /* Tres por fila y no dos: los charms son piezas pequeñas y lo que se
     compara es la silueta, no el detalle. */
  .ch-rejilla{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;}
  .ch-marcador{padding:12px 13px;}
  .ch-cuenta strong{font-size:22px;}
  .ck-tit{font-size:15px;margin:20px 0 9px;}
  .ck-tit-n{font-size:11px;}
  .ch-grupo{min-height:38px;padding:3px 5px 3px 8px;gap:5px;}
  .ch-grupo-n{max-width:88px;font-size:12px;}
  .ck-donde{font-size:12.5px;margin-top:8px;}
  .ck-marcador .ch-grupo-n{font-size:12.5px;}
  /* Al ritmo de sus botones, que en móvil son de 30: si el hueco fuera
     más bajo, las tarjetas con contador harían su fila más alta que la
     de al lado. */
  .ch-paso{gap:8px;min-height:30px;}
  /* Lado a lado en 280 px, el párrafo se queda en palabras sueltas. */
  .pl-caja{flex-direction:column;gap:12px;}
  .pl-foto{flex:0 0 auto;width:100%;height:150px;}
  /* El icono se queda junto al texto: con la base de 260 se iba solo a
     una línea y parecía un punto suelto encima del aviso. */
  .ch-aviso{padding:12px 13px;gap:10px;}
  .ch-aviso-txt{flex:1 1 150px;}
  .ch-aviso-acc{flex:1 1 100%;}
  .ch-nombre{font-size:11px;}
  .pz-todo{gap:9px;}
  .pz-todo-b{width:100%;}
  .pz-todo-nota{flex:1 1 100%;font-size:12px;}
  .pz-chip{padding:6px 11px 6px 6px;font-size:12.5px;}
  .pz-chip-foto{width:32px;height:32px;}
}

/* ============================================================
   6. Paso 3 — alicates
   ============================================================ */
.tools-block{display:grid;grid-template-columns:272px minmax(0,1fr);gap:44px;align-items:start;}
.tools-art{
  border:1px solid var(--line-marca);border-radius:var(--radius);background:var(--wash);
  padding:26px 22px;
}
/* La foto trae el mismo fondo que la ficha (#FFF8F3, el valor calculado
   de --wash), así que no se ve como un recuadro pegado encima: no le
   hace falta ni borde ni esquinas redondeadas. */
.tools-art img{width:100%;height:auto;display:block;}
.tools-art figcaption{
  margin-top:16px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-soft);text-align:center;
}

.tools-answers{display:flex;gap:10px;flex-wrap:wrap;}
.tools-answer{padding:15px 24px;font-size:13.5px;text-align:left;line-height:1.35;}
.tools-answer b{display:block;font-weight:600;}
.tools-answer i{display:block;font-style:normal;font-size:12px;color:var(--text-soft);margin-top:3px;}
.tools-answer.on i{color:color-mix(in srgb, var(--base) 75%, transparent);}

/* El contador y su nota cuelgan del botón "Sí": 20 px por encima del
   grupo, 12 dentro. Se agrupa por cercanía y no por marcos, que de
   marcos ya van servidos la ficha de la foto y los dos botones. Antes
   el contador quedaba a 26 px de los botones —casi los 34 que separan
   bloques sin relación— y parecía un aparato suelto en mitad del paso. */
.tools-cantidad{margin-top:20px;}
.tools-cantidad .rec-line{margin-top:12px;}

/* Mientras no han contestado no hay contador, solo la nota que explica
   de dónde sale la recomendación. Va donde iría el grupo. */
.tools-nota{margin-top:20px;}

.stepper-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.stepper{
  display:inline-flex;align-items:center;border:1px solid var(--line-marca-strong);
  border-radius:var(--radius);overflow:hidden;background:var(--base);
}
.stepper button{
  width:46px;height:46px;font-size:19px;color:var(--marca);
  display:flex;align-items:center;justify-content:center;transition:background .18s,color .18s;
}
.stepper button:hover:not(:disabled){background:var(--marca);color:var(--base);}
.stepper button:disabled{color:var(--line-marca-strong);cursor:default;}
.stepper .val{
  min-width:58px;text-align:center;font-family:var(--font-display);font-size:19px;color:var(--marca);
  border-left:1px solid var(--line-marca-strong);border-right:1px solid var(--line-marca-strong);
  align-self:stretch;display:flex;align-items:center;justify-content:center;
}
.stepper-price{font-size:14px;color:var(--text-soft);}
.stepper-price strong{color:var(--marca);font-weight:600;}

.rec-line{
  /* El hueco lo pone quien la coloca: dentro del grupo de la cantidad
     son 12 px y suelta son 20. */
  font-size:13px;color:var(--acento-ink);
  display:flex;align-items:baseline;gap:9px;
}
.rec-line svg{width:13px;height:13px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transform:translateY(2px);}

/* ============================================================
   7. Paso 4 — resumen
   ============================================================ */
.review-lines{border-top:1px solid var(--line-marca);}
.rline{
  display:flex;align-items:center;gap:20px;padding:18px 0;
  border-bottom:1px solid var(--line-marca);
}
.rline .rthumb{
  flex:0 0 62px;width:62px;aspect-ratio:4/5;overflow:hidden;background:var(--wash);
  border:1px solid var(--line-marca);border-radius:var(--radius);
}
.rline .rthumb img{width:100%;height:100%;object-fit:cover;}
.rline .rbody{flex:1 1 auto;min-width:0;}
.rline .rwho{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--text-soft);}
.rline .rname{display:block;margin-top:4px;font-family:var(--font-display);font-size:17px;color:var(--marca);}
.rline .rmeta{display:block;margin-top:4px;font-size:13px;color:var(--text-soft);}
.rline .rprice{flex:0 0 auto;font-size:15px;color:var(--marca);font-weight:600;}

.totals{margin-top:26px;}
.trow{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;font-size:14.5px;color:var(--text-soft);}
.trow strong{color:var(--marca);font-weight:600;}
.trow.free strong{color:var(--ok);}
.trow.grand{
  margin-top:12px;padding-top:18px;border-top:1px solid var(--line-marca-strong);
}
.trow.grand span{font-family:var(--font-display);font-size:19px;color:var(--marca);}
.trow.grand strong{font-family:var(--font-display);font-size:29px;font-weight:500;}

.reserve{
  margin-top:44px;padding:36px 38px;border:1px solid var(--line-marca-strong);
  border-radius:var(--radius);background:var(--wash);
}
.reserve h3{font-family:var(--font-display);font-size:22px;color:var(--marca);font-weight:500;}
.reserve .r-intro{
  margin-top:12px;font-family:var(--font-display);font-style:italic;font-size:16px;
  color:var(--secundario);line-height:1.55;max-width:52ch;
}
.reserve p.r-body{margin-top:14px;font-size:14.5px;line-height:1.65;color:var(--text-soft);max-width:56ch;}
.r-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px;}
.f{display:flex;flex-direction:column;gap:7px;}
.f label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--text-soft);}
.f input{
  padding:13px 0;border:none;border-bottom:1px solid var(--line-marca-strong);background:none;
  font-family:var(--font-sans);font-size:15px;color:var(--marca);border-radius:0;
}
.f input::placeholder{color:color-mix(in srgb, var(--marca) 38%, transparent);}
.f input:focus{outline:none;border-color:var(--marca);}
.f.bad input{border-color:var(--err);}
.f .err{font-size:12.5px;color:var(--err);min-height:16px;}
.r-fine{
  margin-top:24px;font-size:12px;color:var(--text-soft);
  display:flex;gap:20px;flex-wrap:wrap;
}
.r-fine span{display:inline-flex;align-items:center;gap:7px;}
.r-fine svg{width:12px;height:12px;stroke:var(--ok);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.reserve .btn{margin-top:26px;width:100%;justify-content:center;}
.reserve .btn[disabled]{opacity:.5;}
.r-legal{margin-top:16px;font-size:11.5px;line-height:1.6;color:var(--text-soft);opacity:.85;}

/* Confirmación */
.done-card{padding:44px 40px;border:1px solid var(--line-marca-strong);border-radius:var(--radius);background:var(--wash);text-align:center;}
.done-card .mark{
  width:56px;height:56px;margin:0 auto 22px;border-radius:50%;background:var(--marca);
  display:flex;align-items:center;justify-content:center;
}
.done-card .mark svg{width:24px;height:24px;stroke:var(--base);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.done-card h3{font-family:var(--font-display);font-size:26px;color:var(--marca);font-weight:500;}
.done-card p{margin-top:14px;font-size:15px;color:var(--text-soft);max-width:46ch;margin-left:auto;margin-right:auto;}
.done-card .btn{margin-top:28px;}

/* ============================================================
   8. Raíl del pedido
   ============================================================ */
.order-rail{
  position:sticky;top:104px;
  border:1px solid var(--line-marca-strong);border-radius:var(--radius);
  background:var(--base);padding:30px 28px;
}
.order-rail h2{font-family:var(--font-display);font-size:19px;font-weight:500;color:var(--marca);}
.order-rail .rail-sub{margin-top:6px;font-size:12.5px;color:var(--text-soft);}

.rail-empty{
  margin-top:24px;padding:34px 18px;text-align:center;
  border:1px dashed var(--line-marca-strong);border-radius:var(--radius);
}
.rail-empty p{font-size:13.5px;line-height:1.6;color:var(--text-soft);}

.rail-lines{margin-top:22px;border-top:1px solid var(--line-marca);}
.rail-line{
  display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line-marca);
}
.rail-line .rl-thumb{
  flex:0 0 40px;width:40px;aspect-ratio:1/1;overflow:hidden;border-radius:var(--radius);
  background:var(--wash);border:1px solid var(--line-marca);
}
.rail-line .rl-thumb img{width:100%;height:100%;object-fit:cover;}
.rail-line .rl-thumb.icon{display:flex;align-items:center;justify-content:center;}
.rail-line .rl-thumb.icon svg{width:20px;height:20px;color:var(--secundario);}
.rail-line .rl-body{flex:1 1 auto;min-width:0;}
.rail-line .rl-name{font-size:13.5px;color:var(--marca);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rail-line .rl-meta{display:block;margin-top:2px;font-size:11.5px;color:var(--text-soft);}
.rail-line .rl-price{flex:0 0 auto;font-size:13px;color:var(--text-soft);}
.rail-line.flash{animation:railFlash 1.1s cubic-bezier(.16,1,.3,1);}
@keyframes railFlash{
  0%{background:color-mix(in srgb, var(--acento) 26%, transparent);}
  100%{background:transparent;}
}

.rail-total{margin-top:20px;padding-top:18px;border-top:1px solid var(--line-marca-strong);}
.rail-total .trow.grand{margin-top:0;padding-top:0;border-top:none;}
.rail-total .trow.grand strong{font-size:26px;}
.rail-note{margin-top:18px;font-size:11.5px;line-height:1.6;color:var(--text-soft);}

/* Barra inferior en móvil */
.rail-bar{display:none;}

/* ============================================================
   9. Modo guiado (elegir kits navegando por la web)
   ============================================================ */
.guide{
  position:fixed;left:0;right:0;bottom:0;z-index:400;
  background:var(--marca);color:var(--base);
  transform:translateY(110%);transition:transform .45s cubic-bezier(.16,1,.3,1);
  box-shadow:0 -14px 40px -18px rgba(62,0,13,.55);
}
/* ============================================================
   Distintivo de entorno de pruebas (CONFIG.preview en shop.js)
   ============================================================ */
.preview-flag{
  position:fixed;left:14px;bottom:14px;z-index:1000;
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px 7px 12px;border-radius:999px;
  background:var(--marca);color:var(--base);
  font-family:var(--font-sans);font-size:10.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  opacity:.34;transition:opacity .25s ease;pointer-events:auto;
  box-shadow:0 8px 22px -12px rgba(62,0,13,.6);
}
.preview-flag:hover{opacity:1;}
.preview-flag .pf-dot{
  width:6px;height:6px;border-radius:50%;background:var(--acento);flex:0 0 auto;
}
body.has-guide .preview-flag{bottom:112px;}
/* En móvil el configurador tiene su barra de total abajo: el distintivo sube. */
@media (max-width:980px){
  body:has(.rail-bar) .preview-flag{bottom:82px;}
}
@media (prefers-reduced-motion: reduce){
  .preview-flag{transition:none;}
}

/* El aviso corto lo crea shop.js en cualquier página; la home lleva su CSS
   en línea y no carga style.css, así que el proceso de compra trae el suyo. */
.toast{
  position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(12px);
  background:var(--marca);color:var(--base);padding:14px 24px;border-radius:999px;
  font-size:13.5px;letter-spacing:.02em;opacity:0;pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;z-index:500;
  box-shadow:0 12px 30px -10px rgba(62,0,13,.35);max-width:min(90vw,460px);text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
body.has-guide .toast{bottom:104px;}

.guide.show{transform:translateY(0);}
body.has-guide{padding-bottom:96px;}
@media (max-width:640px){ body.has-guide{padding-bottom:172px;} }
.guide-in{
  max-width:1220px;margin:0 auto;padding:16px 40px;
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
}
.guide-text{flex:1 1 240px;min-width:0;}
.guide-text b{display:block;font-family:var(--font-display);font-size:16px;font-weight:500;}
.guide-text span{display:block;margin-top:3px;font-size:12.5px;color:var(--base-soft);}
.guide-thumbs{display:flex;gap:6px;}
.guide-thumbs .gt{
  width:34px;aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;
  border:1px solid color-mix(in srgb, var(--base) 30%, transparent);background:var(--secundario);
}
.guide-thumbs .gt img{width:100%;height:100%;object-fit:cover;}
.guide-thumbs .gt.pending{border-style:dashed;}
.guide-acts{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.guide-acts .btn{border-color:var(--base);color:var(--base);}
.guide-acts .btn:hover{background:var(--base);color:var(--marca);}
.guide-link{
  font-size:12px;color:color-mix(in srgb, var(--base) 70%, transparent);
  text-decoration:underline;text-underline-offset:3px;white-space:nowrap;
}
.guide-link:hover{color:var(--base);}

/* ============================================================
   10. Adaptación
   ============================================================ */
@media (max-width:1180px){
  .shop-layout{grid-template-columns:minmax(0,1fr) 320px;gap:48px;}
  .kit-pick{grid-template-columns:repeat(3,1fr);}
}

@media (max-width:980px){
  .shop-head-in{padding:14px 22px;}
  .shop-progress{display:none;}
  .shop-progress-mobile{
    display:flex;align-items:center;gap:12px;flex:1 1 auto;min-width:0;
  }
  .shop-progress-mobile .pm-track{flex:1 1 auto;height:2px;background:var(--line-marca);position:relative;}
  .shop-progress-mobile .pm-fill{position:absolute;inset:0;background:var(--marca);transform-origin:left;transition:transform .5s cubic-bezier(.16,1,.3,1);}
  .shop-progress-mobile .pm-label{
    font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
    color:var(--marca);white-space:nowrap;
  }

  .shop-layout{grid-template-columns:1fr;gap:0;padding:36px 22px 130px;}
  .shop-intro h1{font-size:29px;}
  .step-body-pad{padding-left:0;padding-bottom:36px;}
  .step-head{gap:16px;padding:26px 0;}
  .bstep.is-active .step-title{font-size:23px;}
  .step-title{font-size:20px;}

  .order-rail{position:static;margin-top:40px;}

  /* Barra de pedido fija en móvil */
  .rail-bar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:300;
    align-items:center;justify-content:space-between;gap:16px;
    padding:14px 22px;background:var(--base);border-top:1px solid var(--line-marca-strong);
    box-shadow:0 -10px 30px -20px rgba(62,0,13,.5);
  }
  .rail-bar .rb-total{display:flex;flex-direction:column;gap:2px;}
  .rail-bar .rb-label{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-soft);font-weight:600;}
  .rail-bar .rb-val{font-family:var(--font-display);font-size:22px;color:var(--marca);}
  .rail-bar .btn{flex:0 0 auto;}

  .tools-block{grid-template-columns:1fr;gap:28px;}
  .tools-art{max-width:250px;}
  .r-fields{grid-template-columns:1fr;}
  .reserve{padding:28px 24px;}
  .guide-in{padding:14px 22px;gap:16px;}
  .guide-thumbs{order:3;}
}

@media (max-width:640px){
  .kit-pick{grid-template-columns:repeat(2,1fr);gap:22px 16px;}
  .people-opt{width:calc(33.333% - 7px);}
  .people-opt.people-more{width:100%;}
  .seg{width:100%;}
  .seg button{flex:1 1 0;padding:13px 10px;font-size:11px;}
  .step-foot .btn{width:100%;}
  .rline{gap:14px;}
  .rline .rthumb{flex-basis:52px;width:52px;}
  .done-card{padding:34px 22px;}
  .guide-text{flex-basis:100%;}
}

@media (prefers-reduced-motion: reduce){
  .step-body{transition:none;}
  .pick .frame img,.rail-line.flash,.people-more-row{transition:none;animation:none;}
  .shop-progress-bar::after,.guide{transition:none;}
}