/* ============================================================ perfil-price-card.css — tarjeta de precio/contratación del sidebar en el perfil de artista (contenido/perfil.html). Separado de style/quieromusicos.css el 19/07/2026 porque ese archivo ya venía creciendo mucho (~800 líneas) y este bloque por sí solo representaba más de la mitad. // By Claude Incluye: .qm-price-card (tarjeta completa: precio, formato/ subTarifa, tarjetas "qué incluye", CTA, "añadir a propuesta", "¿necesitas ayuda?"), .qm-subtarifas-modal (modal "Elige el formato") y .qm-trust-modal (modal genérico de detalle para cada tarjeta de qm-price-card__trust — Calidad garantizada, Contratación segura, etc. — con modificador de color). Look premium tipo Apple/Airbnb/Stripe: mucho aire, bordes suaves, tipografía protagonista, sin degradados ni sombras pesadas. Tokens propios (--qm-*) escopados a .qm-price-card para no afectar el resto del sitio legacy. También incluye .qm-perfil-layout: el grid de 3 zonas (galería, sidebar, reseña) del layout general del perfil — ver comentario de esa sección para el detalle. // By Claude ============================================================ */ /* ============================================================ qm-perfil-layout — CSS Grid Areas del layout del perfil de artista (galería de video / price card / reseña). Filosofía: el HTML describe el contenido, el CSS decide dónde vive cada bloque — no dependemos del orden del DOM para la composición visual. Los 3 bloques son hermanos directos dentro de este grid (contenido/perfil.html, .row.qm-perfil-layout): > .col-xl-8 (galería de video, #rp_plugin + miniaturas) → gallery > .col-xl-4 (.qm-price-card + compartir) → sidebar > .col_izquierda (.resena_artista + brochure NIA + stats) → description La galería de fotos (#galeriaArtista_wrap) NO es parte de este grid — sigue siendo una sección aparte, debajo, sin cambios. // By Claude ============================================================ */ .qm-perfil-layout { display: grid !important; grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "gallery sidebar" "description sidebar"; gap: 48px; align-items: start; } .qm-perfil-layout > .col-xl-8 { grid-area: gallery; width: auto; /* 100% (no "none"): así queda acotada al ancho del área del grid en vez de a un % relativo al ancho del .row viejo. Junto con min-width:0, evita que el carrusel de miniaturas (contenido intrínsecamente ancho) empuje el track del grid más allá de la pantalla. // By Claude */ max-width: 100%; min-width: 0; flex: none; } .qm-perfil-layout > .col-xl-4 { grid-area: sidebar; width: auto; max-width: 100%; min-width: 0; flex: none; /* Sticky: el price card se queda visible mientras se hace scroll por la galería/reseña; abarca ambas filas del grid (misma área "sidebar" en las dos filas), así que puede quedarse fijo hasta agotar su columna. */ position: sticky; top: 24px; align-self: start; } /* Nota: position:sticky crea su propio stacking context, lo que atrapaba los modales del qm-price-card (subtarifas, calidad, segura, logística, asesoría) por debajo de su propio .modal-backdrop. Probamos arreglarlo con z-index acá (fijo y luego con :has(.modal.show)), pero ambos tenían efectos secundarios. La solución real quedó en JS: esos modales se mueven a ser hijos directos de al cargar la página (ver