/* ═══════════════════════════════════════════════════════════════
   FACE PLAN™ — PREMIUM SUITE (camada aditiva)
   Modos de comparação, lupa raio-X, motion design e micro-interações.
   Nenhum estilo aqui sobrescreve regras existentes de forma destrutiva:
   tudo usa classes próprias com prefixo .pfx- ou efeitos puramente visuais.
   ═══════════════════════════════════════════════════════════════ */

.pfx-hidden{display:none !important;}

/* ── BARRA DE MODOS DE VISUALIZAÇÃO ───────────────────────────── */
.pfx-viewbar{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:8px 10px;margin:0 0 10px;
  background:rgba(12,12,12,.72);
  border:1px solid rgba(201,169,110,.16);
  border-radius:30px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 6px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
}
.pfx-viewbar .pfx-vb-label{
  font-size:8.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted,#6E6C66);padding:0 6px 0 8px;white-space:nowrap;
}
.pfx-vbtn{
  position:relative;overflow:hidden;
  padding:7px 13px;border-radius:20px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(24,24,24,.85);
  color:var(--muted,#6E6C66);
  font-size:10.5px;font-weight:500;letter-spacing:.04em;
  font-family:'DM Sans',sans-serif;cursor:pointer;
  transition:all .25s cubic-bezier(.25,.8,.25,1);
  white-space:nowrap;
}
.pfx-vbtn:hover{border-color:rgba(201,169,110,.35);color:var(--text,#F0EDE8);transform:translateY(-1px);}
.pfx-vbtn.on{
  border-color:rgba(201,169,110,.55);
  background:linear-gradient(135deg,rgba(201,169,110,.18),rgba(138,96,48,.12));
  color:var(--gold,#C9A96E);
  box-shadow:0 0 16px rgba(201,169,110,.15), inset 0 1px 0 rgba(255,255,255,.06);
}
.pfx-vbtn.pfx-kbd-btn{margin-left:auto;padding:7px 10px;}
.pfx-vbtn.pfx-draw-btn{gap:4px;display:inline-flex;align-items:center;}

/* Annotate overlay */
.pfx-annotate-canvas{
  position:absolute;inset:0;z-index:40;
  width:100%;height:100%;
  pointer-events:none;touch-action:none;
  border-radius:inherit;
}
.pfx-annotate-canvas.active{pointer-events:auto;cursor:crosshair;}
.slider-wrap.annotating .s-handle,
.slider-wrap.annotating .hotspot-btn,
.slider-wrap.annotating .mask-btn,
.slider-wrap.annotating .hotspot-layer,
.slider-wrap.annotating .hotspot-layer.hidden{
  pointer-events:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}
.slider-wrap.annotating .face-mask-layer{
  pointer-events:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}
.pfx-annotate-bar{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%) translateY(8px);
  z-index:45;display:none;align-items:center;gap:6px;
  padding:8px 10px;border-radius:980px;
  background:rgba(18,18,18,.88);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  opacity:0;transition:opacity .2s ease, transform .2s ease;
  max-width:calc(100% - 24px);flex-wrap:wrap;justify-content:center;
}
.pfx-annotate-bar.show{display:flex;opacity:1;transform:translateX(-50%) translateY(0);}
.pfx-ann-swatch{
  width:20px;height:20px;border-radius:50%;border:2px solid transparent;
  background:var(--c,#111);cursor:pointer;padding:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
}
.pfx-ann-swatch.on{border-color:#fff;transform:scale(1.1);}
.pfx-ann-sep{width:1px;height:16px;background:rgba(255,255,255,.12);margin:0 2px;}
.pfx-ann-tool{
  width:28px;height:28px;border-radius:8px;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);color:#F0EDE8;font-size:13px;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  padding:0;font-family:inherit;
}
.pfx-ann-tool.on{border-color:rgba(201,169,110,.55);color:var(--gold,#C9A96E);background:rgba(201,169,110,.12);}
.pfx-ann-action{
  border:none;background:rgba(255,255,255,.08);color:#F0EDE8;
  font-size:11px;font-weight:600;font-family:inherit;
  padding:7px 12px;border-radius:980px;cursor:pointer;
}
.pfx-ann-action.primary{
  background:linear-gradient(180deg,#e8d4a8,#C9A96E);color:#111;
}

/* ── PALCO DOS MODOS (lado a lado / fade / raio-x) ───────────── */
.pfx-stage{position:relative;border-radius:8px;overflow:hidden;}
.pfx-stage img{user-select:none;-webkit-user-drag:none;}

/* Lado a lado */
.pfx-side{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.pfx-pane{position:relative;border-radius:8px;overflow:hidden;background:#0D0D0D;}
.pfx-pane img{display:block;width:100%;height:auto;max-height:550px;object-fit:contain;object-position:center top;}
.pfx-pane .pfx-tag{
  position:absolute;top:11px;left:12px;font-size:9px;font-weight:700;
  letter-spacing:.12em;padding:3px 10px;border-radius:20px;text-transform:uppercase;
  background:rgba(0,0,0,.65);color:rgba(255,255,255,.75);pointer-events:none;z-index:3;
}
.pfx-pane .pfx-tag.gold{background:rgba(201,169,110,.2);border:1px solid rgba(201,169,110,.45);color:var(--gold,#C9A96E);}
.pfx-pane::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);border-radius:8px;
}

/* Fade / Raio-X — empilhados */
.pfx-stack{position:relative;}
.pfx-stack .pfx-base{display:block;width:100%;height:auto;max-height:550px;object-fit:contain;object-position:center top;}
.pfx-stack .pfx-over{
  position:absolute;top:0;left:0;width:100%;height:100%;
  object-fit:contain;object-position:center top;
}

/* Controles do fade */
.pfx-fadebar{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;margin-top:8px;
  background:rgba(12,12,12,.72);border:1px solid rgba(201,169,110,.16);
  border-radius:30px;backdrop-filter:blur(10px);
}
.pfx-fadebar .pfx-fb-lbl{font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted,#6E6C66);white-space:nowrap;}
.pfx-fadebar input[type=range]{
  flex:1;-webkit-appearance:none;appearance:none;height:3px;border-radius:2px;
  background:linear-gradient(to right,#3A3228,var(--gold,#C9A96E));outline:none;cursor:pointer;
}
.pfx-fadebar input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--gold,#C9A96E);border:2px solid #0A0A0A;
  box-shadow:0 0 10px rgba(201,169,110,.5);cursor:grab;
}
.pfx-fadebar input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:var(--gold,#C9A96E);
  border:2px solid #0A0A0A;box-shadow:0 0 10px rgba(201,169,110,.5);cursor:grab;
}
.pfx-play{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  border:1px solid rgba(201,169,110,.4);
  background:linear-gradient(135deg,rgba(201,169,110,.2),rgba(138,96,48,.1));
  color:var(--gold,#C9A96E);font-size:12px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .25s;
}
.pfx-play:hover{transform:scale(1.08);box-shadow:0 0 18px rgba(201,169,110,.3);}
.pfx-play.playing{background:var(--gold,#C9A96E);color:#0A0A0A;box-shadow:0 0 22px rgba(201,169,110,.45);}

/* ── LUPA RAIO-X ──────────────────────────────────────────────── */
.pfx-xray{cursor:none;}
.pfx-lens{
  position:absolute;width:170px;height:170px;border-radius:50%;
  border:2px solid rgba(201,169,110,.85);
  box-shadow:0 0 0 4px rgba(10,10,10,.55), 0 0 40px rgba(201,169,110,.35), inset 0 0 24px rgba(0,0,0,.35);
  background-repeat:no-repeat;background-color:#0D0D0D;
  pointer-events:none;z-index:6;
  transform:translate(-50%,-50%);
  opacity:0;transition:opacity .25s;
}
.pfx-xray:hover .pfx-lens,.pfx-lens.active{opacity:1;}
.pfx-lens::after{
  content:'APÓS · 2.2×';position:absolute;bottom:-26px;left:50%;transform:translateX(-50%);
  font-size:8.5px;font-weight:700;letter-spacing:.14em;color:var(--gold,#C9A96E);
  background:rgba(10,10,10,.8);padding:3px 9px;border-radius:12px;
  border:1px solid rgba(201,169,110,.3);white-space:nowrap;
}
.pfx-xray-hint{
  position:absolute;top:11px;left:50%;transform:translateX(-50%);
  font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(0,0,0,.65);color:rgba(255,255,255,.8);
  padding:4px 12px;border-radius:20px;pointer-events:none;z-index:5;
  animation:pfxHintPulse 2.4s ease-in-out infinite;
}
@keyframes pfxHintPulse{0%,100%{opacity:.85;}50%{opacity:.4;}}

/* ── OVERLAY DE ATALHOS DE TECLADO ───────────────────────────── */
.pfx-kbd-overlay{
  position:fixed;inset:0;z-index:600;display:flex;align-items:center;justify-content:center;
  background:rgba(5,5,5,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.pfx-kbd-overlay.show{opacity:1;pointer-events:auto;}
.pfx-kbd-panel{
  background:rgba(16,16,16,.95);border:1px solid rgba(201,169,110,.3);
  border-radius:18px;padding:26px 30px;max-width:380px;width:90%;
  box-shadow:0 24px 64px rgba(0,0,0,.7), 0 0 40px rgba(201,169,110,.08);
  transform:translateY(14px) scale(.97);transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.pfx-kbd-overlay.show .pfx-kbd-panel{transform:translateY(0) scale(1);}
.pfx-kbd-panel h3{
  font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:600;
  color:var(--gold,#C9A96E);margin-bottom:16px;letter-spacing:.04em;
}
.pfx-kbd-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.05);}
.pfx-kbd-row:last-child{border-bottom:none;}
.pfx-kbd-row span{font-size:11.5px;color:var(--text,#F0EDE8);opacity:.85;}
.pfx-kbd-row kbd{
  font-family:'DM Sans',ui-monospace,monospace;font-size:10px;font-weight:600;
  color:var(--gold,#C9A96E);background:rgba(201,169,110,.1);
  border:1px solid rgba(201,169,110,.3);border-bottom-width:2px;
  border-radius:6px;padding:3px 8px;white-space:nowrap;
}

/* ── PARTÍCULAS / SHIMMER DO REVEAL ──────────────────────────── */
.pfx-particles{position:absolute;inset:0;z-index:30;pointer-events:none;}
.pfx-shimmer{
  position:absolute;inset:0;z-index:28;pointer-events:none;overflow:hidden;border-radius:8px;
}
.pfx-shimmer::before{
  content:'';position:absolute;top:-20%;bottom:-20%;width:55%;left:-65%;
  background:linear-gradient(100deg,transparent 0%,rgba(201,169,110,.13) 45%,rgba(255,240,210,.22) 50%,rgba(201,169,110,.13) 55%,transparent 100%);
  transform:skewX(-12deg);
  animation:pfxSweep 1.5s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes pfxSweep{to{left:130%;}}

/* Entrada em cascata dos cards do resultado */
.pfx-reveal{opacity:0;transform:translateY(22px) scale(.985);}
.pfx-reveal-in{
  opacity:1;transform:translateY(0) scale(1);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}

/* ── RIPPLE NOS BOTÕES ───────────────────────────────────────── */
.pfx-rippled{position:relative;overflow:hidden;}
.pfx-ripple{
  position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,235,200,.35) 0%,rgba(201,169,110,.12) 60%,transparent 70%);
  transform:scale(0);animation:pfxRipple .55s ease-out forwards;
}
@keyframes pfxRipple{to{transform:scale(2.6);opacity:0;}}

/* ── POLIMENTOS GLOBAIS (apenas aditivos / hover) ────────────── */
.gen-btn{position:relative;overflow:hidden;}
.gen-btn::after{
  content:'';position:absolute;top:-30%;bottom:-30%;width:36%;left:-60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg);transition:none;pointer-events:none;
}
.gen-btn:hover::after{animation:pfxBtnShine 1s cubic-bezier(.4,0,.2,1);}
@keyframes pfxBtnShine{to{left:135%;}}

.card{transition:transform .35s cubic-bezier(.25,.8,.25,1), box-shadow .35s cubic-bezier(.25,.8,.25,1), border-color .35s;}
.card:hover{transform:translateY(-2px);box-shadow:0 16px 42px rgba(0,0,0,.5), 0 0 28px rgba(201,169,110,.05);}

button:focus-visible,a:focus-visible,input:focus-visible{
  outline:2px solid rgba(201,169,110,.55) !important;outline-offset:2px;
}
::selection{background:rgba(201,169,110,.32);color:#FFF8EC;}

/* Pulso sutil no botão do slider para indicar interatividade */
.s-btn{animation:pfxHandleHint 3.2s ease-in-out 1.2s 2;}
@keyframes pfxHandleHint{
  0%,100%{transform:translateX(0);}
  12%{transform:translateX(-7px);}
  28%{transform:translateX(6px);}
  42%{transform:translateX(0);}
}

/* Count-up dourado */
.pfx-counting{color:var(--gold,#C9A96E) !important;text-shadow:0 0 14px rgba(201,169,110,.35);}

/* ── ACESSIBILIDADE: reduz movimento ─────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .pfx-shimmer::before,.s-btn,.pfx-xray-hint{animation:none !important;}
  .pfx-reveal{opacity:1;transform:none;}
  .pfx-reveal-in{transition:none;}
  .pfx-ripple{display:none;}
  .card,.card:hover{transform:none;}
}

/* ── MOBILE ──────────────────────────────────────────────────── */
@media (max-width:760px){
  .pfx-viewbar{border-radius:16px;padding:7px 8px;}
  .pfx-viewbar .pfx-vb-label{display:none;}
  .pfx-vbtn{padding:7px 10px;font-size:10px;}
  .pfx-side{grid-template-columns:1fr;gap:6px;}
  .pfx-lens{width:130px;height:130px;}
}