/* ==========================================================================
   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, .92fr) minmax(0, 1.08fr);
  align-items: start;
}
.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));
}
/* La columna de la fotografia NO se estira con el texto.
   Medido en produccion: el dialogo es una rejilla de dos columnas y la fila se
   igualaba a la mas alta, asi que con una descripcion larga del vendedor la
   figura llegaba a 2.221 px de alto y la foto —contenida— quedaba dibujada
   diminuta en medio de una sabana blanca, fuera de la pantalla. Ahora la
   figura es un cuadrado que se queda arriba mientras el texto pasa. */
.arq-tnd-modal__media {
  margin: 0;
  background: #fff;
  border-right: 1px solid var(--tnd-line, rgba(7, 26, 56, .14));
  aspect-ratio: 1;
  align-self: start;
  position: sticky;
  top: 0;
  max-height: 88vh;
}
.arq-tnd-modal__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5%;
  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; }
/* Las miniaturas tampoco: sin `align-items` la rejilla las estiraba a lo alto
   de la fila (125 x 600 px medidos) y la foto se perdia dentro de la caja. */
.arq-tnd-detail__gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 8px;
}
.arq-tnd-detail__gallery img {
  width: 100%;
  height: auto;
  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: 1;
    position: static;
    max-height: 52vh;
  }
}
@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; }
}

/* ==========================================================================
   9. LA FAMILIA
   ==========================================================================
   La segunda altura de cada estancia: el resto del catalogo del vendedor. No
   lleva nota escrita —seria inventarla— y por eso su tarjeta se distingue sin
   competir: rejilla mas densa, tipo mas contenido y, en el lugar donde la
   seleccion pone su criterio, la unica cosa que se puede afirmar de una pieza
   sin haberla visto: sus medidas.
   ========================================================================== */
.arq-tnd-grid--familia {
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.arq-tnd-card--familia .arq-tnd-card__body { padding: clamp(13px, 1.2vw, 17px); gap: .42em; }
.arq-tnd-card--familia .arq-tnd-card__body h3 { font-size: .92rem; line-height: 1.26; }
.arq-tnd-card--familia .arq-tnd-card__price b { font-size: 1.02rem; }
.arq-tnd-card--familia .arq-tnd-card__add,
.arq-tnd-card--familia .arq-tnd-card__more { font-size: .76rem; padding: 10px 11px; }

.arq-tnd-card__medida {
  margin: 0;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--tnd-soft, #223550) !important;
  font-variant-numeric: tabular-nums;
}
.arq-tnd-card__medida span {
  display: inline-block;
  margin-right: .5em;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tnd-muted, #5c6b7e) !important;
}

@media (max-width: 560px) {
  .arq-tnd-grid--familia { grid-template-columns: repeat(auto-fill, minmax(min(100%, 165px), 1fr)); }
  .arq-tnd-card--familia .arq-tnd-card__actions { flex-direction: column; }
}

/* ── La página de una pieza ───────────────────────────────────────────────────
   Una pieza dejó de ser un ancla dentro de su estancia y pasó a tener página
   propia. Lo que se ve aquí es lo que decide una compra —la fotografía grande,
   la medida, el precio con su fecha y quién lo vende— y debajo el criterio de la
   estancia, que es lo único de esta página que no es del vendedor. */
.arq-tnd-crumbs {
  font: 600 11px/1.4 ArqInter, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 18px;
  opacity: .78;
}
.arq-tnd-crumbs a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.arq-tnd-crumbs span { margin: 0 8px; opacity: .5; }

.arq-tnd-piece {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.arq-tnd-piece__shot {
  margin: 0;
  /* La fila no se iguala a la más alta: con una descripción larga la figura se
     estiraba hasta hacer invisible la foto. Ese error ya se pagó en la ficha. */
  align-self: start;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--v7-paper, #f4f2ee);
}
.arq-tnd-piece__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arq-tnd-piece__body { min-width: 0; }
.arq-tnd-piece__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin: 0 0 14px; }
.arq-tnd-piece__price b { font: 500 clamp(1.7rem, 3vw, 2.4rem)/1 ArqTight, sans-serif; }
.arq-tnd-piece__size {
  font: 400 15px/1.5 ArqInter, sans-serif;
  margin: 0 0 14px;
}
.arq-tnd-piece__size span {
  font: 600 10px/1 ArqInter, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .65;
  margin-right: 8px;
}
.arq-tnd-piece__vendor { font: 400 15px/1.65 ArqInter, sans-serif; opacity: .86; margin: 0 0 22px; }
.arq-tnd-piece__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 0 0 12px; }
.arq-tnd-piece__alt { font: 600 12px/1 ArqInter, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.arq-tnd-piece__note { font: 400 13px/1.55 ArqInter, sans-serif; opacity: .7; margin: 0 0 20px; }

/* Las hermanas: es como se recorre un catálogo sin buscador, y es lo que impide
   que una pieza exista sin un solo enlace que llegue a ella. */
.arq-tnd-siblings {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
  gap: clamp(14px, 2vw, 26px);
}
.arq-tnd-siblings a {
  display: grid;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}
.arq-tnd-siblings img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--v7-paper, #f4f2ee); }
.arq-tnd-siblings span { font: 400 13px/1.4 ArqInter, sans-serif; }
.arq-tnd-siblings b { font: 500 14px/1 ArqTight, sans-serif; }

/* El título de una tarjeta lleva a su página. Sin esto las dos mil páginas
   nuevas existen y no se llega a ellas más que por el sitemap, que es como no
   existir. */
.arq-tnd-card__link { color: inherit; text-decoration: none; }
.arq-tnd-card__link:hover, .arq-tnd-card__link:focus-visible { text-decoration: underline; }

@media (max-width: 760px) {
  .arq-tnd-piece { grid-template-columns: 1fr; }
  .arq-tnd-piece__actions { flex-direction: column; align-items: stretch; }
  .arq-tnd-piece__actions .editorial-btn { justify-content: space-between; }
}