/* =====================================================================
   STUDIO — the almost-imperceptible customizer. Dormant by default: a small
   gold "eye" in the corner. When opened, a slim panel lets you re-compose a
   section (palette · typography · size · accent · motion) live, then Aplicar
   persists it. Everything is muted so it never competes with the site.
   ===================================================================== */

/* the dormant trigger — a quiet eye, low opacity until hovered */
#y-studio-dot {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  width: 34px; height: 34px; display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; opacity: .32;
  transition: opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
#y-studio-dot:hover, #y-studio-dot:focus-visible { opacity: 1; outline: none; }
#y-studio-dot .pip { width: 9px; height: 9px; border-radius: 50%; background: #c8a04a; box-shadow: 0 0 0 1px rgba(200,160,74,.35), 0 0 12px 2px rgba(200,160,74,.25); transition: transform .5s cubic-bezier(.16,1,.3,1); }
#y-studio-dot:hover .pip { transform: scale(1.25); }
.y-studio-on #y-studio-dot { opacity: 1; }
.y-studio-on #y-studio-dot .pip { background: #fff; }

/* tiny tooltip */
#y-studio-dot::after { content: "estúdio"; position: absolute; right: 40px; top: 50%; transform: translateY(-50%);
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #c8a04a;
  opacity: 0; white-space: nowrap; pointer-events: none; transition: opacity .4s ease; }
#y-studio-dot:hover::after { opacity: .8; }

/* the panel */
#y-studio {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 59; width: min(340px, 88vw);
  background: rgba(18,17,14,.86); backdrop-filter: blur(16px) saturate(1.1); -webkit-backdrop-filter: blur(16px) saturate(1.1);
  border-left: 1px solid rgba(200,160,74,.22); color: #ece6d8;
  transform: translateX(100%); transition: transform .55s cubic-bezier(.16,1,.3,1);
  display: flex; flex-direction: column; font-family: 'IBM Plex Mono', monospace;
  box-shadow: -24px 0 60px rgba(0,0,0,.4);
}
.y-studio-on #y-studio { transform: translateX(0); }
#y-studio .hd { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 14px; border-bottom: 1px solid rgba(236,230,216,.1); }
#y-studio .hd .t { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: #c8a04a; }
#y-studio .hd .x { background: none; border: 0; color: #ece6d8; cursor: pointer; font-size: 18px; opacity: .7; }
#y-studio .hd .x:hover { opacity: 1; color: #c8a04a; }
#y-studio .body { padding: 18px 22px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 22px; }

#y-studio .secpick { display: flex; align-items: center; gap: 8px; }
#y-studio .secpick label { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; opacity: .5; }
#y-studio .secpick select { flex: 1; background: rgba(236,230,216,.06); color: #ece6d8; border: 1px solid rgba(236,230,216,.16);
  padding: 9px 10px; font-family: inherit; font-size: 12px; border-radius: 2px; }
#y-studio .grp .lbl { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: #c8a04a; opacity: .85; margin-bottom: 10px; }
#y-studio .chips { display: flex; flex-wrap: wrap; gap: 6px; }
#y-studio .chip { background: rgba(236,230,216,.05); border: 1px solid rgba(236,230,216,.16); color: #d8d2c4;
  padding: 7px 11px; font-family: inherit; font-size: 11px; letter-spacing: .04em; border-radius: 2px; cursor: pointer;
  transition: border-color .3s, color .3s, background .3s; }
#y-studio .chip:hover { border-color: rgba(200,160,74,.5); color: #fff; }
#y-studio .chip[aria-pressed="true"] { border-color: #c8a04a; color: #16140f; background: #c8a04a; }
#y-studio .chip .sw { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: -1px; border: 1px solid rgba(0,0,0,.25); }
#y-studio .chip .ev { display: block; font-size: 8.5px; letter-spacing: .08em; opacity: .55; margin-top: 2px; text-transform: none; }
#y-studio .chip[aria-pressed="true"] .ev { opacity: .7; }

#y-studio .ft { padding: 16px 22px 20px; border-top: 1px solid rgba(236,230,216,.1); display: grid; gap: 8px; }
#y-studio .ft .row { display: flex; gap: 8px; }
#y-studio .btn { flex: 1; background: none; border: 1px solid #c8a04a; color: #ece6d8; padding: 11px; font-family: inherit;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; border-radius: 2px; transition: background .35s, color .35s; }
#y-studio .btn:hover { background: #c8a04a; color: #16140f; }
#y-studio .btn.primary { background: #c8a04a; color: #16140f; }
#y-studio .btn.primary:hover { background: #e3c682; }
#y-studio .btn.subtle { border-color: rgba(236,230,216,.2); color: rgba(236,230,216,.7); }
#y-studio .btn.subtle:hover { background: rgba(236,230,216,.08); color: #ece6d8; }
#y-studio .note { font-size: 9.5px; letter-spacing: .06em; opacity: .45; text-align: center; }

/* when studio is on, the active section gets a faint frame + label */
.y-studio-on [data-sec] { transition: outline-color .4s ease; }
.y-studio-on [data-sec].y-active { outline: 1px solid rgba(200,160,74,.5); outline-offset: -1px; }
.y-studio-on [data-sec].y-active::after {
  content: attr(data-sec-name); position: absolute; top: 10px; left: 12px; z-index: 30;
  font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
  color: #c8a04a; background: rgba(0,0,0,.4); padding: 4px 8px; border-radius: 2px; pointer-events: none;
}
.y-studio-on [data-sec]:not(.y-active):hover { outline: 1px dashed rgba(200,160,74,.3); outline-offset: -1px; cursor: pointer; }

/* applied flash */
@keyframes yApplied { 0% { box-shadow: inset 0 0 0 2px rgba(200,160,74,.6); } 100% { box-shadow: inset 0 0 0 2px rgba(200,160,74,0); } }
.y-applied { animation: yApplied 1.1s ease; }

@media (max-width: 560px) { #y-studio-dot::after { display: none; } }
@media (prefers-reduced-motion: reduce) { #y-studio, #y-studio-dot, #y-studio-dot .pip { transition: none; } }