/* =========================================================================
   TIME MASTER · Ficha de producto (pieza.html)
   Solo lo exclusivo de esta página. Header, footer, breadcrumb, tarjeta,
   botones, badge, formulario, estado vacío y señales de confianza vienen
   de base.css y components.css.
   Requiere tokens.css → base.css → components.css antes.
   ========================================================================= */

/* ---- 1. BREADCRUMB ------------------------------------------------------ */
.tm-piece__crumbs { padding-top: var(--tm-s-4); padding-bottom: var(--tm-s-3); }
/* Pulido 2026-11-09: breadcrumb con filete, igual que la cabecera de
   Catálogo, Cómo funciona, Confianza y políticas */
.tm-piece__crumbs { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tm-piece__crumbs::before { content: ""; width: 32px; height: 1px; background: var(--tm-text-3); flex: none; }
.tm-piece__crumbs ol { min-width: 0; flex-wrap: nowrap; }
/* Modelos largos: el último tramo se corta con "…" en una línea */
.tm-piece__crumbs li:last-child { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- 2. SECCIÓN PRINCIPAL · galería + información ---------------------- */
/* Galería ~58 % / info ~42 %. La columna de info queda fija al hacer
   scroll en desktop, así el CTA "Me interesa" siempre está a la vista.
   Elevación 2026-11-09 (mismo lenguaje que el hero de la Home): foco de luz
   neutra detrás de la pieza y vitrina dentro de un marco con filo de luz. */
.tm-piece { overflow-x: clip; } /* el foco de luz no genera scroll lateral; clip no rompe el sticky */
.tm-piece__main {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--tm-s-6);
  align-items: start;
  padding-bottom: var(--tm-section-y);
}
/* Foco de galería: luz neutra al 7 % centrada en la vitrina (como .tm-hero::before) */
.tm-piece__main::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -12% 30% 10% -20%;
  background: radial-gradient(closest-side, rgba(250, 250, 250, 0.07), rgba(250, 250, 250, 0));
}
@media (max-width: 1023px) {
  .tm-piece__main { grid-template-columns: minmax(0, 1fr); gap: var(--tm-s-5); padding-bottom: var(--tm-s-6); }
  .tm-piece__main::before { inset: -10% -30% 40% -30%; }
}

/* 2a. Galería: el mismo marco del hero (filo de luz arriba, halo difuso y
   sombra larga); dentro, la vitrina porcelana 4:5 y las miniaturas. */
.tm-gallery {
  display: grid; gap: 12px;
  position: relative;
  padding: 14px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(250, 250, 250, 0.06), rgba(14, 14, 15, 0.7) 40%);
  border: 1px solid rgba(250, 250, 250, 0.10);
  box-shadow: 0 60px 120px -60px rgba(250, 250, 250, 0.10), 0 40px 80px -40px rgba(0, 0, 0, 0.9);
}
.tm-gallery__main {
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(250, 250, 250, 0.06); /* filo interior, como la tarjeta */
}
/* Velo de luz cenital que se enciende al pasar el cursor (solo opacity) */
.tm-gallery__main::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(70% 45% at 50% 0%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  opacity: 0;
  transition: opacity var(--tm-dur-slow) var(--tm-ease);
}
/* Foto: vitrina negra compartida con la tarjeta (components.css), al 90 % */
.tm-gallery__main > img {
  transition: opacity 280ms var(--tm-ease), transform var(--tm-dur-slow) var(--tm-ease);
}
@media (hover: hover) {
  .tm-gallery__main:hover::before { opacity: 1; }
  .tm-gallery__main:hover > img { transform: scale(1.02); }
}
/* Cambio de foto (pieza.js): la actual se desvanece y la nueva aparece */
.tm-gallery__main > img.is-swapping { opacity: 0; transform: scale(0.985); }
.tm-gallery__main > .tm-badge { top: 18px; left: 18px; } /* posición base en base.css */
.tm-gallery__main > .tm-media__ph svg { width: 46%; }
@media (max-width: 599px) {
  .tm-gallery { padding: 10px; border-radius: 22px; gap: 10px; }
  .tm-gallery__main { border-radius: 14px; }
  .tm-gallery__thumbs { grid-template-columns: repeat(auto-fill, minmax(56px, 64px)); gap: 8px; }
}

/* Miniaturas: mini-vitrinas que no compiten con la principal. Inactivas
   un punto atenuadas; hover sube 2 px; la activa con filo plata. */
.tm-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 76px));
  gap: 10px;
}
.tm-gallery__thumb {
  display: block; width: 100%; padding: 3px;
  border: 1px solid var(--tm-border);
  border-radius: 12px;
  background: var(--tm-graphite-2);
  cursor: pointer;
  transition: border-color var(--tm-dur) var(--tm-ease), transform var(--tm-dur) var(--tm-ease);
}
.tm-gallery__thumb .tm-media { display: block; border-radius: 9px; }
.tm-gallery__thumb .tm-media::after { display: none; } /* sin sombra de apoyo a este tamaño */
.tm-gallery__thumb .tm-media > img { opacity: 0.62; transition: opacity var(--tm-dur) var(--tm-ease); }
.tm-gallery__thumb:hover { border-color: var(--tm-line-strong); transform: translateY(-2px); }
.tm-gallery__thumb:hover .tm-media > img { opacity: 0.9; }
.tm-gallery__thumb[aria-current="true"] { border-color: var(--tm-blue); }
.tm-gallery__thumb[aria-current="true"] .tm-media > img { opacity: 1; }
.tm-gallery__thumb:active { transform: translateY(0); transition-duration: 120ms; }

/* 2b. Columna de información */
.tm-piece__info {
  display: grid;
  gap: var(--tm-s-4);
  position: sticky;
  top: var(--tm-header-offset); /* deja libre el header flotante */
  padding-top: var(--tm-s-2);
}
@media (max-width: 1023px) { .tm-piece__info { position: static; padding-top: 0; } }

/* Jerarquía: marca (eyebrow con filete, firma de casa como en el hero) →
   modelo serif grande → referencia gris tabular */
.tm-piece__head { display: grid; gap: 14px; }
.tm-piece__brand { display: inline-flex; align-items: center; gap: 14px; color: var(--tm-text-2); }
.tm-piece__brand::before { content: ""; width: 32px; height: 1px; background: var(--tm-text-3); }
.tm-piece__title {
  font-size: clamp(44px, 4.4vw, 64px);
  line-height: 1;
  letter-spacing: -0.015em;
}
.tm-piece__ref { color: var(--tm-text-muted); font-size: var(--tm-fs-small); font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* Condición · Disponibilidad · Precio en filas con divisores finos; el
   filete superior es un filo de luz que se desvanece (como el hero) */
.tm-piece__facts { position: relative; margin: 0; }
.tm-piece__facts::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, rgba(250, 250, 250, 0.22), rgba(250, 250, 250, 0.04));
}
.tm-piece__facts > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--tm-s-2);
  padding: 16px 0;
  border-bottom: 1px solid var(--tm-border);
}
.tm-piece__facts dt {
  font-size: var(--tm-fs-eyebrow); font-weight: 500;
  letter-spacing: var(--tm-tracking-eyebrow); text-transform: uppercase;
  color: var(--tm-text-3);
}
.tm-piece__facts dd { margin: 0; text-align: right; font-size: var(--tm-fs-small); }
/* Disponible: punto verde de estado con halo (color de éxito del DS, no decorativo) */
.tm-piece__facts dd.is-available::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px;
  border-radius: 50%; background: var(--tm-success); vertical-align: middle;
  box-shadow: 0 0 0 3px rgba(125, 196, 155, 0.16);
}
/* Precio: cifra en la fuente de títulos (como el contador del Catálogo); "Conforme a
   oferta vigente" se queda discreto */
.tm-piece__price {
  font-family: var(--tm-font-display);
  font-size: 30px; line-height: 1; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.tm-piece__price.tm-card__price--on-request { font-family: var(--tm-font-body); line-height: inherit; font-size: 13px; font-weight: 400; color: var(--tm-text-2); }

/* CTA: panel de cristal ahumado con el primario a todo el ancho. Hover del
   primario: sube 1 px (base.css) y se enciende un halo blanco muy suave. */
/* Pulido 2026-11-09: panel con filo de luz arriba (como filtros y modal);
   el primario es el elemento más claro de la ficha (60 px, halo al hover,
   flecha que avanza) y "Agendar visita" es terciario, centrado. */
.tm-piece__cta {
  position: relative;
  display: grid; gap: 14px;
  padding: var(--tm-s-3);
  border-radius: 20px;
  border: 1px solid var(--tm-line);
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(250, 250, 250, 0.05), rgba(250, 250, 250, 0)),
    linear-gradient(180deg, var(--tm-graphite-2) 0%, var(--tm-graphite) 60%);
  box-shadow: 0 40px 80px -48px rgba(0, 0, 0, 0.9);
}
.tm-piece__cta::before {
  content: ""; position: absolute; top: -1px; left: 24px; right: 24px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(250, 250, 250, 0), rgba(250, 250, 250, 0.28) 50%, rgba(250, 250, 250, 0));
}
.tm-piece__visit { justify-self: center; padding-block: 6px; }
.tm-piece__cta .tm-btn--primary {
  min-height: 60px; font-size: 12.5px;
  box-shadow: 0 12px 30px -18px rgba(250, 250, 250, 0.35);
  transition: background-color var(--tm-dur) var(--tm-ease), transform var(--tm-dur) var(--tm-ease), box-shadow var(--tm-dur-slow) var(--tm-ease);
}
@media (hover: hover) {
  .tm-piece__cta .tm-btn--primary:hover { box-shadow: 0 14px 36px -14px rgba(250, 250, 250, 0.38); }
}
.tm-piece__cta-note { font-size: 13px; color: var(--tm-text-muted); text-align: center; margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--tm-line); }
.tm-piece__contact { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; color: var(--tm-text-muted); }
@media (max-width: 599px) { .tm-piece__cta { padding: var(--tm-s-2); } }

/* ---- 3. DETALLES -------------------------------------------------------- */
/* Banda Grafito con filete de horizonte arriba. Texto a la izquierda (fijo
   en desktop), especificaciones limpias y observaciones en un panel aparte. */
.tm-piece__details { position: relative; }
.tm-piece__details::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, rgba(250, 250, 250, 0), rgba(250, 250, 250, 0.14) 50%, rgba(250, 250, 250, 0));
}
.tm-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--tm-s-6);
  align-items: start;
}
.tm-details__intro { display: grid; gap: var(--tm-s-2); position: sticky; top: var(--tm-header-offset); }
.tm-details__intro h2 { font-size: clamp(34px, 3.6vw, 48px); line-height: 1.05; }
/* Descripción con filete vertical de luz a la izquierda: se lee como un
   texto de catálogo de galería, no como un párrafo suelto */
.tm-details__text {
  position: relative;
  margin-top: var(--tm-s-1); padding-left: var(--tm-s-3);
  font-size: 17px; line-height: 1.8; color: #C9C9CD; max-width: 52ch;
}
.tm-details__text::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px;
  background: linear-gradient(180deg, rgba(250, 250, 250, 0.4), rgba(250, 250, 250, 0));
}
.tm-details__cols { display: grid; gap: var(--tm-s-5); }
/* Etiqueta de bloque con filete, como la nota del Catálogo */
.tm-details__label {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--tm-font-body);
  font-size: var(--tm-fs-eyebrow); font-weight: 500;
  letter-spacing: var(--tm-tracking-eyebrow); text-transform: uppercase;
  color: var(--tm-text-muted);
  margin-bottom: var(--tm-s-2);
}
.tm-details__label::before { content: ""; width: 24px; height: 1px; background: var(--tm-line-strong); }
@media (max-width: 1023px) {
  .tm-details { grid-template-columns: minmax(0, 1fr); gap: var(--tm-s-5); }
  .tm-details__intro { position: static; }
}

/* Especificaciones: etiqueta | valor, divisores finos y aire generoso */
/* Pulido 2026-11-09: las especificaciones dejan de ser una lista plana y
   van en un panel Noche (como las observaciones), con filo de luz arriba,
   etiqueta en mayúsculas espaciadas y valor en blanco; la fila se ilumina
   apenas al pasar el cursor (solo color de fondo). */
.tm-specs {
  position: relative;
  margin: 0;
  padding: 6px 24px;
  border: 1px solid var(--tm-line);
  border-radius: var(--tm-radius-card);
  background: linear-gradient(180deg, var(--tm-graphite-2) 0%, var(--tm-night) 70%);
}
.tm-specs::before {
  content: ""; position: absolute; top: -1px; left: 24px; right: 24px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(250, 250, 250, 0), rgba(250, 250, 250, 0.22) 50%, rgba(250, 250, 250, 0));
}
.tm-specs > div {
  display: grid;
  grid-template-columns: minmax(140px, 0.6fr) minmax(0, 1.4fr);
  gap: var(--tm-s-3);
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--tm-border);
  font-size: var(--tm-fs-small);
}
.tm-specs > div:last-child { border-bottom: 0; }
.tm-specs dt {
  color: var(--tm-text-3);
  font-size: var(--tm-fs-eyebrow); font-weight: 500;
  letter-spacing: var(--tm-tracking-eyebrow); text-transform: uppercase;
}
.tm-specs dd { margin: 0; color: var(--tm-text); }
@media (max-width: 599px) {
  .tm-specs { padding: 4px 16px; }
  .tm-specs > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* Estado y observaciones: panel aparte con checks en círculo (como el icono
   de confianza). Selector doble: base.css quita el padding de las listas. */
.tm-details .tm-notes {
  display: grid; gap: 14px;
  padding: var(--tm-s-3);
  border-radius: var(--tm-radius-card);
  border: 1px solid var(--tm-line);
  background: linear-gradient(180deg, var(--tm-graphite-2) 0%, var(--tm-graphite) 70%);
}
.tm-notes li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; font-size: var(--tm-fs-small); }
.tm-notes svg {
  width: 24px; height: 24px; padding: 5px;
  border: 1px solid var(--tm-line-strong); border-radius: 50%;
  color: var(--tm-blue);
}
@media (max-width: 599px) { .tm-details .tm-notes { padding: var(--tm-s-2); } }

/* ---- 4. SEÑALES DE CONFIANZA ------------------------------------------- */
/* Banda .tm-section--slate compartida con la Home (components.css): foco de
   luz, filete blanco que se dibuja al aparecer, icono con hover. Aquí solo
   las cuatro columnas. */
.tm-piece__trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--tm-s-4);
}
.tm-piece__trust .tm-trust__item h3 { font-size: 22px; }
@media (max-width: 1023px) { .tm-piece__trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tm-s-5) var(--tm-s-4); } }
@media (max-width: 599px)  { .tm-piece__trust { grid-template-columns: minmax(0, 1fr); } }

/* ---- 5. RELACIONADAS ----------------------------------------------------- */
/* Sobre Noche, como la grilla del Catálogo; tarjeta = TM.productCard() */

/* ---- Frase ancla bajo las relacionadas ---------------------------------- */
.tm-piece__anchor {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding-block: 0 var(--tm-s-6);
  text-align: center;
  font-size: 14px;
  color: var(--tm-text-muted);
}
.tm-piece__anchor::before,
.tm-piece__anchor::after { content: ""; flex: 0 0 24px; height: 1px; background: var(--tm-line-strong); }
@media (max-width: 599px) { .tm-piece__anchor::before, .tm-piece__anchor::after { display: none; } }

/* ---- 6. MOVIMIENTO (2026-11-09) ---------------------------------------- */
/* Mismas reglas que Home y Catálogo (components.css, "Movimiento
   compartido"): solo opacity/transform, 700 ms en entradas, nada sin
   .tm-motion (movimiento reducido o sin JS = todo quieto y visible).
   - Al cargar: breadcrumb aparece; la galería se asienta (como la vitrina
     del hero) y la información sube escalonada 90 ms.
   - Al hacer scroll: detalles, confianza (con el filete que se dibuja),
     relacionadas (TM.motion.reveal) y frase ancla. */
.tm-motion .tm-piece__crumbs { animation: tm-fade 700ms var(--tm-ease) both; }
.tm-motion .tm-piece__main::before { animation: tm-fade 1400ms var(--tm-ease) both; }
.tm-motion .tm-gallery { animation: tm-settle 900ms var(--tm-ease) 120ms both; }
.tm-motion .tm-piece__info > * { animation: tm-rise 700ms var(--tm-ease) both; }
.tm-motion .tm-piece__info > :nth-child(1) { animation-delay: 180ms; }
.tm-motion .tm-piece__info > :nth-child(2) { animation-delay: 270ms; }
.tm-motion .tm-piece__info > :nth-child(3) { animation-delay: 360ms; }
.tm-motion .tm-piece__info > :nth-child(4) { animation-delay: 450ms; }
.tm-motion .tm-piece__facts::before { transform-origin: left; animation: tm-draw 900ms var(--tm-ease) 360ms both; }

/* ---- ESTADO: PIEZA NO ENCONTRADA ---------------------------------------- */
.tm-piece-missing { padding-bottom: var(--tm-s-6); }
.tm-piece-missing .tm-empty h1 { font-size: var(--tm-fs-h3); }