/* ==========================================================================
   ARQUELORA — LA SELECCIÓN
   ==========================================================================
   Una tienda dentro de la web, y por eso el problema no es decorativo: una
   sección comercial dentro de un sitio de obra puede convertirlo en un
   escaparate y arruinar la voz de todo lo demás. Aquí se resuelve así —

   · El suelo, la tinta y la letra son las MISMAS que en las treinta y siete
     páginas: hielo, azul de la casa, placas blancas. La selección no tiene
     "su" color, porque no es otra marca; es la misma casa hablando de lo que
     va dentro de una obra terminada.
   · Lo único que la selección añade al sistema es la ficha: una fotografía en
     proporción 4:5 sobre placa blanca, el nombre en la condensada, el precio
     en tabulares y una línea de por qué está ahí. Nada de insignias, nada de
     descuentos parpadeando, nada de contadores.
   · El índice de secciones reutiliza el lenguaje del plano de navegación de la
     V7: filas numeradas, reglas de un píxel y una fotografía que responde al
     recorrido. No se inventa una segunda gramática para el mismo gesto.

   Se carga DESPUÉS de arquelora-system.css en las páginas de la selección,
   porque el sistema fija color y familia con !important y esta capa necesita
   poder decidir el detalle de la ficha sin pelearse con él a base de
   especificidad ciega.
   ========================================================================== */

.arq-tnd {
  --tnd-gap: clamp(18px, 2.2vw, 30px);
  --tnd-plate: var(--arq-plate, #fff);
  --tnd-line: var(--arq-line, rgba(7, 26, 56, .14));
  --tnd-ink: var(--arq-ink, #071a38);
  --tnd-soft: var(--arq-ink-soft, #223550);
  --tnd-muted: var(--arq-ink-muted, #5c6b7e);
  --tnd-accent: var(--arq-accent, #1f4f7a);
}

/* --------------------------------------------------------------------------
   1. Entrada
   Un titular, una explicación y —antes que cualquier producto— la relación
   comercial escrita en la misma página. No en una nota al pie ni en otra
   pantalla: si la página cobra por el clic, se dice donde se hace el clic.
   -------------------------------------------------------------------------- */
.arq-tnd-hero {
  padding: calc(var(--v7-header, 78px) + clamp(56px, 7vw, 104px)) 0 clamp(48px, 6vw, 84px);
  background: var(--arq-ground, #f4f7f7);
  border-bottom: 1px solid var(--tnd-line);
}
.arq-tnd-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: end;
}
.arq-tnd-hero h1 {
  font-size: clamp(2.6rem, 6.2vw, 5.1rem);
  margin: .18em 0 0;
}
.arq-tnd-hero__lead {
  font-size: clamp(1rem, 1.25vw, 1.16rem);
  line-height: 1.62;
  max-width: 54ch;
  margin: clamp(18px, 2vw, 26px) 0 0;
}
.arq-tnd-hero__figure {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--tnd-plate);
  border: 1px solid var(--tnd-line);
}
.arq-tnd-hero__figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* La declaración de afiliación. Discreta, no escondida: mismo cuerpo que el
   texto corriente, con una regla a la izquierda que la separa sin encogerla. */
.arq-tnd-disclosure {
  border-left: 2px solid var(--tnd-accent);
  padding: clamp(14px, 1.6vw, 20px) clamp(16px, 1.8vw, 24px);
  background: var(--tnd-plate);
  margin: clamp(26px, 3vw, 40px) 0 0;
  max-width: 78ch;
}
.arq-tnd-disclosure p { margin: 0; font-size: .95rem; line-height: 1.6; }
.arq-tnd-disclosure p + p { margin-top: .55em; }
.arq-tnd-disclosure strong { color: var(--tnd-ink) !important; font-weight: 600; }

/* --------------------------------------------------------------------------
   2. El índice de secciones
   Mismo gesto que el plano de navegación: fila numerada, glosa y fotografía
   que cambia al recorrer la lista. Sin JS la lista sigue siendo una lista de
   enlaces con su fotografía visible; el guion solo sincroniza cuál se ve.
   -------------------------------------------------------------------------- */
.arq-tnd-plan { padding: clamp(56px, 7vw, 104px) 0; }
.arq-tnd-plan__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.arq-tnd-plan__list { border-top: 1px solid var(--tnd-line); }
.arq-tnd-plan__row {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr) 1.6rem;
  gap: clamp(12px, 1.4vw, 22px);
  align-items: baseline;
  padding: clamp(18px, 2vw, 26px) 0;
  border-bottom: 1px solid var(--tnd-line);
  text-decoration: none;
  transition: padding-left .4s var(--v7-ease, cubic-bezier(.19,.78,.16,1));
}
.arq-tnd-plan__row:hover,
.arq-tnd-plan__row:focus-visible { padding-left: 10px; }
.arq-tnd-plan__n {
  font-size: .74rem;
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  color: var(--tnd-muted) !important;
}
.arq-tnd-plan__row h3 { font-size: clamp(1.3rem, 2.1vw, 1.9rem); margin: 0; }
.arq-tnd-plan__row p { margin: .42em 0 0; font-size: .95rem; line-height: 1.55; max-width: 46ch; }
.arq-tnd-plan__count {
  display: block;
  margin: .5em 0 0;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tnd-muted) !important;
}
.arq-tnd-plan__go { justify-self: end; color: var(--tnd-accent) !important; }
.arq-tnd-plan__media { position: sticky; top: calc(var(--v7-header, 78px) + 28px); }
.arq-tnd-plan__media figure {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--tnd-line);
  background: var(--tnd-plate);
}
.arq-tnd-plan__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Con JS: una sola fotografía visible, la de la fila recorrida. El atributo lo
   pone el propio guion al arrancar, de modo que sin JS —o si el guion falla—
   las fotografías quedan en el flujo y la sección se sigue leyendo entera. */
[data-tnd-js] .arq-tnd-plan__stack { position: relative; aspect-ratio: 4 / 5; }
[data-tnd-js] .arq-tnd-plan__media figure {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity .5s var(--v7-ease, ease);
}
[data-tnd-js] .arq-tnd-plan__media figure.is-shown { opacity: 1; }

/* --------------------------------------------------------------------------
   3. La ficha
   -------------------------------------------------------------------------- */
.arq-tnd-section { padding: clamp(48px, 6vw, 92px) 0; }
.arq-tnd-section--plate { background: var(--tnd-plate); border-block: 1px solid var(--tnd-line); }
.arq-tnd-head { max-width: 62ch; margin: 0 0 clamp(30px, 3.4vw, 52px); }
.arq-tnd-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.7rem); margin: .2em 0 0; }
.arq-tnd-head p { margin: .8em 0 0; line-height: 1.62; }

.arq-tnd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: var(--tnd-gap);
}
.arq-tnd-card {
  display: flex;
  flex-direction: column;
  background: var(--tnd-plate);
  border: 1px solid var(--tnd-line);
  min-width: 0;
}
.arq-tnd-section--plate .arq-tnd-card { background: var(--arq-ground, #f4f7f7); }
.arq-tnd-card__shot {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid var(--tnd-line);
}
.arq-tnd-card__shot img {
  width: 100%; height: 100%; display: block;
  object-fit: contain;
  padding: 6%;
  transition: transform .6s var(--v7-ease, ease);
}
.arq-tnd-card:hover .arq-tnd-card__shot img { transform: scale(1.035); }
.arq-tnd-card__body {
  display: flex;
  flex-direction: column;
  gap: .55em;
  padding: clamp(16px, 1.6vw, 22px);
  flex: 1 1 auto;
}
.arq-tnd-card__body h3 {
  font-size: 1.02rem;
  line-height: 1.28;
  margin: 0;
}
.arq-tnd-card__note {
  margin: 0;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--tnd-soft) !important;
}
.arq-tnd-card__price {
  display: flex;
  align-items: baseline;
  gap: .6em;
  margin: auto 0 0;
  padding-top: .7em;
  border-top: 1px solid var(--tnd-line);
  font-variant-numeric: tabular-nums;
}
.arq-tnd-card__price b { font-size: 1.12rem; font-weight: 600; color: var(--tnd-ink) !important; }
.arq-tnd-card__price s { font-size: .86rem; color: var(--tnd-muted) !important; }
.arq-tnd-card__stamp {
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tnd-muted) !important;
}
.arq-tnd-card__go {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  margin-top: .8em;
  padding: 12px 14px;
  border: 1px solid var(--arq-line-strong, rgba(7,26,56,.3));
  text-decoration: none;
  font-size: .84rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  transition: background .3s var(--v7-ease, ease), color .3s var(--v7-ease, ease);
}
.arq-tnd-card__go:hover,
.arq-tnd-card__go:focus-visible {
  background: var(--tnd-ink);
  color: #fff !important;
  border-color: var(--tnd-ink);
}
.arq-tnd-card__go:hover span,
.arq-tnd-card__go:focus-visible span { color: #fff !important; }

/* --------------------------------------------------------------------------
   4. Criterio y salidas
   -------------------------------------------------------------------------- */
.arq-tnd-criteria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--tnd-gap);
  border-top: 1px solid var(--tnd-line);
  padding-top: clamp(22px, 2.6vw, 34px);
}
.arq-tnd-criteria > div > span {
  display: block;
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--tnd-muted) !important;
  margin-bottom: .55em;
}
.arq-tnd-criteria h3 { font-size: 1.06rem; margin: 0 0 .35em; }
.arq-tnd-criteria p { margin: 0; font-size: .92rem; line-height: 1.6; }

.arq-tnd-exit {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 1.4vw, 18px);
  margin-top: clamp(28px, 3vw, 44px);
}

/* --------------------------------------------------------------------------
   5. Estrecho
   -------------------------------------------------------------------------- */
@media (max-width: 920px) {
  .arq-tnd-hero__grid,
  .arq-tnd-plan__grid { grid-template-columns: minmax(0, 1fr); }
  .arq-tnd-plan__media { position: static; order: -1; }
  .arq-tnd-hero { padding-top: calc(var(--v7-header, 66px) + 48px); }
}
@media (max-width: 560px) {
  .arq-tnd-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
  .arq-tnd-plan__row { grid-template-columns: 2.6rem minmax(0, 1fr) 1.2rem; }
}

/* ==========================================================================
   6. LA BOLSA
   ==========================================================================
   La parte que convierte una lista de enlaces en una compra. Tres piezas, y
   ninguna decorativa:

   · La BARRA. Aparece solo cuando hay algo dentro, va pegada bajo la cabecera
     y dice cuánto llevas y cuánto suma. Se escribe en el HTML —no la inyecta
     el guion— para que al cargar no haya salto de composición.
   · La FICHA. Un diálogo nativo con la descripción y las medidas reales del
     vendedor, para que no haya que ir a mirarlas fuera. Sin <dialog>, la misma
     ficha se despliega dentro de su tarjeta.
   · El TRASLADO. Lo que se ve mientras la bolsa pasa al carrito del vendedor:
     un estado, una barra y, si el navegador bloquea la pestaña, los enlaces
     uno a uno. Nunca una pantalla en blanco.
   ========================================================================== */

.arq-tnd-bar {
  position: sticky;
  top: var(--v7-header, 78px);
  z-index: 40;
  background: var(--tnd-ink, #071a38);
  border-bottom: 1px solid var(--tnd-ink, #071a38);
}
.arq-tnd-bar__inner {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  min-height: 54px;
  padding-block: 8px;
  flex-wrap: wrap;
}
.arq-tnd-bar p { margin: 0; font-size: .86rem; color: #fff !important; }
.arq-tnd-bar strong {
  color: #fff !important;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
  margin-right: .6em;
}
.arq-tnd-bar__total { margin-left: auto !important; font-variant-numeric: tabular-nums; font-weight: 600; }
.arq-tnd-bar__go {
  color: #fff !important;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .45);
  padding: 9px 14px;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  transition: background .3s var(--v7-ease, ease);
}
.arq-tnd-bar__go:hover,
.arq-tnd-bar__go:focus-visible { background: rgba(255, 255, 255, .16); }

/* --- acciones de la tarjeta ------------------------------------------------ */
.arq-tnd-card__actions { display: flex; gap: 8px; margin-top: .8em; }
.arq-tnd-card__add,
.arq-tnd-card__more {
  font: inherit;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 12px 14px;
  cursor: pointer;
  border: 1px solid var(--tnd-ink, #071a38);
  transition: background .25s var(--v7-ease, ease), color .25s var(--v7-ease, ease);
}
.arq-tnd-card__add {
  flex: 1 1 auto;
  background: var(--tnd-ink, #071a38);
  color: #fff !important;
}
.arq-tnd-card__add:hover,
.arq-tnd-card__add:focus-visible { background: var(--tnd-accent, #1f4f7a); border-color: var(--tnd-accent, #1f4f7a); }
.arq-tnd-card__add[data-tnd-hecho] { background: #14603f; border-color: #14603f; }
.arq-tnd-card__more {
  flex: 0 0 auto;
  background: transparent;
  color: var(--tnd-ink, #071a38) !important;
  border-color: var(--arq-line-strong, rgba(7, 26, 56, .3));
}
.arq-tnd-card__more:hover,
.arq-tnd-card__more:focus-visible { background: var(--arq-ground, #f4f7f7); }

/* El enlace directo a la ficha del vendedor deja de ser la acción principal
   —comprar se hace desde aquí— pero no desaparece: sin JS es la única salida
   que queda, y con JS sigue siendo la forma de comprobar el precio en origen. */
.arq-tnd-card__out {
  display: inline-block;
  margin-top: .7em;
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--tnd-muted, #5c6b7e) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.arq-tnd-card__out:hover,
.arq-tnd-card__out:focus-visible { color: var(--tnd-accent, #1f4f7a) !important; }
.arq-tnd-card[data-tnd-en-bolsa] { outline: 2px solid var(--tnd-accent, #1f4f7a); outline-offset: -2px; }

/* --- la ficha en diálogo ---------------------------------------------------- */
.arq-tnd-modal {
  width: min(940px, calc(100vw - 32px));
  max-height: min(88vh, 900px);
  padding: 0;
  border: 1px solid var(--tnd-line, rgba(7, 26, 56, .14));
  background: var(--tnd-plate, #fff);
  color: var(--tnd-ink, #071a38);
  overflow: auto;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
}
.arq-tnd-modal::backdrop { background: rgba(7, 26, 56, .58); }
.arq-tnd-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  font: inherit;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 9px 13px;
  cursor: pointer;
  background: var(--tnd-plate, #fff);
  border: 1px solid var(--arq-line-strong, rgba(7, 26, 56, .3));
}
.arq-tnd-modal__media { margin: 0; background: #fff; border-right: 1px solid var(--tnd-line, rgba(7, 26, 56, .14)); }
.arq-tnd-modal__media img { width: 100%; height: 100%; object-fit: contain; padding: 8%; display: block; }
.arq-tnd-modal__body { padding: clamp(22px, 3vw, 40px); }
.arq-tnd-modal__body h2 { font-size: clamp(1.25rem, 2.2vw, 1.75rem); margin: 0 0 .35em; }
.arq-tnd-modal__price { font-size: 1.3rem; font-weight: 600; margin: 0 0 1.2em; font-variant-numeric: tabular-nums; }
.arq-tnd-modal__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 1.6em; }

.arq-tnd-detail__block { margin-bottom: 1.4em; }
.arq-tnd-detail__block h4 {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tnd-muted, #5c6b7e) !important;
  margin: 0 0 .5em;
}
.arq-tnd-detail__block ul { margin: 0; padding-left: 1.1em; }
.arq-tnd-detail__block li { font-size: .92rem; line-height: 1.55; margin-bottom: .25em; }
.arq-tnd-detail__block p { margin: 0; font-size: .92rem; line-height: 1.6; }
.arq-tnd-detail__entrega { font-size: .84rem; color: var(--tnd-muted, #5c6b7e) !important; margin: 0 0 1.2em; }
.arq-tnd-detail__gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.arq-tnd-detail__gallery img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--tnd-line, rgba(7, 26, 56, .14));
}

/* La misma ficha, desplegada en la tarjeta cuando el navegador no trae <dialog>. */
.arq-tnd-card__detail {
  padding: 0 clamp(16px, 1.6vw, 22px) clamp(16px, 1.6vw, 22px);
  border-top: 1px solid var(--tnd-line, rgba(7, 26, 56, .14));
}

/* --- la página de la bolsa --------------------------------------------------- */
.arq-tnd-hero--slim { padding-bottom: clamp(28px, 3.4vw, 48px); }
.arq-tnd-hero--slim h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
.arq-tnd-hero--slim .arq-tnd-hero__lead { max-width: 62ch; }

.arq-tnd-bag__empty {
  border: 1px solid var(--tnd-line, rgba(7, 26, 56, .14));
  padding: clamp(28px, 4vw, 56px);
  background: var(--tnd-plate, #fff);
}
.arq-tnd-bag__empty h2 { font-size: clamp(1.3rem, 2.2vw, 1.8rem); margin: 0 0 .5em; }
.arq-tnd-bag__empty p { margin: 0 0 1.4em; max-width: 52ch; }
.arq-tnd-bag__multi {
  border-left: 2px solid var(--tnd-accent, #1f4f7a);
  padding: 12px 16px;
  background: var(--tnd-plate, #fff);
  margin: 0 0 clamp(20px, 2.4vw, 30px);
}

.arq-tnd-bag__group {
  border: 1px solid var(--tnd-line, rgba(7, 26, 56, .14));
  background: var(--tnd-plate, #fff);
  margin-bottom: clamp(20px, 2.6vw, 34px);
}
.arq-tnd-bag__head {
  display: flex;
  align-items: baseline;
  gap: .6em;
  flex-wrap: wrap;
  padding: clamp(14px, 1.6vw, 20px) clamp(16px, 2vw, 26px);
  border-bottom: 1px solid var(--tnd-line, rgba(7, 26, 56, .14));
}
.arq-tnd-bag__head span {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tnd-muted, #5c6b7e) !important;
}
.arq-tnd-bag__head strong { font-size: 1rem; }

.arq-tnd-bag__line {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto auto auto;
  gap: clamp(12px, 1.6vw, 22px);
  align-items: center;
  padding: clamp(14px, 1.8vw, 22px) clamp(16px, 2vw, 26px);
  border-bottom: 1px solid var(--tnd-line, rgba(7, 26, 56, .14));
}
.arq-tnd-bag__line img {
  width: 84px;
  height: 84px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--tnd-line, rgba(7, 26, 56, .14));
}
.arq-tnd-bag__text h3 { font-size: .98rem; line-height: 1.3; margin: 0 0 .25em; }
.arq-tnd-bag__unit { margin: 0; font-size: .84rem; color: var(--tnd-muted, #5c6b7e) !important; font-variant-numeric: tabular-nums; }
.arq-tnd-bag__qty { display: flex; align-items: center; border: 1px solid var(--arq-line-strong, rgba(7, 26, 56, .3)); }
.arq-tnd-bag__qty button {
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  width: 36px;
  height: 36px;
  cursor: pointer;
  background: transparent;
  border: 0;
  color: var(--tnd-ink, #071a38) !important;
}
.arq-tnd-bag__qty button:hover { background: var(--arq-ground, #f4f7f7); }
.arq-tnd-bag__qty span { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }
.arq-tnd-bag__sum { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 8ch; text-align: right; }
.arq-tnd-bag__drop {
  font: inherit;
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 6px;
  color: var(--tnd-muted, #5c6b7e) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.arq-tnd-bag__drop:hover { color: var(--tnd-ink, #071a38) !important; }

.arq-tnd-bag__foot { padding: clamp(16px, 2vw, 26px); display: grid; gap: .7em; justify-items: start; }
.arq-tnd-bag__total { display: flex; align-items: baseline; gap: 1em; margin: 0; }
.arq-tnd-bag__total span {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tnd-muted, #5c6b7e) !important;
}
.arq-tnd-bag__total b { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.arq-tnd-bag__note { margin: 0; font-size: .84rem; color: var(--tnd-muted, #5c6b7e) !important; max-width: 62ch; }
.arq-tnd-bag__pay {
  font: inherit;
  font-size: .86rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 15px 24px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  background: var(--tnd-ink, #071a38);
  color: #fff !important;
  border: 1px solid var(--tnd-ink, #071a38);
  transition: background .25s var(--v7-ease, ease);
}
.arq-tnd-bag__pay:hover,
.arq-tnd-bag__pay:focus-visible { background: var(--tnd-accent, #1f4f7a); border-color: var(--tnd-accent, #1f4f7a); }

/* --- el traslado ------------------------------------------------------------- */
.arq-tnd-handoff { margin-top: clamp(22px, 3vw, 36px); }
.arq-tnd-handoff__panel {
  border: 1px solid var(--tnd-accent, #1f4f7a);
  background: var(--tnd-plate, #fff);
  padding: clamp(20px, 2.6vw, 32px);
  display: grid;
  gap: .8em;
  justify-items: start;
}
.arq-tnd-handoff__panel h2 { font-size: clamp(1.15rem, 2vw, 1.5rem); margin: 0; }
.arq-tnd-handoff__panel p { margin: 0; max-width: 64ch; }
.arq-tnd-handoff__state { font-variant-numeric: tabular-nums; }
.arq-tnd-handoff__bar {
  width: min(100%, 460px);
  height: 4px;
  background: var(--arq-ground, #f4f7f7);
  border: 1px solid var(--tnd-line, rgba(7, 26, 56, .14));
}
.arq-tnd-handoff__bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--tnd-accent, #1f4f7a);
  transition: width .4s var(--v7-ease, ease);
}
.arq-tnd-handoff__list { margin: 0; padding-left: 1.2em; display: grid; gap: .3em; }
.arq-tnd-handoff__list a { color: var(--tnd-accent, #1f4f7a) !important; }

/* --- estrecho ---------------------------------------------------------------- */
@media (max-width: 920px) {
  .arq-tnd-modal { grid-template-columns: minmax(0, 1fr); }
  .arq-tnd-modal__media {
    border-right: 0;
    border-bottom: 1px solid var(--tnd-line, rgba(7, 26, 56, .14));
    aspect-ratio: 4 / 3;
  }
}
@media (max-width: 700px) {
  .arq-tnd-bag__line {
    grid-template-columns: 68px minmax(0, 1fr);
    grid-template-areas: "foto texto" "cant importe" "quitar quitar";
  }
  .arq-tnd-bag__line img { width: 68px; height: 68px; grid-area: foto; }
  .arq-tnd-bag__text { grid-area: texto; }
  .arq-tnd-bag__qty { grid-area: cant; }
  .arq-tnd-bag__sum { grid-area: importe; text-align: right; }
  .arq-tnd-bag__drop { grid-area: quitar; justify-self: start; padding-left: 0; }
  .arq-tnd-bar__inner { min-height: 48px; }
  .arq-tnd-bar__total { margin-left: 0 !important; }
}