Cómo integrar la galería en tu landing

El archivo ticket-carousel.html es a la vez la página del módulo y su versión embebible. La forma recomendada de meterlo en tu web es un iframe: aísla por completo los estilos del carrusel de los de tu página, así nada choca.

1 · Insertar como sección (recomendado)

Pega esto donde quieras la sección. El ?embed=1 elimina esta guía y deja solo el módulo; el envoltorio mantiene la proporción para que sea 100% responsive:

<!-- Sección: galería de estilos ValetOS -->
<div style="position:relative;width:100%;max-width:720px;margin:0 auto">
  <iframe
    src="/ticket-carousel.html?embed=1&lang=es"
    title="Galería de estilos de ticket ValetOS"
    loading="lazy"
    style="width:100%;height:840px;border:0;display:block">
  </iframe>
</div>

La altura del iframe es fija porque un iframe no crece con su contenido. 840px cubre el módulo completo en escritorio y móvil. Si tu maquetación lo permite, usa la técnica de aspect-ratio o escucha postMessage para auto-ajustar; para un landing, la altura fija es lo más simple y robusto.

2 · Parámetros de URL

Parámetro	Valores	Qué hace
lang	es · en	Idioma del ticket y del cromo. Por defecto es.
embed	1	Oculta esta guía: solo el módulo. Úsalo siempre en el iframe.
autoplay	1 · 0	Avance automático. Por defecto 1. Se pausa solo si el visitante prefiere menos movimiento.
interval	2500–20000	Milisegundos entre temas. Por defecto 5000.
start	id de tema	Tema inicial, p. ej. quiet-luxury. Por defecto el primero.
state	parked · payment_required	Estado inicial mostrado. Por defecto parked.
bg	transparent · hex	Fondo de la sección, para fundirla con tu página.

Ejemplo en inglés, empezando por el tema atlético y sin autoplay:

/ticket-carousel.html?embed=1&lang=en&start=kinetic&autoplay=0

3 · Alternativa: incrustado en línea (sin iframe)

Si prefieres no usar iframe, copia la sección <section class="vtcx">…</section> y sus estilos a tu página, e incluye el núcleo. Todo el cromo está scopeado bajo .vtcx, pero las clases del ticket (.vt-*) son globales: revisa que no colisionen con las tuyas. Ante la duda, usa el iframe.

<link rel="stylesheet" href="assets/core/tokens.css">
<link rel="stylesheet" href="assets/core/valetos-ticket.css">
<script src="assets/core/valetos-i18n.js"></script>
<script src="assets/core/valetos-ticket.js"></script>
// …luego el marcado .vtcx y el script de inicio del carrusel.

4 · Personalizar el fondo

El módulo trae un fondo oscuro premium. Para fundirlo con tu marca, sobrescribe la variable desde tu CSS (incrustado) o pasa ?bg= (iframe):

.vtcx { --cx-bg: #0b1120; --cx-accent: #1a56db; }