/* Fichas estrella «mínimas» (29-10-2026): LX-8, RX-8, S-460, AR-601, Robotas MASCOT y Shinnex. La plantilla de la LX-8
   (muestra del 27-28-10), encima de ficha-rs2.css (prefijo r2-, de la RS-2). Prefijos: lx8- (la plantilla), c3d- (la cabecera en
   3D) y est- (lo que añadieron S-460, AR-601, MASCOT y Shinnex). Fondos claros siempre.
   Antes era web/muestras/estrella-lx8/lx8.css (y estrella.css en las otras cuatro). */


/* Cabecera en 3D (28-10): el lienzo ocupa el hueco y entra con un fundido cuando ya está pintado (sin foto antes). La foto oficial
   solo sale si no hay WebGL o el modelo no carga (.c3d--foto). */
.c3d { margin: 8px 0 0; }
.c3d > .c3d-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 500ms ease; }
.c3d.c3d--listo > .c3d-lienzo { opacity: 1; }
.c3d > img[data-c3d-foto] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 0 22px 34px; }
@media (prefers-reduced-motion: reduce) { .c3d > .c3d-lienzo { transition: none; } }

/* Letra pequeña bajo un dato (la precisión del folleto con la de la ficha técnica: decisión 3 del 28-10) */
.lx8-letra-peq { display: block; margin: 6px 0 0; font: 400 13px/1.38 var(--kit-letra, inherit); letter-spacing: -.003em; color: var(--kit-gris2, #5d6874); }
.r2-claves-lista .lx8-letra-peq { margin-top: 8px; max-width: 22em; }
.ft-fila dd .lx8-letra-peq { margin-top: 4px; }
/* La nota «En proceso» de los vídeos de «Lo esencial», visible bajo la galería */
.lx8-nota-proceso { margin-top: 20px; }
.lx8-nota-proceso b { font-weight: 600; color: var(--kit-tinta, #15283d); }

/* Ejemplos de aplicación: subtítulo corto bajo el título y fotos de JUKI a sangre en la tarjeta */
.lx8-cab-sub { margin: 10px 0 0; max-width: 38em; font: 400 19px/1.42 var(--kit-letra); letter-spacing: -.012em; color: var(--kit-gris); }
.lx8-foto > div > img { object-fit: cover; }
.lx8-aplicaciones .bw-foto figcaption { max-width: 30em; }
.lx8-aplicaciones .r2-legal { margin-top: 28px; }


@media (max-width: 734px) {
  .c3d > img[data-c3d-foto] { padding: 0 12px; }
  .lx8-cab-sub { font-size: 17px; }
}

/* «Vídeo en proceso», junto a la máquina y no en el borde de la rejilla */
.lx8 .r2-cabecera .kit-cabecera__medio .r2-en-proceso { right: auto; left: 50%; bottom: 6px; transform: translateX(-50%); }
/* Bloque «Pick & place · JUKI / LX-8» más arriba y máquina más grande (lo que David pidió para la RS-2: REV 1 y 4) */
.lx8 .r2-cabecera { padding-top: 16px; }
.lx8 .r2-cabecera .kit-cabecera__arriba { padding-top: 40px; }
@media (max-width: 734px) { .lx8 .r2-cabecera { padding-top: 8px; } .lx8 .r2-cabecera .kit-cabecera__arriba { padding-top: 28px; } }
.lx8-nw { white-space: nowrap; }

/* Menos aire entre secciones (David, 27-10: «mucho menos espacio entre secciones»). El kit copia el de Apple: 160 px arriba y 160
   abajo de cada sección (Air; 144 el Pro), o sea 320 px entre dos secciones; 120 en tablet y 96 en móvil. Aquí, la mitad por lado:
   80 px (160 entre secciones, lo que Apple deja de un solo lado), 64 en tablet y 48 en móvil (96 entre secciones). */
main.lx8 { --kit-aire: 80px; --kit-cab-contenido: 40px; }
@media (max-width: 1068px) { main.lx8 { --kit-aire: 64px; } }
@media (max-width: 734px) { main.lx8 { --kit-aire: 48px; --kit-cab-contenido: 32px; } }
/* Las tres claves, entre dos secciones: el mismo aire que las demás (en la RS-2 llevaban la mitad arriba) */
html[data-ficha-diseno=producto] main.lx8 > .r2-claves { padding-top: var(--kit-aire); }
/* Especificaciones no usa --kit-aire (vienen de equipo-v-producto.css): se igualan a mano */
html[data-ficha-diseno=producto] main.lx8 > .r2-specs { padding-top: var(--kit-aire); padding-bottom: var(--kit-aire); }
/* Las galerías traen su propio hueco debajo (mandos, flechas y los 30 px de la subida de entrada): ahí, medio aire */
html[data-ficha-diseno=producto] main.lx8 > .r2-esencial,
html[data-ficha-diseno=producto] main.lx8 > .r2-bwit { padding-bottom: calc(var(--kit-aire) * .5); }
/* Cabecera: «Descargar el brochure» y «Pedir oferta» en una fila (David, 27-10). En el móvil caben en la tarjeta sin partirse */
.lx8-cab-botones { flex-wrap: nowrap; }
.lx8-cab-botones .kit-boton { white-space: nowrap; }
@media (max-width: 734px) {
  .lx8 .r2-cabecera .kit-cabecera__compra { width: calc(100% - 32px); padding: 16px 12px; min-height: 0; }
  .lx8-cab-botones { gap: 8px; }
  .lx8-cab-botones .kit-boton { padding: 10px 14px; font-size: 15px; line-height: 20px; }
}

/* El rótulo de la cabecera, en una línea también en el móvil */
.c3d > .r2-en-proceso { white-space: nowrap; }

/* Vídeos de «Lo esencial»: nunca los controles ni el icono de «play» del navegador (Safari y el iPhone en ahorro de energía los
   pintan si no se reproduce), y nada que se pueda tocar encima del vídeo (David, 28-10) */
.kit-galeria__media video { pointer-events: none; }
.kit-galeria__media video::-webkit-media-controls,
.kit-galeria__media video::-webkit-media-controls-panel,
.kit-galeria__media video::-webkit-media-controls-overlay-play-button,
.kit-galeria__media video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }

/* Cabecera con la foto oficial del fabricante (S-460, AR-601, MASCOT y Shinnex): sin vídeo, con «Vídeo en proceso» */
.lx8-cab-foto { margin: 8px 0 0; }
.lx8-cab-foto > img { object-fit: contain; padding: 0 22px 34px; }
@media (max-width: 734px) { .lx8-cab-foto > img { padding: 0 12px; } }

/* ---- 28-10: añadido para las estrellas mínimas de S-460, AR-601, MASCOT y Shinnex (prefijo est-). Lo de arriba es la LX-8 v3 tal cual. ---- */
/* Imágenes del fabricante sobre blanco (S-460, MASCOT, Incoming): el blanco se funde con el fondo claro de la cabecera */
.est-fondo-blanco > img { mix-blend-mode: multiply; }
/* MASCOT: imagen vertical; horno: foto apaisada de 1000 px, que no se estira por encima de su tamaño */
.est-horno > img { max-width: 1000px; margin-left: auto; margin-right: auto; }
/* Tarjeta de aplicación con una captura de pantalla (BomX): entera, sin recortar */
.lx8-foto.est-captura > div { background: #fff; }
.lx8-foto.est-captura > div > img { object-fit: contain; }
/* Enlace a la ficha del producto, al final del texto de la tarjeta (Shinnex) */
.est-enlace { white-space: nowrap; color: var(--kit-azul, #0066cc); text-decoration: none; font-weight: 500; }
.est-enlace:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* Shinnex: una tabla por producto, con su folleto debajo */
.est-bloque { margin: 0 0 56px; scroll-margin-top: 120px; }
.est-bloque:last-child { margin-bottom: 0; }
.est-bloque__t { margin: 0 0 16px; font: 600 24px/1.2 var(--kit-letra, inherit); letter-spacing: -.01em; color: #1d1d1f; }
.est-sin-folleto { margin: 16px 0 0; font-size: 14px; color: #6e6e73; }
.est-sin-folleto .r2-en-proceso { position: static; transform: none; display: inline-block; vertical-align: middle; }
@media (max-width: 734px) { .est-bloque { margin-bottom: 40px; } .est-bloque__t { font-size: 21px; } }

/* Las llamadas a las notas dentro de un pie de foto no llevan la flecha de los enlaces de ficha-rs2.css (29-10) */
.bw-foto figcaption .r2-ref a::after { content: none; }
.bw-foto figcaption .r2-ref a { white-space: normal; }