/* cd-frames.css — Marcos Top en SVG. Acompaña a /js/cd-frames.js.
   Los colores llegan por variables inline (--cfc/--cfhi/--cflo/--cfdp),
   fijadas por CDFrames.svg() según el bando del badge. */
.cd-frame .cf-me  { fill: var(--cfc) }
.cd-frame .cf-hi  { fill: var(--cfhi) }
.cd-frame .cf-lo  { fill: var(--cflo) }
.cd-frame .cf-dp  { fill: var(--cfdp) }
.cd-frame .cf-spa { fill: var(--cfhi); opacity: .9 }
.cd-frame .cf-spb { fill: var(--cflo); opacity: .95 }
.cd-frame .cf-sa  { fill: var(--cfhi); opacity: .92 }
.cd-frame .cf-sb  { fill: var(--cfc);  opacity: .78 }
.cd-frame .cf-sc  { fill: var(--cflo); opacity: .62 }
.cd-frame .cf-mono{ stroke: var(--cfdp) }

/* luz que recorre el metal, recortada a la forma real de la banda */
.cd-frame .cf-trav{ transform-origin: 100px 100px; animation: cfTrav 9s linear infinite; opacity: .5 }
@keyframes cfTrav { to { transform: rotate(360deg) } }

/* piezas que reaccionan al cursor */
.cd-frame .cf-cg, .cd-frame .cf-cl, .cd-frame .cf-md{
  transition: transform .6s cubic-bezier(.2,.8,.2,1) }
.cd-frame .cf-cg{ transform-origin: 50% 4% }
.cd-frame .cf-cl{ transform-origin: 20% 82% }
.cd-frame .cf-md{ transform-origin: 24% 90% }

.cd-frame-wrap:hover .cd-frame .cf-trav{ animation-duration: 1.6s; opacity: .95 }
.cd-frame-wrap:hover .cd-frame .cf-cg{ transform: translateY(-6px) scale(1.08) }
.cd-frame-wrap:hover .cd-frame .cf-cl{ transform: scale(1.12) rotate(-7deg) }
.cd-frame-wrap:hover .cd-frame .cf-md{ transform: scale(1.15) rotate(-14deg) }
.cd-frame-wrap:hover .cd-frame .cf-spa,
.cd-frame-wrap:hover .cd-frame .cf-sa { opacity: 1 }

/* respeto por quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce){
  .cd-frame .cf-trav{ animation: none; opacity: .35 }
  .cd-frame .cf-cg, .cd-frame .cf-cl, .cd-frame .cf-md{ transition: none }
}

/* El marco desborda su contenedor a propósito (corona arriba, racimo abajo):
   ninguna zona que lo aloje debe recortarlo. */
.cd-frame-wrap, .salon-foot, .salon-unit { overflow: visible }

/* ── RESPONSIVE DE LOS MARCOS (26-jul-2026) ─────────────────────────────────
   El marco se dibuja al 146% del avatar para que la corona y el racimo
   sobresalgan. Eso luce bien con espacio de sobra, pero en pantallas pequeñas
   —donde los avatares y los huecos encogen— ese vuelo invade lo de al lado y
   parece que el marco "se rompe". Aquí se reduce el vuelo de forma progresiva:
   el marco sigue sobresaliendo, pero lo justo para no chocar. */
.cd-frame-wrap{position:relative;display:inline-grid;place-items:center;
  overflow:visible;isolation:isolate;max-width:100%}
.cd-frame{max-width:none}                    /* que ningún img/svg global lo comprima */

@media (max-width:820px){
  .cd-frame{width:140% !important}
}
@media (max-width:560px){
  .cd-frame{width:134% !important}
}
@media (max-width:400px){
  .cd-frame{width:128% !important}
}