.page-product-detail .suite-reference-art { width: 100%; aspect-ratio: auto; }
.page-product-detail .suite-visual-stage { position: relative; aspect-ratio: 32 / 21; isolation: isolate; }
.page-product-detail .suite-orbits { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; }
.page-product-detail .suite-agent-grid { position: absolute; inset: 8% 14%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 14px; z-index: 1; }
.page-product-detail .suite-agent-card { min-width: 0; min-height: 0; margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; padding: 6px; border: 1px solid #ffffffed; border-radius: 18px; background: linear-gradient(135deg, #fffffff5, #f8fbfff0); box-shadow: 0 14px 28px -22px #537da86b; }
.page-product-detail .suite-agent-portrait { position: relative; min-height: 0; overflow: hidden; border-radius: 12px; background: #f8fbff; isolation: isolate; }
.page-product-detail .suite-portrait-colors { position: absolute; inset: -40%; z-index: 0; animation: suite-atmosphere-drift 10s ease-in-out infinite alternate; animation-delay: var(--atmosphere-delay); }
.page-product-detail .suite-color-wash { position: absolute; inset: 0; background: radial-gradient(ellipse at 22% 25%, var(--tone-a), transparent 56%), radial-gradient(ellipse at 78% 72%, var(--tone-b), transparent 58%), linear-gradient(125deg, var(--tone-base), var(--tone-light)); opacity: 0; animation: suite-palette-cycle 12s linear infinite; animation-delay: calc(var(--palette-phase) + var(--wash-offset)); }
.page-product-detail .suite-agent-portrait::after { content: ''; position: absolute; inset: -25%; z-index: 1; background: radial-gradient(ellipse at 25% 20%, #ffffffc9, transparent 58%); animation: suite-atmosphere-light 8s ease-in-out infinite alternate; animation-delay: var(--atmosphere-delay); }
.page-product-detail .suite-agent-portrait img { position: relative; z-index: 2; display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; object-position: center bottom; }
.page-product-detail .suite-agent-card figcaption { min-height: 42px; padding: 7px 4px 3px; }
.page-product-detail .suite-agent-card strong { display: block; color: #344e70; font-size: .72rem; line-height: 1.2; font-weight: 600; }
.page-product-detail .suite-agent-card figcaption > span { display: block; margin-top: 4px; color: #71849d; font-size: .6rem; line-height: 1.3; }
.page-product-detail [data-suite-tone="blue"] { --tone-base: #eef8ff; --tone-a: #b7ddff; --tone-b: #d3eeff; --tone-light: #f8fcff; --wash-offset: 0s; }
.page-product-detail [data-suite-tone="yellow"] { --tone-base: #fffbee; --tone-a: #ffe8a8; --tone-b: #fff1c4; --tone-light: #fffdf5; --wash-offset: -9s; }
.page-product-detail [data-suite-tone="gray"] { --tone-base: #f3f5f8; --tone-a: #d9e0e7; --tone-b: #e8edf2; --tone-light: #fcfdfe; --wash-offset: -6s; }
.page-product-detail [data-suite-tone="green"] { --tone-base: #effbf5; --tone-a: #bfe9d5; --tone-b: #def4e7; --tone-light: #fafefa; --wash-offset: -3s; }
.page-product-detail .suite-art-caption { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; min-height: 28px; margin-top: 10px; color: #71849d; font-size: .62rem; line-height: 1.4; }
.page-product-detail .suite-caption-brand { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid #fff; border-radius: 999px; color: #3d587b; background: #ffffffb8; font-weight: 600; }
.page-product-detail .suite-caption-brand i { width: 5px; height: 5px; border-radius: 50%; background: #ffc636; }
.page-product-detail .suite-reference-art:is(.art-hidden, .art-offscreen) .suite-agent-portrait::after { animation-play-state: paused; }
/* Each palette holds for two seconds, then crossfades for one second. */
@keyframes suite-palette-cycle { 0%, 16.666667% { opacity: 1; } 25%, 91.666667% { opacity: 0; } 100% { opacity: 1; } }
@keyframes suite-atmosphere-drift { from { transform: translate(-6%, 4%) rotate(-12deg) scale(1); } to { transform: translate(9%, -7%) rotate(24deg) scale(1.16); } }
@keyframes suite-atmosphere-light { from { opacity: .2; transform: translateX(-12%); } to { opacity: .8; transform: translateX(15%); } }
@media (min-width: 1001px) {
  .page-product-detail .suite-reference-art { width: calc(100% + 32px); max-width: 640px; max-height: none; margin-left: -12px; }
  .page-product-detail[data-product="agentes-bicode"] .detail-hero-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px; }
}
@media (max-width: 600px) {
  .page-product-detail .suite-visual-stage { aspect-ratio: 1; }
  .page-product-detail .suite-agent-grid { inset: 8% 10%; gap: 10px; }
  .page-product-detail .suite-agent-card { padding: 5px; border-radius: 15px; }
  .page-product-detail .suite-agent-portrait { border-radius: 10px; }
  .page-product-detail .suite-agent-card figcaption { min-height: 44px; padding: 6px 3px 2px; }
  .page-product-detail .suite-agent-card strong { font-size: .66rem; }
  .page-product-detail .suite-agent-card figcaption > span { margin-top: 3px; font-size: .55rem; }
  /* Keep beads round when the orbit canvas adapts to the taller mobile grid. */
  .page-product-detail .suite-bead-shape { transform: scaleY(.65625); transform-origin: 0 0; }
}
@media (max-width: 360px) {
  .page-product-detail .suite-art-caption { flex-direction: column; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-product-detail .suite-portrait-colors,
  .page-product-detail .suite-color-wash,
  .page-product-detail .suite-agent-portrait::after { animation: none; }
  .page-product-detail [data-suite-agent="carlos"] [data-suite-tone="blue"],
  .page-product-detail [data-suite-agent="andrea"] [data-suite-tone="yellow"],
  .page-product-detail [data-suite-agent="juan"] [data-suite-tone="gray"],
  .page-product-detail [data-suite-agent="angela"] [data-suite-tone="green"] { opacity: 1; }
}