/* Vectiss — Diseño de la ficha (RC). * * Capa de TEMA global de la página del vehículo. Reescribe el aspecto de la ficha SOLO mediante * clases de (body.vectiss-ficha-modern|minimal|elegant) y consumiendo tokens --vectiss-* * (editables en Vectiss → Apariencia). No hay colores hardcodeados: todo cuelga de un token con * fallback al token global, así que al cambiar los colores/tipografía globales la ficha se actualiza * sola. No modifica el HTML ni el CSS de los widgets: solo añade reglas de mayor especificidad. */ /* ===== Base: se aplica en los tres estilos (el body siempre tiene una clase de ficha) ===== */ /* Hero / galería: altura, radio y overlay por token. */ body.vectiss-ficha-modern .vectiss-galeria-principal, body.vectiss-ficha-minimal .vectiss-galeria-principal, body.vectiss-ficha-elegant .vectiss-galeria-principal { position: relative; height: var(--vectiss-hero-height, 440px); border-radius: var(--vectiss-hero-radius, 16px); overflow: hidden; } body.vectiss-ficha-modern .vectiss-galeria-principal img, body.vectiss-ficha-minimal .vectiss-galeria-principal img, body.vectiss-ficha-elegant .vectiss-galeria-principal img { width: 100%; height: 100%; object-fit: cover; } /* Overlay sobre la imagen principal — pseudo-elemento, sin tocar el HTML. */ body.vectiss-ficha-modern .vectiss-galeria-principal::after, body.vectiss-ficha-minimal .vectiss-galeria-principal::after, body.vectiss-ficha-elegant .vectiss-galeria-principal::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: var(--vectiss-hero-overlay, transparent); } /* Miniaturas: heredan el radio de imágenes. */ body.vectiss-ficha-modern .vectiss-thumb, body.vectiss-ficha-minimal .vectiss-thumb, body.vectiss-ficha-elegant .vectiss-thumb { border-radius: var(--vectiss-hero-radius, 16px); } /* NOTA: Precio (monto/sufijo/tamaño/peso) e Información (specs: fondo/texto/borde/padding) NO se * estilizan aquí. Apariencia emite directamente los tokens que ficha.css ya consume * (--vx-ficha-precio-monto-* y --vx-ficha-especificaciones-tarjeta-*), así que la ficha responde * sola, sin variables paralelas ni reglas duplicadas en esta capa. */ /* Separación entre bloques de la ficha. */ body.vectiss-ficha-modern .vectiss-fp-seccion, body.vectiss-ficha-minimal .vectiss-fp-seccion, body.vectiss-ficha-elegant .vectiss-fp-seccion { margin-bottom: var(--vectiss-spacing-section, 40px); } /* Separación interna de la columna multimedia (tarjetas). */ body.vectiss-ficha-modern .vectiss-fp-media, body.vectiss-ficha-minimal .vectiss-fp-media, body.vectiss-ficha-elegant .vectiss-fp-media { gap: var(--vectiss-spacing-card, 20px); } /* Botón principal de la ficha: solo padding propio; color/hover/radio = tokens globales de botón. */ body.vectiss-ficha-modern .vectiss-cta-boton, body.vectiss-ficha-minimal .vectiss-cta-boton, body.vectiss-ficha-elegant .vectiss-cta-boton { padding-block: var(--vectiss-button-padding, 14px); border-radius: var(--vectiss-boton, 14px); } body.vectiss-ficha-modern .vectiss-cta-boton:hover, body.vectiss-ficha-minimal .vectiss-cta-boton:hover, body.vectiss-ficha-elegant .vectiss-cta-boton:hover { background: var(--vectiss-btn-primary-hover, var(--vectiss-btn-primary, var(--vectiss-primary))); filter: none; } /* ===== Variantes de estilo (solo tokens; sin colores hardcodeados) ===== */ /* Minimal: aire, sin sombras, bordes finos, títulos menos pesados. */ body.vectiss-ficha-minimal .vectiss-galeria-principal, body.vectiss-ficha-minimal .vectiss-fp-specs { box-shadow: none; } body.vectiss-ficha-minimal .vectiss-fp-titulo { font-weight: 600; } /* Elegant: realce sutil — elevación de la imagen y precio con tracking ajustado. */ body.vectiss-ficha-elegant .vectiss-galeria-principal { box-shadow: var(--vectiss-single-card-sombra, var(--vectiss-sombra)); } body.vectiss-ficha-elegant .vectiss-fp-precio { letter-spacing: -0.01em; } body.vectiss-ficha-elegant .vectiss-fp-titulo { letter-spacing: -0.012em; }