/* ════════════════════════════════════════════════════════
   CONFIGURADOR DE PRODUCTO — COATI
   Usa las variables de color/tipografía de styles.css
   ════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════
   TIRA DE COMBOS — entre el título de la página y el recuadro
   Desfila sola de derecha a izquierda. La lista está duplicada en
   el HTML: cuando la primera copia termina de pasar, la animación
   vuelve a cero y la segunda ya está en ese lugar, así no se ve
   el salto.
   ════════════════════════════════════════════════════════ */
.combos-tira {
  padding: 2.2rem 0 1.4rem;
  background: var(--crema);
  overflow: hidden;
}

.combos-tira__intro,
.combos-tira__pie {
  text-align: center;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris-topo);
  margin: 0 1rem;
}
.combos-tira__intro { margin-bottom: 1.1rem; }
.combos-tira__pie   { margin-top: 1rem; font-size: .78rem; opacity: .8; }

/* El marco recorta la cinta y desvanece los bordes, así las fotos
   entran y salen en lugar de aparecer cortadas de golpe */
.combos-tira__marco {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

/* Sin `gap`: la separación va como margen de cada foto. Así el ancho
   total es exactamente 14 × (foto + margen) y el -50% cae justo en el
   inicio de la segunda copia. Con gap sobraría media separación y el
   bucle daría un saltito en cada vuelta. */
.combos-tira__cinta {
  display: flex;
  width: max-content;
  padding: .3rem 0;
  animation: combos-desfile 55s linear infinite;
}
/* Al pasar el mouse (o al enfocar con el teclado) se frena, para poder mirar */
.combos-tira__marco:hover .combos-tira__cinta,
.combos-tira__cinta:focus-within { animation-play-state: paused; }

@keyframes combos-desfile {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.combo-mini {
  flex: 0 0 auto;
  width: 150px;
  margin-right: 1.1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  transition: transform var(--trans);
}
.combo-mini:hover,
.combo-mini:focus-visible { transform: translateY(-4px); }

.combo-mini img {
  width: 150px;
  height: 150px;
  object-fit: contain;
  display: block;
  background: var(--blanco);
  border: 1px solid rgba(178,168,156,.3);
  border-radius: var(--radio);
  padding: .4rem;
}
.combo-mini:hover img,
.combo-mini:focus-visible img { border-color: var(--coral); }

.combo-mini__pie {
  font-size: .74rem;
  line-height: 1.35;
  text-align: center;
  color: var(--gris-topo);
}

@media (min-width: 720px) {
  .combos-tira { padding: 2.8rem 0 1.8rem; }
  .combo-mini,
  .combo-mini img { width: 180px; }
  .combo-mini img { height: 180px; }
}

/* Si la persona pidió menos movimiento en su sistema, la tira queda
   quieta y se recorre a mano */
@media (prefers-reduced-motion: reduce) {
  .combos-tira__cinta { animation: none; }
  .combos-tira__marco { overflow-x: auto; }
}

/* Las tarjetas del algodón orgánico pasaron de 4 a 3 (comercio justo se
   integró a la de agricultores). Con la grilla de 2 columnas de
   styles.css quedaban dos arriba y una suelta abajo, así que van en
   una sola fila de 3 o en una sola columna: nunca huérfanas. */
.productos-info-grid {
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 860px) {
  .productos-info-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Bloque de valores (arriba de la página de productos) ── */

/* La marca de agua con el logo COATI se repite por toda la página y le
   quitaba lectura al texto del recuadro. Se la baja un poco en general
   y, además, el recuadro lleva fondo propio para que el texto se apoye
   sobre una superficie limpia. */
.pagina-productos::before { opacity: .04; }

/* Menos aire arriba y abajo del recuadro */
.productos-tagline { padding-block: 1.8rem; }

/* Recuadro más ancho, con el borde más marcado y con fondo propio */
.productos-tagline__box {
  max-width: 1000px;
  border-width: 2.5px;
  border-color: rgba(46,72,71,.35);
  padding: 1.7rem 2rem;
  background: rgba(250,250,248,.82);
}

.productos-valores {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.productos-valores__desc {
  font-family: var(--font-titulo);
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  font-weight: 500;
  color: var(--verde-oscuro);
  line-height: 1.55;
  margin-bottom: 1.2rem;
}
.productos-valores__lista {
  display: grid;
  grid-template-columns: 1fr;
  gap: .6rem;
  text-align: left;
  max-width: 620px;
  margin: 0 auto;
}
.productos-valores__lista li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .9rem;
  color: var(--gris-topo);
  line-height: 1.55;
}
@media (min-width: 620px) {
  .productos-valores__lista { grid-template-columns: 1fr 1fr; gap: .75rem 1.5rem; }
}

/* El atributo hidden tiene que ganarle a display:flex/grid */
.config-cierre[hidden],
.config-opciones[hidden],
button[hidden] { display: none !important; }

.config-card {
  background: var(--blanco);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra);
  padding: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

/* ── Las 3 columnas ── */
.config-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

.config-col__titulo {
  font-family: var(--font-titulo);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris-topo);
  margin-bottom: .9rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid rgba(178,168,156,.28);
}

/* ── Opciones (prendas y diseños) ── */
.config-productos,
.config-opciones {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.config-opcion {
  display: flex;
  align-items: center;
  gap: .8rem;
  width: 100%;
  text-align: left;
  font-family: var(--font-cuerpo);
  background: var(--crema);
  border: 2px solid transparent;
  border-radius: var(--radio);
  padding: .6rem .8rem;
  cursor: pointer;
  transition: border-color var(--trans), transform var(--trans), box-shadow var(--trans);
}
.config-opcion:hover,
.config-opcion:focus-visible {
  border-color: var(--coral);
  transform: translateY(-2px);
  box-shadow: var(--sombra);
}
.config-opcion--activa {
  border-color: var(--verde-petroleo);
  background: var(--verde-petroleo);
}
.config-opcion--activa .config-opcion__label { color: var(--crema); }
.config-opcion--activa .config-opcion__desc  { color: rgba(231,223,200,.75); }

/* ── Pasos cortos: las opciones van en fila, como cuadraditos ──
   (Estampa / Tinte, ¿qué manga?, qué pack…). La foto ocupa todo
   el ancho de la tarjeta y el texto va debajo, centrado. */
.config-opciones--tarjetas {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: .7rem;
}
.config-opciones--tarjetas .config-opcion {
  flex: 1 1 0;
  min-width: 118px;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  gap: .55rem;
  padding: .7rem;
}
.config-opciones--tarjetas .config-opcion__foto {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
}
.config-opciones--tarjetas .config-opcion__texto {
  align-items: center;
  flex: 1;
}

/* Miniatura: si todavía no hay foto queda un recuadro neutro */
.config-opcion__foto {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 9px;
  overflow: hidden;
  background: rgba(178,168,156,.3);
  display: block;
}
.config-opcion__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Cuando lo que se muestra es el dibujo del sello (no una prenda):
   fondo claro y el dibujo entero adentro, sin recortar. */
.config-opcion__foto--motivo {
  background: var(--blanco, #FAFAF8);
}
.config-opcion__foto--motivo img {
  object-fit: contain;
  padding: 3px;
}

.config-opcion__texto {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}
.config-opcion__label {
  font-size: .97rem;
  font-weight: 500;
  color: var(--verde-oscuro);
}
.config-opcion__desc {
  font-size: .8rem;
  color: var(--gris-topo);
  line-height: 1.45;
}

/* ── Centro: la foto de lo que se va armando ── */
.config-centro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.config-preview__foto {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radio-lg);
  overflow: hidden;
  background: rgba(178,168,156,.22);
  border: 1px solid rgba(178,168,156,.3);
}
.config-preview__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.config-preview { width: 100%; }

/* ════════════════════════════════════════════════════════
   PACK POR RANURAS
   ════════════════════════════════════════════════════════ */

.config-ranuras__titulo { margin-top: 1.5rem; }

.config-ranuras {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.config-ranura {
  position: relative;
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  text-align: left;
  font-family: var(--font-cuerpo);
  background: transparent;
  border: 2px dashed rgba(178,168,156,.65);
  border-radius: var(--radio);
  padding: .5rem .7rem;
  cursor: pointer;
  transition: border-color var(--trans), background var(--trans);
}
.config-ranura--activa { border-color: var(--coral); }
.config-ranura--llena {
  border-style: solid;
  border-color: var(--verde-petroleo);
  background: var(--crema);
}
.config-ranura:hover { border-color: var(--coral); }

.config-ranura__foto {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(178,168,156,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-titulo);
  font-size: .95rem;
  color: var(--gris-topo);
}
.config-ranura__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.config-ranura__texto {
  font-size: .88rem;
  color: var(--verde-oscuro);
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}
.config-ranura:not(.config-ranura--llena) .config-ranura__texto { color: var(--gris-topo); }

.config-ranura__quitar {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  color: var(--gris-topo);
}
.config-ranura__quitar:hover { background: var(--coral); color: var(--blanco); }

/* ── El conjunto armándose en el centro ── */
.config-conjunto { position: relative; }

.config-conjunto__lugar {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radio);
  overflow: hidden;
}
.config-conjunto__lugar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Lugares fijos, copiados de las fotos de combo:
   el body arriba a la izquierda, el pantalón montado POR DELANTE sobre
   su borde inferior izquierdo —para que se lea como un conjunto y no
   como dos prendas sueltas— y el babero al costado derecho.

   Los recuadros son CUADRADOS a propósito: las fotos son cuadradas de
   800x800 con la prenda centrada, así que un recuadro cuadrado respeta
   el encuadre original y las prendas guardan su proporción entre sí.

   Ojo: cada PNG trae aire alrededor de la prenda, así que las cajas
   tienen que solaparse bastante para que las prendas se toquen. */
.config-conjunto__lugar--1 { left: -2%; top: -1%; width: 65%; height: 65%; z-index: 1; }
.config-conjunto__lugar--2 { left: 5%;  top: 34%; width: 74%; height: 74%; z-index: 2; }
.config-conjunto__lugar--3 { left: 56%; top: 15%; width: 45%; height: 45%; z-index: 3; }

/* La foto del body manga larga es "ancha": el brazo estirado al costado
   ocupa media foto, así que el cuerpo entra chico y corrido a la
   izquierda, y al lado del pantalón parece de otro talle. Se lo agranda
   bastante más que al resto para emparejarlo.
   Que la manga se monte sobre el babero no molesta. */
.config-conjunto__lugar--ancha img { transform: translateX(9%) scale(1.22); }

/* El short es bajo y ancho: entra a lo ancho y queda flotando en el medio
   de su caja, lejos del body. Se lo sube y se lo agranda para que la
   cintura toque el borde del body, igual que hace la ranita. */
.config-conjunto__lugar--corto img { transform: translateY(-14%) scale(1.1); }

/* Tres baberos: son tres piezas del mismo tamaño, así que no valen los
   lugares del combo (que suponen body grande arriba y babero chico al
   costado). Van en escalera, apenas superpuestos. */
.config-conjunto--baberos .config-conjunto__lugar--1 { left: 4%;  top: 2%;  width: 52%; height: 46%; }
.config-conjunto--baberos .config-conjunto__lugar--2 { left: 30%; top: 27%; width: 52%; height: 46%; }
.config-conjunto--baberos .config-conjunto__lugar--3 { left: 8%;  top: 52%; width: 52%; height: 46%; }

.config-conjunto__lugar--vacio {
  border: 2px dashed rgba(178,168,156,.7);
  background: rgba(255,255,255,.35);
}

/* Los lugares de las prendas se salen del cuadro a propósito (las fotos
   traen margen transparente y así la prenda queda grande). El recuadro
   punteado no tiene ese margen, así que se recorta feo: cuando está
   vacío se lo mete entero adentro. */
.config-conjunto__lugar--1.config-conjunto__lugar--vacio { left: 9%;  top: 10%; width: 45%; height: 44%; }
.config-conjunto__lugar--2.config-conjunto__lugar--vacio { left: 22%; top: 40%; width: 45%; height: 50%; }
.config-conjunto__lugar--3.config-conjunto__lugar--vacio { left: 60%; top: 24%; width: 31%; height: 22%; }
.config-conjunto__lugar--proximo {
  border-color: var(--coral);
  background: rgba(232,112,121,.07);
}

.config-conjunto__num {
  font-family: var(--font-titulo);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(178,168,156,.95);
  text-align: center;
  padding: 0 .3rem;
}

/* ── Elegir entre una prenda o un pack ── */
.config-modo {
  display: flex;
  gap: .4rem;
  margin-bottom: 1rem;
  background: rgba(178,168,156,.18);
  border-radius: 50px;
  padding: .25rem;
}

.config-modo__btn {
  flex: 1;
  font-family: var(--font-titulo);
  font-size: .82rem;
  font-weight: 500;
  color: var(--gris-topo);
  background: transparent;
  border: none;
  border-radius: 50px;
  padding: .5rem .4rem;
  cursor: pointer;
  transition: background var(--trans), color var(--trans);
}
.config-modo__btn--activo {
  background: var(--verde-petroleo);
  color: var(--crema);
}

/* ── Galería "así queda": fotos reales de la estampa ── */
.config-galeria[hidden] { display: none !important; }

.config-galeria {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding-top: .9rem;
  border-top: 1px solid rgba(178,168,156,.28);
}

.config-galeria__titulo {
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris-topo);
  text-align: center;
}

.config-galeria__fila {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .55rem;
}

.config-galeria__foto {
  width: 74px;
  height: 74px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(178,168,156,.25);
  cursor: pointer;
  transition: border-color var(--trans), transform var(--trans);
}
.config-galeria__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.config-galeria__foto:hover,
.config-galeria__foto:focus-visible { border-color: var(--coral); transform: translateY(-2px); }
.config-galeria__foto--activa { border-color: var(--verde-petroleo); }

/* ── Prenda lisa + estampa superpuesta ──
   La estampa se recorta a la silueta de la prenda (mask) y se mezcla
   en multiply, para que se vean los pliegues y sombras de la tela. */
.config-compuesta { position: relative; }

.config-compuesta__estampa {
  position: absolute;
  inset: 0;
  background-repeat: repeat;
  background-size: 38%;
  mix-blend-mode: multiply;
  opacity: .95;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
}

.config-compuesta__nota {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: .4rem .6rem;
  font-size: .66rem;
  text-align: center;
  color: var(--crema);
  background: rgba(49,56,49,.72);
  pointer-events: none;
}

/* La foto entra con una transición suave al cambiar */
@keyframes configAparece {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: scale(1); }
}
.config-preview__foto--entra { animation: configAparece .28s ease both; }

@media (prefers-reduced-motion: reduce) {
  .config-preview__foto--entra { animation: none; }
}

/* ── Barra fija con lo elegido (celular) ── */
.config-barra[hidden] { display: none !important; }

.config-barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px));
  background: var(--verde-oscuro);
  box-shadow: 0 -4px 20px rgba(49,56,49,.25);
}

.config-barra__texto {
  flex: 1;
  min-width: 0;
  font-family: var(--font-cuerpo);
  font-size: .82rem;
  line-height: 1.35;
  color: var(--crema);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.config-barra__btn {
  flex-shrink: 0;
  font-family: var(--font-titulo);
  font-size: .82rem;
  font-weight: 500;
  color: var(--verde-oscuro);
  background: var(--crema);
  border: none;
  border-radius: 50px;
  padding: .55rem 1.1rem;
  cursor: pointer;
}
.config-barra__btn:disabled {
  opacity: .5;
  cursor: default;
}

/* En escritorio no hace falta: se ve todo de una */
@media (min-width: 900px) {
  .config-barra { display: none !important; }
}
/* Para que la barra no tape el final de la página */
@media (max-width: 899px) {
  .pagina-productos .footer { padding-bottom: 5rem; }
}

.config-detalle {
  font-family: var(--font-titulo);
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  font-weight: 500;
  color: var(--verde-petroleo);
  text-align: center;
  line-height: 1.5;
}
.config-detalle--vacio {
  color: var(--gris-topo);
  font-style: italic;
  font-weight: 400;
}

/* ── Columna derecha: pasos ── */
.config-pasos {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.config-elegido {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  text-align: left;
  width: 100%;
  background: transparent;
  border: 1px solid rgba(178,168,156,.4);
  border-radius: var(--radio);
  padding: .5rem .75rem;
  cursor: pointer;
  font-family: var(--font-cuerpo);
  transition: border-color var(--trans), background var(--trans);
}
.config-elegido:hover,
.config-elegido:focus-visible {
  border-color: var(--coral);
  background: var(--crema);
}
.config-elegido__pregunta {
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gris-topo);
}
.config-elegido__valor {
  font-size: .95rem;
  font-weight: 500;
  color: var(--verde-oscuro);
}

.config-paso { margin-top: .5rem; }

.config-paso__contador {
  display: block;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris-topo);
  margin-bottom: .2rem;
}

.config-pregunta {
  font-family: var(--font-titulo);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--verde-oscuro);
}

/* Subtítulo de familia dentro de la lista de estampas */
.config-grupo {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris-topo);
  margin: .9rem 0 .45rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid rgba(178,168,156,.25);
}
.config-grupo:first-of-type { margin-top: .5rem; }

/* ── Visor tipo rueda ──
   Muestra unas pocas opciones; el resto aparece al deslizar.
   Los bordes se van difuminando para que se vea que la lista sigue. */
.config-rueda {
  position: relative;
  margin-top: .3rem;
}

.config-rueda__visor {
  max-height: min(310px, 52vh);
  overflow-y: auto;
  scroll-snap-type: y proximity;
  padding: .55rem .45rem .55rem .15rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(178,168,156,.7) transparent;
}
.config-rueda__visor::-webkit-scrollbar { width: 6px; }
.config-rueda__visor::-webkit-scrollbar-thumb {
  background: rgba(178,168,156,.7);
  border-radius: 3px;
}

/* Cada opción se acomoda al deslizar y se achica según se aleja del centro.
   La escala la va poniendo el JS en --escala; sin JS todo queda en 1. */
.config-rueda .config-opcion {
  scroll-snap-align: center;
  transform: scale(var(--escala, 1));
}
.config-rueda .config-opcion:hover,
.config-rueda .config-opcion:focus-visible {
  transform: scale(var(--escala, 1)) translateY(-2px);
  opacity: 1 !important;
}

/* El nombre de la familia queda fijo arriba mientras se desliza esa parte */
.config-rueda .config-grupo {
  position: sticky;
  top: -.55rem;
  z-index: 2;
  background: var(--blanco);
  padding-top: .55rem;
  margin-top: .8rem;
}

/* Difuminado arriba y abajo del visor. Queda por debajo del nombre de la
   familia (z-index 2) para no lavarlo cuando está fijo arriba. */
.config-rueda__marco { position: relative; }

.config-rueda__marco::before,
.config-rueda__marco::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 26px;
  pointer-events: none;
  z-index: 1;
}
.config-rueda__marco::before {
  top: 0;
  background: linear-gradient(to bottom, var(--blanco), rgba(250,250,248,0));
}
.config-rueda__marco::after {
  bottom: 0;
  background: linear-gradient(to top, var(--blanco), rgba(250,250,248,0));
}

.config-rueda__pista {
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--gris-topo);
  text-align: center;
  padding-top: .35rem;
}

/* ── Círculos de color ── */
.config-colores {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: .3rem;
}

.config-color {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  width: 62px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-cuerpo);
}

.config-color__circulo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(178,168,156,.3);
  border: 2px solid transparent;
  box-shadow: 0 0 0 1px rgba(178,168,156,.35);
  transition: transform var(--trans), border-color var(--trans);
  display: block;
}
/* El círculo va liso, pintado del color del tono. Sin foto adentro. */
.config-color:hover .config-color__circulo,
.config-color:focus-visible .config-color__circulo {
  border-color: var(--coral);
  transform: scale(1.08);
}

.config-color--activo .config-color__circulo {
  border-color: var(--verde-petroleo);
  box-shadow: 0 0 0 2px rgba(46,72,71,.35);
}
.config-color--activo .config-color__nombre { color: var(--verde-oscuro); font-weight: 500; }

.config-color__nombre {
  font-size: .72rem;
  color: var(--gris-topo);
  text-align: center;
  line-height: 1.2;
}

.config-vacio {
  font-size: .88rem;
  color: var(--gris-topo);
  line-height: 1.6;
}

/* La aclaración del talle único del babero: se lee como una nota al pie */
.config-nota-babero {
  margin-top: .6rem;
  padding-left: .7rem;
  border-left: 2px solid var(--verde-salvia, #b9c7b4);
  font-size: .82rem;
}

/* Talles: pastillas chicas en fila */
.config-opciones--chicas {
  flex-direction: row;
  flex-wrap: wrap;
  gap: .45rem;
}
.config-talle {
  font-family: var(--font-cuerpo);
  font-size: .9rem;
  font-weight: 500;
  color: var(--verde-oscuro);
  background: var(--crema);
  border: 2px solid transparent;
  border-radius: 999px;
  padding: .45rem 1rem;
  cursor: pointer;
  transition: border-color var(--trans), transform var(--trans);
}
.config-talle:hover,
.config-talle:focus-visible {
  border-color: var(--coral);
  transform: translateY(-2px);
}

.config-btn-chico {
  font-size: .8rem;
  padding: .45rem 1.1rem;
}

/* ── Abajo: cómo lo querés ── */
.config-cierre {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(178,168,156,.28);
}

.config-cierre__intro {
  font-family: var(--font-titulo);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--verde-oscuro);
  text-align: center;
  margin-bottom: 1.1rem;
}

.config-cierre__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .9rem;
}

.config-cierre__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .6rem;
  background: var(--crema);
  border-radius: var(--radio);
  padding: 1.2rem;
}
.config-cierre__card--off {
  background: transparent;
  border: 1px dashed rgba(178,168,156,.5);
}
.config-cierre__card--off .config-cierre__titulo { color: var(--gris-topo); }

.config-cierre__titulo {
  font-family: var(--font-titulo);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--verde-oscuro);
}
.config-cierre__desc {
  font-size: .88rem;
  color: var(--gris-topo);
  line-height: 1.6;
}

/* ════════════════════════════════════════════════════════
   CARRITO / PEDIDO
   ════════════════════════════════════════════════════════ */

.carrito[hidden] { display: none !important; }

.carrito {
  max-width: 1100px;
  margin: 1.5rem auto 0;
  background: var(--blanco);
  border: 2px solid var(--verde-petroleo);
  border-radius: var(--radio-lg);
  padding: 1.5rem;
}

.carrito__titulo {
  font-family: var(--font-titulo);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--verde-oscuro);
  margin-bottom: 1rem;
}

.carrito__lista {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-bottom: 1.25rem;
}

.carrito__item {
  display: flex;
  align-items: center;
  gap: .9rem;
  background: var(--crema);
  border-radius: var(--radio);
  padding: .6rem .8rem;
}

.carrito__foto {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 9px;
  overflow: hidden;
  background: rgba(178,168,156,.3);
  display: block;
}
.carrito__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.carrito__texto {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  flex: 1;
  min-width: 0;
}
.carrito__detalle {
  font-size: .95rem;
  font-weight: 500;
  color: var(--verde-oscuro);
  line-height: 1.4;
}
.carrito__modo {
  font-size: .78rem;
  color: var(--gris-topo);
}

.carrito__quitar {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--gris-topo);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--trans), color var(--trans);
}
.carrito__quitar:hover,
.carrito__quitar:focus-visible {
  background: var(--coral);
  color: var(--blanco);
}

.carrito__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  justify-content: center;
}

.carrito__vaciar {
  display: block;
  margin: 1rem auto 0;
  background: none;
  border: none;
  font-family: var(--font-cuerpo);
  font-size: .8rem;
  color: var(--gris-topo);
  text-decoration: underline;
  cursor: pointer;
}
.carrito__vaciar:hover { color: var(--coral); }

/* ── Escritorio ── */
@media (min-width: 900px) {
  .config-card { padding: 2.25rem; max-width: 1180px; }
  .config-grid {
    grid-template-columns: 230px 1fr 300px;
    gap: 2rem;
  }
  .config-cierre__grid { grid-template-columns: 1fr 1fr; }
}