/* =========================================================================
   TIME MASTER · Componentes globales
   Header · Footer · Tarjeta de producto · Placeholder de imagen · Formulario
   "Me interesa". Requiere tokens.css y base.css.
   ========================================================================= */

/* =========================================================================
   HEADER · barra flotante Grafito translúcida, sin mega-menús (DS v2 §8)
   ========================================================================= */
.tm-header {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  z-index: 50;
  margin-top: 16px;
}
.tm-header__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* logo | nav centrada | acciones */
  align-items: center;
  gap: var(--tm-s-3);
  min-height: 64px;
  padding: 0 12px 0 24px;
  background: rgba(14, 14, 15, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius-card);
}
.tm-logo {
  justify-self: start;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--tm-font-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}
/* Pequeño sello azul acero: único detalle de acento en el header */
.tm-logo__mark {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--tm-champagne);
  transform: translateY(-3px);
}
.tm-nav ul { display: flex; gap: var(--tm-s-4); }
.tm-nav a {
  position: relative;
  color: var(--tm-text-2);
  font-size: var(--tm-fs-label);
  font-weight: 500;
  letter-spacing: var(--tm-tracking-label);
  text-transform: uppercase;
  padding-block: 8px;
  transition: color var(--tm-dur) var(--tm-ease);
}
.tm-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px;
  height: 1px; background: var(--tm-champagne);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--tm-dur) var(--tm-ease);
}
.tm-nav a:hover,
.tm-nav a[aria-current="page"] { color: var(--tm-text); }
.tm-nav a:hover::after { transform: scaleX(1); }
/* Estado activo (pulido 2026-11-09): la sección actual se lee de un vistazo.
   Texto blanco + subrayado fijo de 1 px + punto plata sobre la palabra,
   el mismo punto del logo y del menú móvil. Sin fondo ni color nuevo. */
.tm-nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--tm-text); }
.tm-nav a[aria-current="page"]::before {
  content: ""; position: absolute; left: 50%; top: -4px;
  width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
  background: var(--tm-text);
  box-shadow: 0 0 0 3px rgba(250, 250, 250, 0.10);
}

.tm-header__actions { justify-self: end; display: flex; align-items: center; gap: 4px; }
.tm-icon-btn {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: transparent; cursor: pointer;
  transition: background-color var(--tm-dur) var(--tm-ease);
}
.tm-icon-btn:hover { background: var(--tm-graphite-2); }
.tm-icon-btn svg { width: 18px; height: 18px; }
.tm-header__cta { margin-left: 8px; }
.tm-menu-btn { display: none; }
/* Icono hamburguesa ↔ cerrar según el estado del panel */
.tm-menu-btn__open, .tm-menu-btn__close { display: inline-grid; }
.tm-menu-btn__close, .is-menu-open .tm-menu-btn__open { display: none; }
.is-menu-open .tm-menu-btn__close { display: inline-grid; }

/* Panel móvil: lista simple, sin mega-menú */
.tm-mobile-nav {
  margin-top: 8px;
  padding: var(--tm-s-2) var(--tm-s-3) var(--tm-s-3);
  background: var(--tm-graphite);
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius-card);
}
.tm-mobile-nav ul { display: grid; }
/* Solo los enlaces de la lista (no el botón ni el teléfono) */
.tm-mobile-nav li > a {
  display: block; padding: 14px 0;
  border-bottom: 1px solid var(--tm-border);
  font-family: var(--tm-font-display); font-size: 22px;
  transition: color var(--tm-dur) var(--tm-ease);
}
.tm-mobile-nav li > a:hover { color: var(--tm-champagne-hover); }
/* Estado activo en móvil: mismo dorado que el subrayado de desktop */
.tm-mobile-nav li > a[aria-current="page"] {
  display: flex; align-items: center; gap: 12px;
}
.tm-mobile-nav li > a[aria-current="page"]::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tm-champagne);
}
.tm-mobile-nav .tm-btn { margin-top: var(--tm-s-3); }
.tm-mobile-nav__contact { margin-top: var(--tm-s-2); font-size: 14px; color: var(--tm-text-muted); text-align: center; }
.tm-mobile-nav__contact a { white-space: nowrap; }

/* Búsqueda: campo desplegable bajo la barra */
.tm-search {
  margin-top: 8px;
  display: flex; align-items: center; gap: 12px;
  padding: 0 8px 0 20px;
  background: var(--tm-surface);
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius-pill);
  box-shadow: var(--tm-shadow-soft);
}
.tm-search svg { width: 18px; height: 18px; flex: none; color: var(--tm-text-muted); }
.tm-search input {
  flex: 1; min-width: 0; height: 56px;
  border: 0; background: transparent; outline: none; font-size: 16px;
}

@media (max-width: 1023px) {
  .tm-header__bar { grid-template-columns: 1fr auto; padding-left: 20px; }
  .tm-nav, .tm-header__cta { display: none; }
  .tm-menu-btn { display: inline-grid; }
}

/* =========================================================================
   FOOTER · Negro TM; columnas Ayuda / Colección / Time Master
   ========================================================================= */
.tm-footer {
  background: var(--tm-black);
  border-top: 1px solid var(--tm-line);
  color: var(--tm-on-dark);
  padding-block: var(--tm-s-6) var(--tm-s-4);
}
/* Franja de garantías · pulido 2026-11-09: cada promesa con su icono en
   anillo (el mismo gesto que las señales de confianza), título blanco y
   texto Niebla; la franja se separa del resto con un filete de horizonte. */
.tm-footer__assurances {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--tm-s-3) var(--tm-s-4);
}
/* Doble clase: ul[role="list"] (base.css) anula el padding de una sola */
.tm-footer .tm-footer__assurances { padding-bottom: var(--tm-s-5); }
.tm-footer__assurances::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 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-footer__assurances li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; font-size: 14px; line-height: 1.55; color: var(--tm-on-dark-muted); }
.tm-footer__assurances svg {
  width: 40px; height: 40px; padding: 10px; flex: none;
  border: 1px solid rgba(214, 214, 214, 0.32); border-radius: 50%;
  background: rgba(250, 250, 250, 0.03);
  color: var(--tm-text);
}
.tm-footer__assurances strong { display: block; margin: 1px 0 2px; color: var(--tm-on-dark); font-weight: 500; }

.tm-footer__main {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: var(--tm-s-5);
  padding-block: var(--tm-s-6) var(--tm-s-5);
}
/* Marca: logo serif grande → frase → contacto en dos grupos con etiqueta */
.tm-footer__brand { display: grid; gap: var(--tm-s-3); align-content: start; }
.tm-footer__brand .tm-logo { font-size: 34px; }
.tm-footer__brand > p { color: var(--tm-text-2); font-size: 15px; max-width: 36ch; }

/* Contacto concierge */
.tm-concierge { display: grid; gap: var(--tm-s-3); font-size: 14px; color: var(--tm-on-dark-muted); font-style: normal; }
.tm-concierge__group { display: grid; gap: 4px; align-content: start; max-width: 30ch; }
.tm-concierge__label {
  margin-bottom: 4px;
  font-size: var(--tm-fs-eyebrow); font-weight: 500;
  letter-spacing: var(--tm-tracking-eyebrow); text-transform: uppercase;
  color: var(--tm-text-3);
}
.tm-concierge a { color: var(--tm-on-dark); justify-self: start; transition: color var(--tm-dur) var(--tm-ease); }
.tm-concierge a:hover { color: #FFFFFF; }
.tm-concierge__phone { font-family: var(--tm-font-display); font-size: 22px; line-height: 1.2; font-variant-numeric: lining-nums; }

/* Títulos de columna: eyebrow con filete (firma de casa, como el hero) */
.tm-footer h3 {
  display: flex; align-items: center; gap: 10px;
  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);
  margin-bottom: var(--tm-s-3);
}
.tm-footer h3::before { content: ""; width: 16px; height: 1px; background: var(--tm-text-3); flex: none; }
.tm-footer__col ul { display: grid; gap: 12px; font-size: 14px; }
.tm-footer__col a { color: var(--tm-text-2); transition: color var(--tm-dur) var(--tm-ease); }
.tm-footer__col a:hover { color: var(--tm-text); }
/* "Agendar visita" es un <button class="tm-textlink tm-textlink--plain">: se ve como los enlaces */
.tm-footer__col .tm-textlink { color: var(--tm-text-2); }
.tm-footer__col .tm-textlink:hover { color: var(--tm-text); }
.tm-footer__subhead { margin-top: var(--tm-s-5); }
.tm-footer__tbd { color: var(--tm-on-dark-muted); }
.tm-footer__tbd .tm-tbd { white-space: nowrap; }

/* Suscripción discreta: una fila propia sobre la barra legal */
.tm-subscribe {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px var(--tm-s-4);
  padding-block: var(--tm-s-3);
  border-top: 1px solid var(--tm-border-dark);
}
.tm-subscribe__ok { flex-basis: 100%; }
.tm-subscribe p { font-size: 13px; color: var(--tm-on-dark-muted); }
.tm-subscribe__row {
  /* Suscripción en píldora (input + botón dentro), como Allbirds */
  display: flex; align-items: center;
  padding: 0 6px 0 20px;
  border: 1px solid var(--tm-line-strong);
  border-radius: var(--tm-radius-pill);
  background: var(--tm-graphite);
  max-width: 380px;
  width: 100%;
  transition: border-color var(--tm-dur) var(--tm-ease);
}
.tm-subscribe__row:focus-within { border-color: var(--tm-blue); box-shadow: var(--tm-focus-ring); }
.tm-subscribe input {
  flex: 1; min-width: 0; height: 48px;
  background: transparent; border: 0; outline: none;
  color: var(--tm-on-dark); font-size: 14px;
}
.tm-subscribe input::placeholder { color: var(--tm-on-dark-muted); }
.tm-subscribe button {
  height: 36px; padding: 0 16px; border-radius: var(--tm-radius-pill);
  background: var(--tm-text); border: 0; cursor: pointer; color: var(--tm-night);
  font-size: 11px; font-weight: 500; letter-spacing: var(--tm-tracking-label); text-transform: uppercase;
}
.tm-subscribe button:hover { background: #FFFFFF; }
.tm-subscribe__ok { font-size: 13px; color: var(--tm-champagne); }

.tm-footer__legal {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--tm-s-2) var(--tm-s-4);
  padding-top: var(--tm-s-3);
  border-top: 1px solid var(--tm-border-dark);
  font-size: 12px; color: var(--tm-on-dark-muted);
}
.tm-footer__legal ul { display: flex; flex-wrap: wrap; gap: var(--tm-s-3); }
/* Nota legal: medida corta para que se lea como una línea de pie, no un párrafo */
.tm-footer__legal-text { flex: 1 1 420px; max-width: 72ch; margin: 0; line-height: 1.6; }
/* Cierre: "© 2026 Time Master. Aviso de privacidad", última línea del pie, centrada */
.tm-footer__copy {
  flex-basis: 100%; margin: var(--tm-s-2) 0 0; padding-top: var(--tm-s-3);
  border-top: 1px solid var(--tm-border-dark);
  text-align: center; letter-spacing: 0.04em;
}
/* Redes: icono fino + nombre (sin URL a la vista) */
.tm-footer__social { display: inline-flex; align-items: center; gap: 10px; }
.tm-footer__social svg { width: 18px; height: 18px; flex: none; }
.tm-footer__legal a { transition: color var(--tm-dur) var(--tm-ease); }
.tm-footer__legal a:hover,
.tm-footer__legal a[aria-current="page"] { color: var(--tm-on-dark); }
.tm-footer__legal a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--tm-text-3); text-underline-offset: 4px; }

@media (max-width: 1023px) {
  .tm-footer__assurances { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tm-footer__main { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: var(--tm-s-5); }
  .tm-footer__brand { grid-column: 1 / -1; padding-bottom: var(--tm-s-2); }
}
@media (max-width: 599px) {
  .tm-footer__assurances { grid-template-columns: minmax(0, 1fr); }
  .tm-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================================
   VITRINA DE PRODUCTO (DS v2 §5.1)
   Porcelana 4:5, foto COMPLETA y centrada al ~78 % del alto, con
   mix-blend-mode: multiply para que los renders de fondo blanco se fundan
   con la vitrina y el reloj "flote". Si no hay foto o falla, se ve la
   esfera dibujada (TM.watchPlaceholder()); se oculta cuando la foto carga.
   ========================================================================= */
.tm-media {
  position: relative;
  overflow: hidden;
  /* Vitrina iluminada (2026-11-09): luz cenital suave, como un foco de
     vitrina. El blanco de los renders se funde igual por el multiply. */
  background: radial-gradient(120% 75% at 50% 0%, #FFFFFF 0%, var(--tm-porcelain) 62%);
  background-color: var(--tm-porcelain);
  isolation: isolate; /* el multiply de la foto se queda dentro de la vitrina */
  aspect-ratio: 4 / 5;
  max-width: 100%;
}
/* Sombra de apoyo: elipse difusa bajo la pieza para que "se pose" en la
   vitrina. Va debajo de la foto; el multiply la deja ver en el blanco. */
.tm-media::after {
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 7%; height: 7%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.11), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.tm-media--dark::after, .tm-media--cover::after { display: none; }
.tm-media > .tm-media__ph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: #8E8E92; /* trazo gris sobre porcelana */
}
.tm-media.is-loaded > .tm-media__ph { display: none; }
.tm-media > .tm-media__ph svg { width: 58%; height: auto; opacity: 0.9; }
.tm-media > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 11% 8%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform var(--tm-dur-slow) var(--tm-ease);
}
.tm-media > img { z-index: 1; }      /* encima de la sombra de apoyo */
.tm-media > .tm-badge { z-index: 2; } /* el badge siempre sobre la foto */
.tm-media > img.is-broken { display: none; } /* deja ver el placeholder */
/* Variante para fotos de fondo oscuro o de ambiente: a sangre, sin mezcla */
.tm-media--dark { background: var(--tm-graphite); }
.tm-media--dark > img, .tm-media--cover > img { padding: 0; object-fit: cover; mix-blend-mode: normal; }

/* =========================================================================
   TARJETA DE PRODUCTO (DS v2 §6)
   Grafito · vitrina porcelana 4:5 · máx. 1 badge · marca MAYÚSCULAS ·
   modelo serif · referencia gris · "Conforme a oferta vigente" · CTA texto.
   ========================================================================= */
.tm-card {
  display: flex; flex-direction: column;
  /* Superficie con un leve degradado vertical: menos plana que un relleno liso */
  background: linear-gradient(180deg, var(--tm-graphite-2) 0%, var(--tm-surface) 55%);
  border-radius: var(--tm-radius-card);
  overflow: hidden;
  border: 1px solid var(--tm-border);
  transition: border-color var(--tm-dur) var(--tm-ease), transform var(--tm-dur-slow) var(--tm-ease), box-shadow var(--tm-dur-slow) var(--tm-ease);
}
/* Hover (2026-11-09): elevación de 4 px y sombra larga y difusa; la foto
   crece un 3 %. Solo transform/opacity/sombra: no reflowea la grilla. */
@media (hover: hover) {
  .tm-card:hover {
    border-color: var(--tm-border-strong);
    transform: translateY(var(--tm-lift));
    box-shadow: var(--tm-shadow-lift);
  }
  .tm-card:hover .tm-media > img { transform: scale(1.03); }
}
.tm-card:focus-within { border-color: var(--tm-border-strong); }
.tm-card .tm-media { margin: 12px 12px 0; border-radius: var(--tm-radius-media); }
/* Vitrina oscura de la tarjeta (2026-11-09, todas las tarjetas de producto:
   Catálogo, Home y relacionadas de la Ficha; las genera TM.productCard).
   - Fondo negro sólido (--tm-black), el tono más oscuro de Obsidiana.
   - La foto se ve COMPLETA (contain), centrada en ambos ejes y con aire:
     ocupa como máximo el 84 % del ancho y del alto de la vitrina.
   - Las fotos de Wix traen fondo blanco o claro. Sobre negro, multiply
     volvería negra toda la foto, así que se usa otra técnica: la caja de
     la <img> se ajusta a la proporción real de cada foto (width/height
     auto + max-*) y una máscara radial funde sus bordes hacia el negro.
     El blanco del estudio queda como un halo de luz detrás del reloj, sin
     recuadro ni bordes rectos, sea la foto cuadrada, vertical u horizontal. */
/* Pulido 2026-11-09: el MISMO tratamiento de foto vale para toda pieza
   del sitio (tarjeta, vitrina del hero de la Home, imagen principal y
   miniaturas de la Ficha, y la miniatura del flujo "Me interesa"), para
   que un reloj se vea igual en todas partes. Solo cambian el tamaño
   máximo de la foto (más presencia en hero y Ficha) y el marco. */
:is(.tm-card .tm-media, .tm-hero__frame .tm-media, .tm-gallery__main, .tm-gallery__thumb .tm-media) { background: var(--tm-black); }
:is(.tm-card .tm-media, .tm-hero__frame .tm-media, .tm-gallery__main, .tm-gallery__thumb .tm-media)::after { display: none; } /* la sombra de apoyo no se ve sobre negro */
:is(.tm-card .tm-media, .tm-hero__frame .tm-media, .tm-gallery__main, .tm-gallery__thumb .tm-media, .tm-interest-piece__media) > img {
  inset: 0; margin: auto;
  width: auto; height: auto;
  max-width: 84%; max-height: 84%;
  padding: 0;
  object-fit: contain; object-position: 50% 50%;
  mix-blend-mode: normal;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 74%, rgba(0, 0, 0, 0.55) 90%, rgba(0, 0, 0, 0) 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 74%, rgba(0, 0, 0, 0.55) 90%, rgba(0, 0, 0, 0) 100%);
}
/* Pulido final (2026-11-09): aire interior FIJO y consistente en vez de
   un porcentaje, para que la foto respire igual en una tarjeta de 160 px
   que en una de 400 px. Tarjetas: 16 px (12 px en móvil). Pieza
   protagonista (hero de la Home e imagen principal de la Ficha): 20 px
   (16 px en móvil). Tokens --tm-media-pad / --tm-media-pad-lg. */
.tm-card .tm-media > img {
  max-width: calc(100% - 2 * var(--tm-media-pad));
  max-height: calc(100% - 2 * var(--tm-media-pad));
}
:is(.tm-hero__frame .tm-media, .tm-gallery__main) > img {
  max-width: calc(100% - 2 * var(--tm-media-pad-lg));
  max-height: calc(100% - 2 * var(--tm-media-pad-lg));
}
/* Badge de estado: punto azul acero; "Reservada" en gris */
.tm-badge__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--tm-text); box-shadow: 0 0 0 3px rgba(250, 250, 250, 0.16); flex: none; }
.tm-badge--muted .tm-badge__dot { background: var(--tm-text-3); box-shadow: 0 0 0 3px rgba(126, 126, 131, 0.18); }
/* Vitrina de la tarjeta (2026-11-09, Catálogo): filo interior apenas visible
   para que la porcelana no "sangre" sobre el grafito, y un velo de luz
   cenital que se enciende al pasar el cursor (solo opacity). */
.tm-card .tm-media { box-shadow: inset 0 0 0 1px rgba(250, 250, 250, 0.06); }
.tm-card .tm-media::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.07), rgba(255, 255, 255, 0));
  opacity: 0;
  transition: opacity var(--tm-dur-slow) var(--tm-ease);
}
@media (hover: hover) { .tm-card:hover .tm-media::before { opacity: 1; } }
/* Pieza reservada: la foto un punto más tenue; el badge claro lo explica */
.tm-card.is-reserved .tm-media > img { opacity: 0.82; }
/* La marca se ilumina con el hover de la tarjeta (feedback ligero) */
.tm-card__brand { transition: color var(--tm-dur) var(--tm-ease); }
@media (hover: hover) { .tm-card:hover .tm-card__brand { color: var(--tm-text); } }

.tm-card__body {
  display: flex; flex-direction: column; flex: 1;
  gap: 6px;
  padding: 18px 20px 20px;
}
.tm-card__body--head { flex: none; padding-bottom: 0; }
.tm-card__brand {
  font-size: var(--tm-fs-eyebrow); font-weight: 500;
  letter-spacing: var(--tm-tracking-eyebrow); text-transform: uppercase;
  color: var(--tm-text-muted);
}
.tm-card__model {
  font-family: var(--tm-font-display);
  font-size: var(--tm-fs-model); line-height: 1.15; font-weight: 500;
}
.tm-card__model a::after { content: ""; position: absolute; inset: 0; } /* toda la tarjeta lleva a la ficha */
.tm-card { position: relative; }
.tm-card__link-area { position: static; }
.tm-card__ref { font-size: 13px; color: var(--tm-text-muted); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.tm-card__meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 12px;
  margin-top: auto;
  padding-top: var(--tm-s-2);
  border-top: 1px solid var(--tm-border);
  font-size: 14px;
}
.tm-card__price { font-weight: 500; font-variant-numeric: tabular-nums; }
.tm-card__price--on-request { font-size: 12px; font-weight: 400; color: var(--tm-text-3); }
.tm-card__cta { position: relative; z-index: 1; padding-block: 6px; } /* por encima del enlace de toda la tarjeta */
@media (max-width: 599px) {
  .tm-card .tm-media { margin: 8px 8px 0; }
  .tm-card__body { padding: 14px 14px 16px; }
}

/* =========================================================================
   FLUJO "ME INTERESA" (diálogo modal · interest.js)
   Paso 1 formulario → paso 2 confirmación, en el mismo <dialog>.
   Elevado 2026-11-09 con los patrones de Home, Catálogo y Ficha:
   marco con filo de luz arriba y foco radial (como la galería de la Ficha),
   eyebrow con filete, campos 52 px con foco plata y error sereno, botón de
   envío 56 px (como el panel CTA de la Ficha) y entrada escalonada.
   Movimiento: solo opacity/transform, 200–400 ms. Como el modal vive en
   TODAS las páginas (también las que no cargan motion.js), su animación
   depende de prefers-reduced-motion y no de .tm-motion.
   ========================================================================= */
.tm-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border-radius: 20px;
  /* Marco de vitrina: velo de luz arriba que se apaga hacia Obsidiana profunda */
  background:
    radial-gradient(90% 38% at 50% 0%, rgba(250, 250, 250, 0.06), rgba(250, 250, 250, 0) 70%),
    linear-gradient(180deg, rgba(250, 250, 250, 0.03), rgba(250, 250, 250, 0) 30%),
    var(--tm-slate-deep);
  border: 1px solid rgba(250, 250, 250, 0.10);
  color: var(--tm-text);
  box-shadow: 0 60px 120px -60px rgba(250, 250, 250, 0.10), 0 40px 80px -30px rgba(0, 0, 0, 0.9);
  overscroll-behavior: contain;
}
/* Filo de luz superior (mismo trazo que el horizonte del hero) */
.tm-dialog::before {
  content: ""; position: absolute; top: 0; left: 10%; right: 10%; 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-dialog::backdrop { background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

.tm-dialog__inner { padding: var(--tm-s-5) var(--tm-s-5) var(--tm-s-4); }
.tm-interest__step { display: grid; gap: var(--tm-s-3); }
.tm-interest__step[hidden] { display: none; }
.tm-interest__step:focus { outline: none; }
@media (max-width: 599px) {
  .tm-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 18px; }
  .tm-dialog__inner { padding: var(--tm-s-5) var(--tm-s-3) var(--tm-s-3); }
}

/* Cerrar: círculo con borde fino; al pasar el cursor el aspa gira 90° */
.tm-dialog__close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  border: 1px solid var(--tm-line);
  color: var(--tm-text-2);
  transition: background-color var(--tm-dur) var(--tm-ease), border-color var(--tm-dur) var(--tm-ease), color var(--tm-dur) var(--tm-ease);
}
.tm-dialog__close svg { transition: transform var(--tm-dur-slow) var(--tm-ease); }
.tm-dialog__close:hover { border-color: var(--tm-line-strong); color: var(--tm-text); }
.tm-dialog__close:hover svg { transform: rotate(90deg); }
.tm-dialog__close:focus-visible { outline: none; box-shadow: var(--tm-focus-ring-strong); }

/* Encabezado: eyebrow con filete (firma de casa) → título serif → entrada */
/* Aviso de privacidad del formulario: misma vitrina, solo texto */
.tm-dialog--notice { width: min(520px, calc(100vw - 32px)); }
.tm-notice__text { margin: var(--tm-s-3) 0 0; font-size: 14px; line-height: 1.7; color: var(--tm-text-2); }
.tm-notice__text a { color: var(--tm-text); text-decoration: underline; text-decoration-color: var(--tm-text-3); text-underline-offset: 3px; }
.tm-notice__ok { margin-top: var(--tm-s-4); }
.tm-dialog__head { display: grid; gap: 10px; padding-right: 40px; }
.tm-dialog__head .tm-eyebrow { display: inline-flex; align-items: center; gap: 12px; color: var(--tm-text-2); }
.tm-dialog__head .tm-eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--tm-text-3); }
.tm-dialog__head h2 { font-size: 34px; line-height: 1.1; letter-spacing: -0.005em; }
.tm-dialog__head p { font-size: 15px; line-height: 1.6; max-width: 46ch; }
@media (max-width: 599px) { .tm-dialog__head h2 { font-size: 28px; } }

/* Resumen de la pieza: miniatura en vitrina negra (como la tarjeta) +
   marca / modelo / ref. Se usa igual en el formulario y en la confirmación. */
.tm-interest-piece {
  display: flex; align-items: center; gap: var(--tm-s-2);
  padding: 12px 16px 12px 12px;
  background: linear-gradient(180deg, rgba(250, 250, 250, 0.035), rgba(250, 250, 250, 0.01));
  border: 1px solid var(--tm-line);
  border-radius: var(--tm-radius-media);
}
.tm-interest-piece__media {
  position: relative; flex: none;
  width: 64px; aspect-ratio: 4 / 5;
  border-radius: 8px; overflow: hidden;
  /* Misma vitrina negra que la tarjeta (pulido 2026-11-09); la foto toma la
     regla compartida de máscara radial de más arriba */
  background: var(--tm-black);
  box-shadow: inset 0 0 0 1px rgba(250, 250, 250, 0.08), 0 10px 18px -10px rgba(0, 0, 0, 0.9);
}
.tm-interest-piece__media img { position: absolute; z-index: 1; }
.tm-interest-piece__ph { position: absolute; inset: 6px; color: #8E8E92; opacity: .8; }
.tm-interest-piece__ph svg { width: 100%; height: 100%; }
.tm-interest-piece__text { display: grid; gap: 3px; min-width: 0; }
.tm-interest-piece__brand {
  font-size: var(--tm-fs-eyebrow); font-weight: 500; letter-spacing: var(--tm-tracking-eyebrow); text-transform: uppercase;
  color: var(--tm-text-3);
}
.tm-interest-piece__model { font-family: var(--tm-font-display); font-size: 22px; line-height: 1.15; font-weight: 500; }
.tm-interest-piece__ref { font-size: 13px; color: var(--tm-text-muted); font-variant-numeric: tabular-nums; }

/* ---- Campos ----------------------------------------------------------- */
.tm-form { display: grid; gap: 14px; }
.tm-field { position: relative; display: grid; gap: 6px; }
.tm-field[hidden] { display: none; }
.tm-field input,
.tm-field textarea {
  width: 100%;
  height: var(--tm-input-h);
  padding: 22px 16px 8px;
  border: 1px solid var(--tm-line);
  border-radius: var(--tm-radius-input);
  /* Pulido 2026-11-09: campo "engastado" (un tono más hondo que la ventana,
     sombra interior), el mismo tratamiento que los filtros del Catálogo */
  background: var(--tm-night);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
  color: var(--tm-text);
  font-size: 16px; /* 16px evita zoom en iOS */
  outline: none;
  caret-color: var(--tm-text);
  transition: border-color var(--tm-dur) var(--tm-ease), box-shadow var(--tm-dur) var(--tm-ease), background-color var(--tm-dur) var(--tm-ease);
}
.tm-field textarea { height: 112px; min-height: 88px; resize: vertical; padding-top: 28px; line-height: 1.5; }
/* Autorrelleno del navegador: sin el fondo amarillo/azul, mismo campo oscuro */
.tm-field input:-webkit-autofill {
  -webkit-text-fill-color: var(--tm-text);
  -webkit-box-shadow: 0 0 0 40px var(--tm-night) inset;
  transition: background-color 9999s, border-color var(--tm-dur) var(--tm-ease);
}
.tm-field label {
  position: absolute; left: 17px; top: 16px;
  font-size: 15px; color: var(--tm-text-3);
  pointer-events: none;
  transform-origin: left top;
  transition: transform var(--tm-dur) var(--tm-ease), color var(--tm-dur) var(--tm-ease);
  white-space: nowrap; max-width: calc(100% - 34px); overflow: hidden; text-overflow: ellipsis;
}
/* Etiqueta flotante: sube cuando hay foco o contenido */
.tm-field input:focus + label,
.tm-field input:not(:placeholder-shown) + label,
.tm-field textarea:focus + label,
.tm-field textarea:not(:placeholder-shown) + label { transform: translateY(-9px) scale(0.78); color: var(--tm-text-2); }
/* Hover: el borde se aclara un paso */
@media (hover: hover) {
  .tm-field input:hover,
  .tm-field textarea:hover { border-color: var(--tm-line-strong); }
}
/* Foco: borde plata, halo suave y superficie un tono más alta */
.tm-field input:focus,
.tm-field textarea:focus {
  border-color: var(--tm-blue);
  background-color: #0B0B0C;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 0 4px rgba(214, 214, 214, 0.12);
}
.tm-field input:focus + label,
.tm-field textarea:focus + label { color: var(--tm-text); }
/* Ayuda bajo el campo; se oculta cuando aparece el error */
.tm-field__hint { padding-left: 2px; font-size: 13px; color: var(--tm-text-3); }
.tm-field.is-invalid .tm-field__hint { display: none; }
/* Error: borde coral, tinte mínimo y una línea con punto de estado. Sin
   sacudidas: el mensaje aparece con un fade + 4 px. */
.tm-field.is-invalid input,
.tm-field.is-invalid textarea { border-color: var(--tm-error); background-color: rgba(240, 138, 126, 0.04); }
.tm-field.is-invalid input:focus,
.tm-field.is-invalid textarea:focus { box-shadow: 0 0 0 4px rgba(240, 138, 126, 0.14); }
.tm-field.is-invalid input + label,
.tm-field.is-invalid textarea + label { color: var(--tm-error); }
.tm-field__error {
  display: flex; align-items: baseline; gap: 8px;
  padding-left: 2px; font-size: 13px; line-height: 1.45; color: var(--tm-error);
}
.tm-field__error[hidden] { display: none; }
.tm-field__error::before {
  content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; transform: translateY(-2px);
}

/* ---- Casilla de aceptación (Aviso de privacidad) ---------------------- */
.tm-check {
  display: grid; grid-template-columns: 20px 1fr; gap: 6px 12px; align-items: start;
  padding-top: 6px;
  font-size: 14px; line-height: 1.5; color: var(--tm-text-2);
}
.tm-check a { color: var(--tm-text); text-decoration: underline; text-decoration-color: var(--tm-text-3); text-underline-offset: 3px; transition: text-decoration-color var(--tm-dur) var(--tm-ease); }
.tm-check a:hover { text-decoration-color: var(--tm-text); }
.tm-check input {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; margin: 1px 0 0;
  border: 1px solid var(--tm-text-3);
  border-radius: 6px;
  background: rgba(250, 250, 250, 0.025);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background-color var(--tm-dur) var(--tm-ease), border-color var(--tm-dur) var(--tm-ease), transform 160ms var(--tm-ease);
}
.tm-check input:hover { border-color: var(--tm-text-2); }
.tm-check input:active { transform: scale(0.92); }
.tm-check input::after {
  content: ""; width: 10px; height: 6px; margin-top: -2px;
  border-left: 1.5px solid var(--tm-night); border-bottom: 1.5px solid var(--tm-night);
  transform: rotate(-45deg) scale(0);
  transition: transform 200ms var(--tm-ease);
}
.tm-check input:checked { background: var(--tm-text); border-color: var(--tm-text); }
.tm-check input:checked::after { transform: rotate(-45deg) scale(1); }
.tm-check input:focus-visible { outline: none; box-shadow: var(--tm-focus-ring-strong); border-color: var(--tm-blue); }
.tm-check label { cursor: pointer; }
.tm-check .tm-field__error { grid-column: 2; }
.tm-check.is-invalid input { border-color: var(--tm-error); }

/* ---- Envío ------------------------------------------------------------ */
/* Botón: píldora clara 56 px (como el panel CTA de la Ficha). Al pasar el
   cursor sube 1 px (base) y gana un halo de luz difuso; la flecha avanza. */
.tm-form .tm-btn[type="submit"] {
  min-height: 56px; margin-top: var(--tm-s-1);
  font-size: 12.5px;
  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), opacity var(--tm-dur) var(--tm-ease);
}
@media (hover: hover) {
  .tm-form .tm-btn[type="submit"]:not([disabled]):hover { box-shadow: 0 14px 34px -14px rgba(250, 250, 250, 0.45); }
}
.tm-form .tm-btn[type="submit"]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--tm-slate-deep), 0 0 0 5px var(--tm-blue); }
.tm-btn__icon { display: inline-flex; width: 16px; height: 16px; transition: transform var(--tm-dur) var(--tm-ease), opacity var(--tm-dur) var(--tm-ease); }
.tm-btn__icon svg { width: 16px; height: 16px; }
.tm-btn:not([disabled]):hover .tm-btn__icon { transform: translateX(4px); }
/* Enviando: la flecha se apaga y aparece un anillo que gira (solo transform) */
.tm-btn[aria-busy="true"] .tm-btn__icon { display: none; }
.tm-btn[aria-busy="true"]::after {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid currentColor; border-right-color: transparent;
  animation: tm-spin 800ms linear infinite;
}
@keyframes tm-spin { to { transform: rotate(360deg); } }
.tm-form .tm-btn[disabled] { opacity: .9; transform: none; }

.tm-form__alert {
  padding: 12px 16px;
  border: 1px solid rgba(240, 138, 126, 0.24);
  border-radius: var(--tm-radius-input);
  background: var(--tm-error-bg);
  color: var(--tm-error);
  font-size: 14px;
}
/* Notas de confianza bajo el botón, separadas por un filo de luz */
.tm-form__secure {
  position: relative;
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 4px; padding-top: 18px;
  font-size: 13px; line-height: 1.55; color: var(--tm-text-2);
}
.tm-form__secure::before {
  content: ""; position: absolute; top: 0; left: 0; right: 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-form__secure svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--tm-blue); }
.tm-form__note { font-size: 12.5px; line-height: 1.6; color: var(--tm-text-3); }
.tm-form__note a { color: var(--tm-text-2); text-underline-offset: 3px; transition: color var(--tm-dur) var(--tm-ease); }
.tm-form__note a:hover { color: var(--tm-text); }

/* ---- Confirmación ----------------------------------------------------- */
/* Encabezado centrado bajo un sello con foco de luz: el momento de éxito
   tiene presencia sin dejar de ser sobrio (plata, sin verde chillón). */
.tm-confirm { justify-items: stretch; }
.tm-confirm > .tm-dialog__head { justify-items: center; text-align: center; padding-right: 0; }
.tm-confirm > .tm-dialog__head h2 { font-size: 40px; }
.tm-confirm > .tm-dialog__head p { margin-inline: auto; }
.tm-confirm > .tm-dialog__head .tm-eyebrow::after { content: ""; width: 24px; height: 1px; background: var(--tm-text-3); }
@media (max-width: 599px) { .tm-confirm > .tm-dialog__head h2 { font-size: 32px; } }

.tm-confirm__seal {
  position: relative; isolation: isolate; justify-self: center;
  width: 68px; height: 68px; margin-top: 4px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 30%, rgba(250, 250, 250, 0.14), rgba(250, 250, 250, 0.03) 70%);
  border: 1px solid rgba(250, 250, 250, 0.38);
  color: var(--tm-text);
  box-shadow: 0 0 0 8px rgba(250, 250, 250, 0.03);
}
/* Foco radial detrás del sello (como la luz de vitrina) */
.tm-confirm__seal::before {
  content: ""; position: absolute; inset: -60px; z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(250, 250, 250, 0.09), rgba(250, 250, 250, 0));
}
/* Anillo que se expande una sola vez al aparecer (ver animaciones) */
.tm-confirm__seal::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(250, 250, 250, 0.4); opacity: 0;
}
.tm-confirm__seal svg { width: 26px; height: 26px; stroke-width: 1.6; }

/* Pieza + folio en un solo bloque, superficie Grafito con filo de luz */
.tm-confirm__summary {
  position: relative;
  display: grid; gap: 14px;
  padding: 16px;
  background: var(--tm-graphite);
  border: 1px solid var(--tm-line);
  border-radius: var(--tm-radius-card);
}
.tm-confirm__summary::before {
  content: ""; position: absolute; top: -1px; left: 16px; right: 16px; 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-confirm__summary .tm-interest-piece { padding: 0; background: none; border: 0; }
.tm-confirm__summary > div:first-child:empty { display: none; }
.tm-confirm__summary > div:first-child:not(:empty) + .tm-confirm__folio { padding-top: 14px; border-top: 1px solid var(--tm-border); }
.tm-confirm__folio { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding-inline: 4px; }
.tm-confirm__folio span {
  font-size: var(--tm-fs-eyebrow); font-weight: 500; letter-spacing: var(--tm-tracking-eyebrow); text-transform: uppercase;
  color: var(--tm-text-3);
}
.tm-confirm__folio strong { font-size: 18px; letter-spacing: 0.08em; }
.tm-confirm__asked { display: grid; gap: 4px; padding: 4px; font-size: 15px; }
.tm-confirm__asked span {
  font-size: var(--tm-fs-eyebrow); font-weight: 500; letter-spacing: var(--tm-tracking-eyebrow); text-transform: uppercase;
  color: var(--tm-text-3);
}

/* Qué sigue: numeración serif con un filete vertical que une los pasos
   (mismo recurso que los pasos de la Home) */
.tm-confirm__next { display: grid; gap: 14px; }
.tm-confirm__next h3 { font-size: 24px; }
.tm-confirm__next ol { display: grid; gap: 0; }
.tm-confirm__next li { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: baseline; padding-bottom: 14px; }
.tm-confirm__next li:last-child { padding-bottom: 0; }
.tm-confirm__next li:not(:last-child)::after {
  content: ""; position: absolute; left: 11px; top: 28px; bottom: 4px; width: 1px;
  background: linear-gradient(180deg, var(--tm-line-strong), rgba(54, 54, 58, 0));
}
.tm-confirm__next li span { font-family: var(--tm-font-display); font-size: 22px; line-height: 1; color: var(--tm-blue); font-variant-numeric: lining-nums; }
.tm-confirm__next li p { font-size: 15px; line-height: 1.6; color: var(--tm-text-muted); }
.tm-confirm__nopay {
  display: inline-flex; align-items: center; gap: 10px; justify-self: start;
  margin-top: 4px; padding: 8px 14px;
  border: 1px solid var(--tm-line); border-radius: var(--tm-radius-pill);
  font-size: 14px; font-weight: 500;
}
.tm-confirm__nopay::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--tm-success); box-shadow: 0 0 0 3px rgba(125, 196, 155, 0.16);
}

/* Salidas: principal + secundaria a todo el ancho y enlace terciario */
.tm-confirm__actions { display: grid; gap: 12px; justify-items: center; margin-top: 4px; }
.tm-confirm__actions .tm-btn { width: 100%; }
.tm-confirm__actions .tm-btn--primary { min-height: 56px; }
@media (hover: hover) {
  .tm-confirm__actions .tm-btn--primary:hover { box-shadow: 0 14px 34px -14px rgba(250, 250, 250, 0.45); }
}
.tm-confirm__actions .tm-link { margin-top: 8px; }
.tm-confirm__contact { font-size: 14px; color: var(--tm-text-muted); text-align: center; }
.tm-confirm__contact a { color: var(--tm-text); text-decoration: underline; text-decoration-color: var(--tm-text-3); text-underline-offset: 3px; transition: text-decoration-color var(--tm-dur) var(--tm-ease); }
.tm-confirm__contact a:hover { text-decoration-color: var(--tm-text); }

/* ---- Movimiento del flujo -------------------------------------------- */
/* Modal: fondo que se oscurece (fade) y ventana que se asienta (12 px +
   escala 0.985 → 1) en 400 ms. Dentro, cada bloque entra 8 px escalonado
   60 ms. Al pasar a la confirmación, el sello aparece con una escala leve y
   un anillo que se expande una vez; luego el resto en cascada.
   Relleno «backwards»: al terminar no fijan transform, así el hover del
   botón (sube 1 px) sigue funcionando.
   Las animaciones se reinician solas cada vez que el modal o un paso pasa de
   oculto a visible (display: none → visible), sin JS. */
@keyframes tm-modal-in { from { opacity: 0; transform: translateY(12px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes tm-modal-item { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes tm-seal-in { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: none; } }
@keyframes tm-seal-check { from { opacity: 0; transform: scale(0.6) rotate(-12deg); } to { opacity: 1; transform: none; } }
@keyframes tm-seal-ring { 0% { opacity: 0.6; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes tm-msg-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  .tm-dialog[open] { animation: tm-modal-in 400ms var(--tm-ease) backwards; }
  .tm-dialog[open]::backdrop { animation: tm-fade 400ms var(--tm-ease) backwards; }

  /* Paso 1: encabezado, pieza y cada campo del formulario */
  .tm-interest__step > *,
  .tm-form > * { animation: tm-modal-item 400ms var(--tm-ease) backwards; }
  .tm-interest__step > :nth-child(2) { animation-delay: 60ms; }
  .tm-interest__step > :nth-child(3) { animation-delay: 120ms; }
  .tm-interest__step > :nth-child(4) { animation-delay: 180ms; }
  .tm-interest__step > :nth-child(5) { animation-delay: 240ms; }
  .tm-interest__step > :nth-child(6) { animation-delay: 300ms; }
  .tm-interest__step > :nth-child(7) { animation-delay: 360ms; }
  .tm-form > :nth-child(1) { animation-delay: 140ms; }
  .tm-form > :nth-child(2) { animation-delay: 180ms; }
  .tm-form > :nth-child(3) { animation-delay: 220ms; }
  .tm-form > :nth-child(4) { animation-delay: 260ms; }
  .tm-form > :nth-child(n+5) { animation-delay: 300ms; }
  /* El formulario en sí no se anima (lo hacen sus hijos) */
  .tm-interest__step > .tm-form { animation: none; }

  /* Paso 2: el sello primero; el anillo se expande una sola vez */
  .tm-confirm > .tm-confirm__seal { animation: tm-seal-in 400ms var(--tm-ease) backwards; }
  .tm-confirm__seal svg { animation: tm-seal-check 360ms var(--tm-ease) 180ms backwards; }
  .tm-confirm__seal::after { animation: tm-seal-ring 1100ms var(--tm-ease) 260ms both; }
  .tm-confirm > :nth-child(2) { animation-delay: 140ms; }
  .tm-confirm > :nth-child(3) { animation-delay: 220ms; }
  .tm-confirm > :nth-child(4) { animation-delay: 300ms; }
  .tm-confirm > :nth-child(5) { animation-delay: 380ms; }
  .tm-confirm > :nth-child(6) { animation-delay: 440ms; }

  /* Mensajes: error de campo y aviso de envío entran sin sacudidas */
  .tm-field__error:not([hidden]),
  .tm-form__alert:not([hidden]) { animation: tm-msg-in 240ms var(--tm-ease) backwards; }
}
/* Movimiento reducido: el anillo de envío no gira, solo late en opacidad */
@media (prefers-reduced-motion: reduce) {
  .tm-btn[aria-busy="true"]::after { animation: tm-fade 900ms ease-in-out infinite alternate; }
  .tm-dialog__close:hover svg { transform: none; }
}

/* =========================================================================
   BLOQUE CTA FINAL · "¿Buscas una referencia en particular?"
   Compartido por Home y Colección (antes en home.css).
   ========================================================================= */
.tm-final {
  display: grid; gap: var(--tm-s-3); justify-items: center; text-align: center;
  padding: var(--tm-s-6) var(--tm-s-4);
  /* Foco de luz cenital muy tenue (antes solo en la Home; compartido 2026-11-09) */
  background:
    radial-gradient(60% 90% at 50% 0%, rgba(250, 250, 250, 0.06), rgba(250, 250, 250, 0)),
    var(--tm-graphite-2);
  border: 1px solid var(--tm-border);
  border-radius: 24px;
}
.tm-final .tm-lead { margin-inline: auto; }
.tm-final__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--tm-s-2); margin-top: var(--tm-s-1); }
.tm-final__contact { font-size: 14px; color: var(--tm-text-muted); }
@media (max-width: 599px) { .tm-final { padding: var(--tm-s-5) var(--tm-s-3); } }

/* =========================================================================
   BREADCRUMB · Inicio / Colección / Marca / Modelo
   Compartido por coleccion.html y pieza.html.
   ========================================================================= */
.tm-breadcrumb ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: var(--tm-fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tm-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--tm-text-muted);
}
.tm-breadcrumb li + li::before { content: "/"; margin-right: 8px; color: var(--tm-text-3); }
.tm-breadcrumb a { transition: color var(--tm-dur) var(--tm-ease); }
.tm-breadcrumb a:hover { color: var(--tm-ink); }
.tm-breadcrumb [aria-current="page"] { color: var(--tm-ink); }
/* Tramo sin página propia (p. ej. "Términos y políticas"): texto, no enlace */
.tm-breadcrumb li > span:not([aria-current]) { color: var(--tm-text-muted); }


/* =========================================================================
   SEÑAL DE CONFIANZA · icono en círculo + título serif + texto gris
   Compartido por la Home (sección Confianza) y la ficha de producto.
   ========================================================================= */
.tm-trust__item { display: grid; gap: 12px; align-content: start; padding-top: var(--tm-s-3); border-top: 1px solid var(--tm-border); }
.tm-trust__icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--tm-line-strong); background: transparent;
  color: var(--tm-blue);
}
.tm-trust__icon svg { width: 20px; height: 20px; }
.tm-trust__item h3 { font-size: 24px; }
.tm-trust__item p { color: var(--tm-text-muted); font-size: 15px; }

/* Banda de confianza (.tm-section--slate) · compartida por Home y ficha
   (antes en home.css). Foco de luz arriba a la izquierda, filete blanco que
   se dibuja sobre cada señal al aparecer e icono con hover. */
.tm-section--slate { position: relative; isolation: isolate; overflow: clip; }
.tm-section--slate::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -30% 40% 20% -20%;
  background: radial-gradient(closest-side, rgba(250, 250, 250, 0.06), rgba(250, 250, 250, 0));
}
.tm-section--slate .tm-eyebrow,
.tm-section--slate .tm-lead,
.tm-section--slate .tm-trust__item p { color: #C9C9CD; }
.tm-section--slate .tm-trust__item { border-top-color: rgba(250, 250, 250, 0.10); }
/* Filete de luz que se dibuja sobre el borde superior al aparecer (ver §7).
   .tm-trust--lit lleva el mismo gesto a listas fuera de la banda
   (Cómo funciona › Qué incluye, Confianza › Cómo protegemos). */
:is(.tm-section--slate, .tm-trust--lit) .tm-trust__item { position: relative; }
:is(.tm-section--slate, .tm-trust--lit) .tm-trust__item::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 64px; height: 1px;
  background: var(--tm-text);
  transform-origin: left;
}
:is(.tm-section--slate, .tm-trust--lit) .tm-trust__icon {
  border-color: rgba(214, 214, 214, 0.4);
  background: rgba(250, 250, 250, 0.03);
  transition: border-color var(--tm-dur) var(--tm-ease), background-color var(--tm-dur) var(--tm-ease), transform var(--tm-dur) var(--tm-ease);
}
:is(.tm-section--slate, .tm-trust--lit) .tm-trust__item:hover .tm-trust__icon { border-color: var(--tm-text); background: rgba(250, 250, 250, 0.06); transform: translateY(-2px); }
:is(.tm-section--slate, .tm-trust--lit) .tm-trust__item::before { transform: scaleX(1); }
.tm-motion :is(.tm-section--slate, .tm-trust--lit) [data-reveal-stagger] > .tm-trust__item::before,
.tm-motion [data-reveal-stagger].tm-trust--lit > .tm-trust__item::before { transform: scaleX(0); }
.tm-motion :is(.tm-section--slate [data-reveal-stagger], [data-reveal-stagger].tm-trust--lit).is-visible > .tm-trust__item::before { animation: tm-draw 900ms var(--tm-ease) both; }
.tm-motion :is(.tm-section--slate [data-reveal-stagger], [data-reveal-stagger].tm-trust--lit).is-visible > :nth-child(1)::before { animation-delay: 300ms; }
.tm-motion :is(.tm-section--slate [data-reveal-stagger], [data-reveal-stagger].tm-trust--lit).is-visible > :nth-child(2)::before { animation-delay: 390ms; }
.tm-motion :is(.tm-section--slate [data-reveal-stagger], [data-reveal-stagger].tm-trust--lit).is-visible > :nth-child(3)::before { animation-delay: 480ms; }
.tm-motion :is(.tm-section--slate [data-reveal-stagger], [data-reveal-stagger].tm-trust--lit).is-visible > :nth-child(4)::before { animation-delay: 570ms; }
.tm-motion :is(.tm-section--slate [data-reveal-stagger], [data-reveal-stagger].tm-trust--lit).is-visible > :nth-child(5)::before { animation-delay: 660ms; }

/* =========================================================================
   ESTADO VACÍO · Colección sin resultados / ficha de pieza inexistente
   ========================================================================= */
.tm-empty {
  position: relative; isolation: isolate; overflow: clip;
  display: grid; gap: var(--tm-s-2); justify-items: center; text-align: center;
  padding: var(--tm-s-6) var(--tm-s-3);
  /* Elevación 2026-11-09: foco de luz cenital, como el bloque final */
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(250, 250, 250, 0.06), rgba(250, 250, 250, 0)),
    linear-gradient(180deg, var(--tm-graphite-2), var(--tm-graphite) 60%);
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius-card);
}
/* Filo de luz superior que se desvanece (mismo gesto que los pasos) */
.tm-empty::before {
  content: ""; position: absolute; top: 0; left: 15%; right: 15%; height: 1px;
  background: linear-gradient(90deg, rgba(250, 250, 250, 0), rgba(250, 250, 250, 0.22) 50%, rgba(250, 250, 250, 0));
}
.tm-empty__icon {
  position: relative;
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--tm-line-strong); color: var(--tm-champagne);
  background: rgba(250, 250, 250, 0.03);
  margin-bottom: var(--tm-s-1);
}
/* Segundo anillo, muy tenue: el icono "en vitrina" */
.tm-empty__icon::after {
  content: ""; position: absolute; inset: -9px; border-radius: 50%;
  border: 1px solid rgba(250, 250, 250, 0.06);
}
.tm-empty__icon svg { width: 26px; height: 26px; }
.tm-empty h2 { font-size: var(--tm-fs-h3); }
.tm-empty p { color: var(--tm-text-muted); max-width: 46ch; }
.tm-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--tm-s-2); margin-top: var(--tm-s-1); }



/* =========================================================================
   CABECERA DE PÁGINA · breadcrumb + título + subtítulo
   Compartida por Colección, Cómo funciona y Aviso de privacidad
   (antes en catalog.css).
   ========================================================================= */
.tm-page-head {
  padding-top: var(--tm-s-5);
  padding-bottom: var(--tm-s-4);
}
.tm-page-head h1 { letter-spacing: -0.01em; line-height: 1.05; }
.tm-page-head__inner { display: grid; gap: var(--tm-s-2); }
.tm-page-head h1 { margin-top: var(--tm-s-1); }

@media (min-width: 1024px) {
  .tm-page-head { padding-top: var(--tm-s-6); padding-bottom: var(--tm-s-5); }
}

/* Cabecera elevada (.tm-page-head--lit) · Catálogo, Cómo funciona y
   Confianza (antes .tm-page-head--catalog en catalog.css). Mismo lenguaje
   que el hero de la Home: foco de luz neutra muy tenue detrás del titular,
   breadcrumb con filete (como el eyebrow del hero) y titular más grande.
   Entrada al cargar: hijos escalonados 90 ms, foco en 1,4 s. */
.tm-page-head--lit { position: relative; isolation: isolate; overflow: clip; }
.tm-page-head--lit::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -40% 35% -10% -15%;
  background: radial-gradient(closest-side, rgba(250, 250, 250, 0.06), rgba(250, 250, 250, 0));
}
.tm-page-head--lit .tm-breadcrumb { display: inline-flex; align-items: center; gap: 14px; }
.tm-page-head--lit .tm-breadcrumb::before { content: ""; width: 32px; height: 1px; background: var(--tm-text-3); flex: none; }
.tm-page-head--lit h1 {
  font-size: clamp(42px, 5.6vw, 72px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.tm-motion .tm-page-head--lit .tm-page-head__inner > * { animation: tm-rise 700ms var(--tm-ease) both; }
.tm-motion .tm-page-head--lit .tm-page-head__inner > :nth-child(1) { animation-delay: 60ms; }
.tm-motion .tm-page-head--lit .tm-page-head__inner > :nth-child(2) { animation-delay: 150ms; }
.tm-motion .tm-page-head--lit .tm-page-head__inner > :nth-child(3) { animation-delay: 240ms; }
.tm-motion .tm-page-head--lit .tm-page-head__inner > :nth-child(4) { animation-delay: 330ms; }
.tm-motion .tm-page-head--lit .tm-page-head__inner > :nth-child(5) { animation-delay: 420ms; }
.tm-motion .tm-page-head--lit .tm-page-head__inner > :nth-child(n+6) { animation-delay: 510ms; }
.tm-motion .tm-page-head--lit::before { animation: tm-fade 1400ms var(--tm-ease) both; }


/* =========================================================================
   PASOS NUMERADOS · "Cómo funciona"
   Compartidos por la Home y como-funciona.html (antes en home.css).
   ========================================================================= */
.tm-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tm-grid-gap);
  counter-reset: step;
}
.tm-step {
  display: grid; gap: var(--tm-s-2); align-content: start;
  padding: var(--tm-s-4);
  border-radius: var(--tm-radius-card);
  background: var(--tm-graphite);
  border: 1px solid var(--tm-line);
}
/* Numeración: es un proceso real en orden, por eso se numera */
.tm-step__num {
  font-family: var(--tm-font-display);
  font-size: 44px; line-height: 1; color: var(--tm-champagne);
  font-variant-numeric: lining-nums;
}
.tm-step h3 { font-size: 26px; }
.tm-step p { color: var(--tm-text-muted); font-size: 15px; }
.tm-steps__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tm-s-3);
  margin-top: var(--tm-s-5);
}
.tm-steps__foot p { font-size: 15px; color: var(--tm-text-muted); max-width: 60ch; }
@media (max-width: 1023px) { .tm-steps { grid-template-columns: minmax(0, 1fr); } }

/* Elevación 2026-11-09 (antes en home.css; compartida con Cómo funciona y
   Confianza): sobre banda Grafito los pasos van en Noche, con filo de luz
   arriba, número grande con un filete que lo une al siguiente paso (es una
   secuencia real) y elevación suave al pasar el cursor. */
.tm-section--surface .tm-step {
  position: relative;
  background: linear-gradient(180deg, var(--tm-graphite-2) 0%, var(--tm-night) 45%);
  padding: var(--tm-s-5) var(--tm-s-4) var(--tm-s-4);
  gap: var(--tm-s-2);
  transition: border-color var(--tm-dur) var(--tm-ease), transform var(--tm-dur-slow) var(--tm-ease), box-shadow var(--tm-dur-slow) var(--tm-ease);
}
.tm-section--surface .tm-step::before {
  content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px;
  background: linear-gradient(90deg, rgba(250, 250, 250, 0), rgba(250, 250, 250, 0.22) 50%, rgba(250, 250, 250, 0));
}
.tm-section--surface .tm-step__num {
  display: flex; align-items: center; gap: var(--tm-s-2);
  font-size: 56px; margin-bottom: var(--tm-s-1);
}
.tm-section--surface .tm-step__num::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--tm-line-strong), rgba(54, 54, 58, 0));
}
@media (hover: hover) {
  .tm-section--surface .tm-step:hover { border-color: var(--tm-line-strong); transform: translateY(var(--tm-lift)); box-shadow: var(--tm-shadow-lift); }
}
/* Tras aparecer, los pasos recuperan su transición de hover (240/400 ms) */
.tm-motion .tm-steps.is-done > .tm-step { transition: border-color var(--tm-dur) var(--tm-ease), transform var(--tm-dur-slow) var(--tm-ease), box-shadow var(--tm-dur-slow) var(--tm-ease); }



/* =========================================================================
   MARCADOR [POR CONFIRMAR] · dato que falta y no se inventa
   Lo usan los documentos legales y el footer (redes sociales). Se retira
   al tener el dato real (buscar "tm-tbd").
   ========================================================================= */
.tm-tbd {
  display: inline;
  padding: 1px 6px;
  border: 1px dashed var(--tm-champagne);
  border-radius: 6px;
  background: rgba(214, 214, 214, 0.08);
  color: var(--tm-champagne-text);
  font-size: 0.86em; font-weight: 500; font-style: normal;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.tm-tbd--dark { background: transparent; color: var(--tm-champagne); border-color: var(--tm-champagne); }


/* =========================================================================
   MOVIMIENTO COMPARTIDO (2026-11-09) · Home, Catálogo, Ficha, Cómo funciona y Confianza
   Reglas:
   - Solo opacity y transform (GPU, sin reflow). Nada de rebotes.
   - Todo depende de la clase .tm-motion en <html>, que el script del <head>
     pone solo si el navegador NO pide movimiento reducido y entiende
     IntersectionObserver. Sin JS o con movimiento reducido, todo se ve
     quieto y completo desde el primer momento.
   - Aparición al scroll (assets/js/motion.js): [data-reveal] sube 16 px y
     aparece en 700 ms; [data-reveal-stagger] hace lo mismo con cada hijo,
     90 ms de desfase. [data-reveal-item] (contenido pintado por JS, p. ej.
     tarjetas del Catálogo) igual, con el desfase que pone motion.js.
   ========================================================================= */
@keyframes tm-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes tm-settle { from { opacity: 0; transform: translateY(12px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes tm-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tm-fade { from { opacity: 0; } to { opacity: 1; } }

.tm-motion [data-reveal],
.tm-motion [data-reveal-stagger] > *,
.tm-motion [data-reveal-item] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms var(--tm-ease), transform 700ms var(--tm-ease);
}
.tm-motion [data-reveal].is-visible,
.tm-motion [data-reveal-stagger].is-visible > *,
.tm-motion [data-reveal-item].is-visible { opacity: 1; transform: none; }
.tm-motion [data-reveal-stagger].is-visible > :nth-child(2) { transition-delay: 90ms; }
.tm-motion [data-reveal-stagger].is-visible > :nth-child(3) { transition-delay: 180ms; }
.tm-motion [data-reveal-stagger].is-visible > :nth-child(4) { transition-delay: 270ms; }
.tm-motion [data-reveal-stagger].is-visible > :nth-child(5) { transition-delay: 360ms; }
.tm-motion [data-reveal-stagger].is-visible > :nth-child(6) { transition-delay: 450ms; }
.tm-motion [data-reveal-stagger].is-visible > :nth-child(7) { transition-delay: 540ms; }
.tm-motion [data-reveal-stagger].is-visible > :nth-child(8) { transition-delay: 630ms; }
/* Pasado el desfase, los hijos vuelven a responder al hover sin retraso */
.tm-motion [data-reveal-stagger].is-done > * { transition-delay: 0ms; }