/* Efectos de «demos»: generado desde assets/css/src/fx/ (demos, cierre-cristal). */
/* ---------- Demos: cada panel realza con SU color ----------
   Acentos por demo. Bloque único, ajustable. */
.demo--casa-aurea   { --panel-accent: #B07A1E; } /* dorado miel */
.demo--hombre-alfa  { --panel-accent: #E0562B; } /* brasa */
.demo--bufete       { --panel-accent: #3F8A66; } /* verde botella */
.demo--dental       { --panel-accent: #E06A52; } /* coral */
.demo--veterinaria  { --panel-accent: #DB7C4E; } /* terracota */
.demo--inmobiliaria { --panel-accent: #9A7440; } /* bronce champán */
/* Fin de los acentos. */
.demo, .demo-mini { position: relative; isolation: isolate; transition: border-color .4s var(--ease), box-shadow .5s var(--ease); }
.demo::before, .demo-mini::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: .5; transition: opacity .6s var(--ease);
  background: radial-gradient(70% 95% at 0% 0%, color-mix(in srgb, var(--panel-accent) 24%, transparent), transparent 70%);
}
.demo:hover::before, .demo-mini:hover::before, .demo-mini:focus-visible::before, :is(.demo, .demo-mini).is-hot::before { opacity: 1; }
.demo:hover, .demo-mini:hover, .demo-mini:focus-visible, :is(.demo, .demo-mini).is-hot {
  border-color: var(--panel-accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--panel-accent) 40%, transparent), 0 40px 90px -60px var(--panel-accent);
}
.demo__copy h2::before, .demo-mini h3::before { content: ""; display: block; width: 40px; height: 2px; margin-bottom: var(--s-5); background: var(--panel-accent); transform-origin: 0 50%; transition: transform .6s var(--ease); }
.demo:hover .demo__copy h2::before, .demo.is-hot .demo__copy h2::before, .demo-mini:hover h3::before, .demo-mini.is-hot h3::before { transform: scaleX(1.9); }
.demo .btn--secondary:hover, .demo--light .btn--secondary:hover { border-color: var(--panel-accent); }
.demo__shot { transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s var(--ease); }
.demo:hover .demo__shot, .demo.is-hot .demo__shot { border-color: color-mix(in srgb, var(--panel-accent) 50%, transparent); }
.demo__shot img, .demo-mini__shot img { transition: transform .6s var(--ease), filter .6s var(--ease); }
.demo:hover .demo__shot img, .demo.is-hot .demo__shot img, .demo-mini:hover .demo-mini__shot img, .demo-mini.is-hot .demo-mini__shot img { filter: saturate(1.14); }
.demo-mini.is-hot .demo-mini__shot img { transform: scale(1.02); }
.demo.is-hot .demo__shot--home { transform: translateY(-5px); box-shadow: 0 26px 54px -30px var(--panel-accent); }
@media (hover: hover) {
  .demo__shot:hover, .demo__shot:focus-visible { transform: translateY(-5px); box-shadow: 0 26px 54px -30px var(--panel-accent); }
}

/* Cierre de Demos: capas de cristal en profundidad que se mueven con el cursor. */
.band--cristal .band__fx { perspective: 1000px; }
.pane {
  position: absolute; left: 50%; top: 50%; width: min(52vw, 620px); aspect-ratio: 16 / 10; margin: 0; border-radius: 14px;
  border: 1px solid rgba(237, 232, 223, .16);
  background: linear-gradient(118deg, rgba(237, 232, 223, .09), rgba(237, 232, 223, .012) 38%, rgba(244, 181, 61, .06));
  box-shadow: inset 0 1px 0 rgba(237, 232, 223, .18);
  transform: translate(-50%, -50%) translate3d(calc(var(--nx) * var(--d) * 1px), calc(var(--ny) * var(--d) * .6px), 0) rotateY(-26deg) rotateX(7deg) translateZ(var(--z));
  transition: transform .7s var(--ease);
}
.pane--1 { --d: -18; --z: -190px; margin-left: -70px; }
.pane--2 { --d: 10; --z: 0px; }
.pane--3 { --d: 34; --z: 190px; margin-left: 70px; border-color: rgba(244, 181, 61, .28); }
.motion .band.is-live .pane { animation: swf-float 8s ease-in-out infinite alternate; }
.motion .band.is-live .pane--2 { animation-delay: -2.6s; }
.motion .band.is-live .pane--3 { animation-delay: -5.2s; }
@keyframes swf-float { from { translate: 0 -10px; } to { translate: 0 10px; } }