/* ============================================================
   FOTOS — as telas das ferramentas de foto da aba Artista (22/10/2026, etapa 5; fotos X1–X8 aprovadas pelo Renato).
   Num arquivo próprio para não mexer no painel.css junto com as outras etapas da aba (prefixo fx-).
   Peças: a galeria das Fotos de divulgação (X2), o editor "Editar a foto" (X3, X4), a janela "Fazer uma arte" (X5–X7),
   a escolha da foto e as etiquetas no cartão da aba (X1).
   ============================================================ */
.fx-xadrez { background:repeating-conic-gradient(#2b3138 0 25%, #20252b 0 50%) 0 0/20px 20px; }
html[data-modo="claro"] .fx-xadrez { background:repeating-conic-gradient(#e6e9ee 0 25%, #f6f7f9 0 50%) 0 0/20px 20px; }

/* ---------- o cartão da aba (X1) ---------- */
.ar-prev .fx-pv { position:relative; height:76px; flex:none; border-radius:8px; overflow:hidden; background:#000; }
.ar-prev .fx-pv > img { height:76px; display:block; }
.fx-tg { position:absolute; left:7px; top:7px; font:700 10.8px var(--f-ui); padding:3px 8px; border-radius:999px; background:rgba(10,12,16,.72); color:#fff; display:inline-flex; gap:4px; align-items:center; pointer-events:none; }
.fx-tg.sem_fundo { background:#7C3AED; } .fx-tg.melhorada { background:#0E7490; } .fx-tg.arte { background:#B45309; } .fx-tg.vetor { background:#1D4ED8; }
.ar-prev .fx-pv .fx-tg { left:4px; top:auto; bottom:4px; font-size:9.6px; padding:2px 6px; }

/* ---------- a galeria (X2) ---------- */
.fx-gal-topo { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.fx-gal-topo .sp { flex:1; }
.fx-chips { display:flex; gap:6px; flex-wrap:wrap; }
.fx-chip { height:28px; padding:0 11px; border-radius:999px; border:1px solid var(--c-border-2); background:none; color:var(--c-text-2); font:500 12.2px var(--f-ui); display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.fx-chip b { font-weight:600; color:var(--c-text-3); font-size:11.4px; }
.fx-chip:hover { color:var(--c-text); }
.fx-chip.on { background:var(--c-prim); color:var(--c-prim-text); border-color:transparent; font-weight:600; }
.fx-chip.on b { color:inherit; opacity:.8; }
.fx-gal { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; }
.fx-it { display:grid; gap:6px; min-width:0; }
.fx-it .qw { position:relative; min-width:0; }
.fx-it .q { position:relative; border-radius:12px; overflow:hidden; background:#0b0d10; aspect-ratio:1; display:grid; place-items:center; border:1px solid var(--c-border); cursor:pointer; padding:0; }
.fx-it .q:focus-visible { outline:2px solid var(--c-accent); outline-offset:2px; }
.fx-it .q > img { max-width:100%; max-height:100%; display:block; }
.fx-it .q.fx-xadrez, .fx-esc button.fx-xadrez { background:repeating-conic-gradient(#2b3138 0 25%, #20252b 0 50%) 0 0/20px 20px; }
html[data-modo="claro"] .fx-it .q.fx-xadrez, html[data-modo="claro"] .fx-esc button.fx-xadrez { background:repeating-conic-gradient(#e6e9ee 0 25%, #f6f7f9 0 50%) 0 0/20px 20px; }
.fx-it .ac { position:absolute; right:7px; top:7px; display:flex; gap:4px; }
.fx-it .ed { position:absolute; left:50%; bottom:10px; transform:translateX(-50%); display:flex; gap:5px; opacity:0; transition:opacity .1s; }
.fx-it .qw:hover .ed, .fx-it .qw:focus-within .ed { opacity:1; }
@media (pointer:coarse) { .fx-it .ed { opacity:1; } }
.fx-it .ed .nv-btn { background:rgba(255,255,255,.95); color:#14181C; border-color:transparent; box-shadow:0 2px 10px rgba(0,0,0,.35); }
.fx-it .leg { font-size:12px; color:var(--c-text-2); line-height:1.35; min-width:0; }
.fx-it .leg b { color:var(--c-text); font-weight:600; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fx-vazio { padding:26px 12px; text-align:center; color:var(--c-text-3); font-size:13px; }

/* ---------- o editor (X3, X4) ---------- */
.fx-tabs { margin-bottom:14px; }
.fx-tabs > button { display:inline-flex; align-items:center; gap:6px; }
.fx-ed { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; align-items:start; }
.fx-palco { position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--c-border); display:grid; place-items:center; min-height:420px; background:#0b0d10; touch-action:pan-y; }
.fx-palco.fx-xadrez { background:repeating-conic-gradient(#2b3138 0 25%, #20252b 0 50%) 0 0/20px 20px; }
.fx-palco canvas, .fx-palco > img { display:block; max-width:100%; }
.fx-palco.pincel canvas { cursor:crosshair; touch-action:none; }
.fx-palco .fx-ab { position:absolute; left:12px; bottom:12px; }
.fx-lado { display:grid; gap:12px; align-content:start; min-width:0; }
.fx-bloco { background:var(--c-raised); border:1px solid var(--c-border); border-radius:14px; padding:12px; display:grid; gap:10px; min-width:0; }
.fx-bt { font-size:12.4px; font-weight:600; color:var(--c-text); display:flex; justify-content:space-between; align-items:center; gap:8px; }
.fx-bt small { font-weight:400; color:var(--c-text-3); font-size:11.5px; }
.fx-bloco .fe2-seg > button, .fx-palco .fe2-seg > button { display:inline-flex; align-items:center; gap:5px; }
.fx-fundos { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.fx-fundo { border:1px solid var(--c-border-2); border-radius:11px; padding:4px 4px 6px; display:grid; gap:5px; font:500 11.5px var(--f-ui); color:var(--c-text-2); text-align:center; background:none; cursor:pointer; min-width:0; }
.fx-fundo.on { border-color:var(--c-accent); box-shadow:0 0 0 1px var(--c-accent) inset; color:var(--c-text); font-weight:600; }
.fx-fundo canvas { display:block; width:100%; aspect-ratio:4/3; border-radius:8px; }
.fx-ok, .fx-info, .fx-aviso { display:flex; gap:9px; align-items:flex-start; border-radius:12px; padding:10px 12px; font-size:12.4px; line-height:1.45; }
.fx-ok { background:var(--c-ok-soft); color:var(--c-ok); }
.fx-info { background:var(--c-info-soft); color:var(--c-info); }
.fx-aviso { background:var(--c-warn-soft); color:var(--c-warn); }
.fx-ok b, .fx-info b, .fx-aviso b { color:var(--c-text); font-weight:600; display:block; }
.fx-ok svg, .fx-info svg, .fx-aviso svg { flex:none; margin-top:1px; }
.fx-lin { display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:12.4px; color:var(--c-text-2); }
.fx-lin .sp { flex:1; }
.fx-reg { flex:1; min-width:80px; accent-color:var(--c-accent); }
.fx-chk { display:flex; gap:8px; align-items:center; font-size:12.4px; color:var(--c-text); cursor:pointer; }
.fx-chk input { width:16px; height:16px; margin:0; accent-color:var(--c-accent); flex:none; }
/* a carga da ferramenta (1ª vez) */
.fx-carga { position:absolute; inset:0; display:grid; place-items:center; background:rgba(8,10,14,.55); }
.fx-carga > div { width:min(320px, 86%); background:var(--c-surface); border:1px solid var(--c-border-2); border-radius:16px; padding:16px; display:grid; gap:10px; text-align:center; box-shadow:0 10px 40px rgba(0,0,0,.5); }
.fx-carga b { font-size:14px; color:var(--c-text); } .fx-carga p { margin:0; font-size:12.4px; color:var(--c-text-2); line-height:1.45; }
.fx-barra { height:8px; border-radius:99px; background:var(--c-hover); overflow:hidden; } .fx-barra i { display:block; height:100%; width:0; border-radius:99px; background:var(--c-accent); transition:width .2s; }
.fx-gira { width:30px; height:30px; margin:0 auto; border-radius:50%; border:3px solid var(--c-accent-soft); border-top-color:var(--c-accent); animation:fxGira .8s linear infinite; }
@keyframes fxGira { to { transform:rotate(360deg); } }
/* melhorar: antes | depois */
.fx-split { position:relative; display:block; width:100%; user-select:none; touch-action:none; }
.fx-split canvas, .fx-split img { display:block; width:100%; height:auto; }
.fx-split .dep { position:absolute; inset:0; }
.fx-split .barra { position:absolute; top:0; bottom:0; width:2px; margin-left:-1px; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.25); cursor:ew-resize; }
.fx-split .barra b { position:absolute; top:50%; left:50%; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; background:#fff; color:#111; display:grid; place-items:center; box-shadow:0 2px 10px rgba(0,0,0,.4); font-size:13px; }
.fx-split .rot { position:absolute; top:12px; font:700 11.5px var(--f-ui); padding:4px 10px; border-radius:999px; background:rgba(0,0,0,.6); color:#fff; pointer-events:none; }
.fx-split .rot.a { left:12px; } .fx-split .rot.d { right:12px; }
.fx-mud { display:grid; gap:8px; }
.fx-mud > label { display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:8px; align-items:center; font-size:12.6px; color:var(--c-text); cursor:pointer; }
.fx-mud > label > span:first-child { width:22px; height:22px; border-radius:7px; display:grid; place-items:center; background:var(--c-accent-soft); color:var(--c-accent-text); }
.fx-mud small { display:block; color:var(--c-text-3); font-size:11.4px; }

/* ---------- fazer uma arte (X5–X7) ---------- */
.fx-art-cab { display:flex; gap:14px 20px; flex-wrap:wrap; align-items:end; margin-bottom:14px; }
.fx-art-cab > div { display:grid; gap:6px; min-width:0; }
.fx-tipos { display:flex; gap:6px; flex-wrap:wrap; }
.fx-tipo { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 13px; border-radius:999px; border:1px solid var(--c-border-2); background:none; color:var(--c-text-2); font:500 12.6px var(--f-ui); white-space:nowrap; flex:none; cursor:pointer; }
.fx-tipo:hover { color:var(--c-text); }
.fx-tipo.on { border-color:var(--c-accent); color:var(--c-text); font-weight:600; box-shadow:0 0 0 1px var(--c-accent) inset; background:var(--c-accent-soft); }
.fx-art { display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:16px; align-items:start; }
.fx-vers { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; align-items:start; }
.fx-ver { display:grid; gap:7px; background:none; border:0; padding:0; text-align:left; cursor:pointer; min-width:0; }
.fx-ver canvas { display:block; width:100%; height:auto; border-radius:12px; border:1px solid var(--c-border); }
.fx-ver.on canvas { box-shadow:0 0 0 2px var(--c-accent); border-color:transparent; }
.fx-ver .vl { display:flex; justify-content:space-between; align-items:center; gap:6px; font-size:12.2px; color:var(--c-text-2); }
.fx-ver.on .vl { color:var(--c-text); font-weight:600; }
.fx-ver .vl i { width:16px; height:16px; border-radius:50%; border:1.5px solid var(--c-border-2); display:grid; place-items:center; flex:none; }
.fx-ver.on .vl i { background:var(--c-accent); border-color:var(--c-accent); color:#fff; }
.fx-ver.on .vl i svg { width:10px; height:10px; }
.fx-pontos { display:none; }
.fx-campo { display:grid; gap:4px; min-width:0; }
.fx-campo label { font-size:11.4px; color:var(--c-text-3); }
.fx-campo input { height:32px; border-radius:9px; border:1px solid var(--c-border-2); background:var(--c-surface); color:var(--c-text); padding:0 10px; font:13px var(--f-ui); width:100%; box-sizing:border-box; min-width:0; }
.fx-mini { display:flex; gap:10px; align-items:center; min-width:0; }
.fx-mini canvas { width:52px; height:52px; border-radius:10px; flex:none; }
.fx-mini > div { display:grid; gap:4px; min-width:0; }
.fx-mini .nm { font-size:12.4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fx-cores { display:flex; gap:6px; }
.fx-cores i { width:26px; height:26px; border-radius:8px; border:1px solid rgba(255,255,255,.15); }
.fx-sem { padding:30px 14px; border-radius:14px; border:1px dashed var(--c-border-2); text-align:center; color:var(--c-text-2); font-size:13px; line-height:1.5; }
.fx-sem b { display:block; color:var(--c-text); margin-bottom:4px; }
/* escolher a foto */
.fx-esc { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
.fx-esc button { border:1px solid var(--c-border); border-radius:12px; padding:0; aspect-ratio:1; background:#0b0d10; overflow:hidden; display:grid; place-items:center; position:relative; cursor:pointer; }
.fx-esc button:hover { border-color:var(--c-accent); }
.fx-esc img { max-width:100%; max-height:100%; display:block; }

/* ---------- celular ---------- */
@media (max-width:720px) {
  .fx-ed, .fx-art { grid-template-columns:1fr; }
  .fx-palco { min-height:0; }
  .fx-gal, .fx-esc { grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
  .fx-vers { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:10px; padding-bottom:4px; -webkit-overflow-scrolling:touch; }
  .fx-vers .fx-ver { flex:0 0 74%; scroll-snap-align:start; }
  .fx-vers.larga .fx-ver { flex-basis:92%; }
  .fx-pontos { display:flex; justify-content:center; gap:6px; margin-top:6px; }
  .fx-pontos i { width:7px; height:7px; border-radius:50%; background:var(--c-border-2); } .fx-pontos i.on { background:var(--c-accent); width:18px; border-radius:4px; }
  .fx-tabs { display:flex !important; width:100%; } .fx-tabs > button { flex:1; justify-content:center; padding:0 6px !important; font-size:12px !important; }
  .fx-tipos { flex-wrap:wrap; }   /* 23/10: 10 tipos de arte — quebram a linha (nada rola de lado) */
  .fx-art-cab > div { width:100%; }
}

/* 23/10: os 3 modos de recortar (quebram a linha no estreito) e o logo em vetor (o antes e o depois lado a lado) */
.fx-modos { flex-wrap:wrap; }
.fx-vt { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fx-vt figure { margin:0; min-height:240px; border-radius:14px; border:1px solid var(--c-border); display:flex; align-items:center; justify-content:center; padding:14px; overflow:hidden; }
.fx-vt figure img { max-width:100%; max-height:320px; object-fit:contain; }
.fx-vt .fx-sem { border:none; }
@media (max-width:720px) { .fx-vt { grid-template-columns:1fr; } .fx-vt figure { min-height:160px; } }
/* 23/10: a IA é do plano Pro (por enquanto só a conta dona do app) */
.fx-pro { border-color: color-mix(in srgb, var(--c-accent, #8B5CF6) 45%, transparent); }
.fx-pro svg { color: var(--c-accent, #8B5CF6); }

/* 23/10: criar um logo com IA (LogoIA, fotos L1–L4) */
.lgia-duas { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); gap:14px; }
.lgia-col { display:grid; gap:12px; align-content:start; min-width:0; }
.lgia-in { width:100%; padding:9px 12px; border-radius:10px; border:1px solid var(--c-border-2); background:var(--c-surface); color:var(--c-text); font:inherit; resize:vertical; }
.lgia-estilos { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.lgia-estilos > button { height:40px; border-radius:12px; border:1px solid var(--c-border-2); background:var(--c-surface); color:var(--c-text); font:600 12.6px var(--f-ui); cursor:pointer; }
.lgia-estilos > button.on { border:2px solid var(--c-accent); }
.lgia-bolas { display:flex; gap:8px; align-items:center; }
.lgia-bolas i { width:30px; height:30px; border-radius:50%; border:1px solid var(--c-border-2); }
.lgia-bolas input[type=color] { width:38px; height:32px; border:1px solid var(--c-border-2); border-radius:8px; background:none; padding:2px; }
.lgia-espera { display:grid; justify-items:center; gap:8px; padding:60px 20px; text-align:center; color:var(--c-text-2); }
.lgia-espera b { color:var(--c-text); font-size:15px; }
.lgia-muda { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.lgia-muda .lgia-in { flex:1; min-width:220px; border-radius:999px; height:36px; padding:0 14px; }
.lgia-grade { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.lgia-prevs { display:grid; grid-template-columns:1.4fr 1fr; gap:8px; align-items:center; }
.lgia-prevs span, .lgia-tres span, .lgia-grande { border-radius:12px; display:flex; align-items:center; justify-content:center; aspect-ratio:1; padding:8%; }
.lgia-prevs img, .lgia-tres img, .lgia-grande img { max-width:100%; max-height:100%; object-fit:contain; }
.lgia-ac { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.lgia-tres { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.lgia-grande { aspect-ratio:16/10; }
.lg-ia { margin-top:10px; }
@media (max-width:720px) { .lgia-duas, .lgia-grade { grid-template-columns:minmax(0, 1fr); } }

/* ===== Editar a foto com a IA (23/10, plano Pro; fotos E1–E5) — EditorIA e MesmoVisual, app/artista-fotos.js ===== */
.fxi { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:16px; align-items:start; }
.fxi-esq { display:grid; gap:10px; min-width:0; align-content:start; }
.fxi-palco { position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--c-border); display:grid; place-items:center; min-height:300px; background:#0b0d10; }
.fxi-foto { position:relative; margin:0 auto; }
.fxi-foto canvas { display:block; width:100%; height:auto; }
.fxi-ab { position:absolute; left:10px; top:10px; }
.fxi-ab > button { min-width:72px; justify-content:center; }
.fxi-rodando { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:8px; padding:20px; text-align:center; background:rgba(8,10,14,.62); color:#fff; }
.fxi-rodando b { font:600 14px var(--f-ui); }
.fxi-rodando small { font-size:12px; opacity:.85; max-width:320px; }
.fxi-rodando .btn-spin { width:26px; height:26px; border-width:3px; }
.fxi-marcar { position:relative; margin:0 auto; }
.fxi-marcar canvas { position:absolute; inset:0; width:100%; height:100%; display:block; cursor:crosshair; }
.fxi-marca { position:absolute; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; border:3px solid #00E5FF; background:rgba(0,229,255,.18); color:#fff; font:700 12.5px var(--f-ui); display:grid; place-items:center; cursor:pointer; box-shadow:0 0 0 2px rgba(0,0,0,.35); padding:0; }
.fxi-tirar { display:grid; gap:8px; }
.fxi-rot { position:absolute; left:10px; top:10px; background:rgba(0,0,0,.6); color:#fff; font:600 11.5px var(--f-ui); padding:4px 10px; border-radius:999px; pointer-events:none; }
.fxi-ctl { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.fxi-ctl .sp { flex:1; }
.fxi-versoes { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.fxi-versoes .fx-bt { margin-right:2px; }
.fxi-ver { all:unset; cursor:pointer; display:grid; gap:3px; justify-items:center; }
.fxi-ver img { width:62px; height:42px; object-fit:cover; border-radius:8px; border:1px solid var(--c-border-2); display:block; }
.fxi-ver span { font-size:10.5px; color:var(--c-text-3); max-width:70px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fxi-ver.on img { outline:2px solid var(--c-accent); outline-offset:1px; border-color:transparent; }
.fxi-ver:focus-visible img { outline:2px solid var(--c-accent); }
.fxi-lado { display:grid; gap:12px; align-content:start; min-width:0; }
.fxi-volta { justify-self:start; }
.fxi-txt { font-size:12.4px; line-height:1.45; }
.fxi-uso { font-size:12px; }
.fxi-pedir { position:relative; }
.fxi-pedir textarea { width:100%; min-height:0; padding:10px 46px 10px 12px; border-radius:12px; border:1px solid var(--c-border-2); background:var(--c-surface); color:var(--c-text); font:inherit; font-size:13.5px; resize:none; box-sizing:border-box; }
.fxi-env { position:absolute; right:8px; bottom:10px; width:32px; height:32px; border-radius:50%; border:0; background:var(--c-prim); color:var(--c-prim-text); display:grid; place-items:center; cursor:pointer; }
.fxi-env:disabled { opacity:.5; cursor:default; }
.fxi-bolha { padding:9px 12px; border-radius:12px; background:var(--c-sel); color:var(--c-text); font-size:13.4px; line-height:1.4; overflow-wrap:anywhere; }
.fxi-acoes { display:flex; flex-wrap:wrap; gap:6px; }
.fxi-ret { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.fxi-ret.dois { grid-template-columns:repeat(2,minmax(0,1fr)); }
.fxi-ret button { all:unset; box-sizing:border-box; cursor:pointer; display:grid; gap:3px; align-content:start; padding:6px; border-radius:10px; border:1px solid var(--c-border-2); background:var(--c-surface); min-width:0; }
.fxi-ret button:hover { border-color:var(--c-text-3); }
.fxi-ret button.on { border:2px solid var(--c-accent); padding:5px; }
.fxi-ret button[disabled] { opacity:.55; cursor:default; }
.fxi-ret button:focus-visible { outline:2px solid var(--c-accent); }
.fxi-ret .m { height:44px; border-radius:7px; overflow:hidden; display:block; background:#0b0d10; }
.fxi-ret .m img { width:100%; height:100%; object-fit:cover; display:block; }
.fxi-ret b { font-size:11.6px; color:var(--c-text); line-height:1.2; font-weight:600; }
.fxi-ret small { font-size:10.5px; color:var(--c-text-3); line-height:1.2; }
.fxi-ferr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.fxi-ferr.um { grid-template-columns:minmax(0,1fr); }
.fxi-ferr .nv-btn { justify-content:flex-start; width:100%; min-width:0; height:auto; min-height:var(--h-btn, 34px); padding-top:6px; padding-bottom:6px; white-space:normal; text-align:left; line-height:1.25; }
.fxi-ferr .nv-btn svg { flex:none; }
.fxi-fundos { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.fxi-fundo { min-height:36px; padding:6px 8px; border-radius:10px; border:1px solid var(--c-border-2); background:var(--c-surface); color:var(--c-text); font:600 11.8px var(--f-ui); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:5px; text-align:center; line-height:1.2; }
.fxi-fundo:hover { border-color:var(--c-text-3); }
.fxi-fundo.meu { border-style:dashed; color:var(--c-text-2); }
.fxi-fundo:disabled { opacity:.55; cursor:default; }
/* Mesmo visual em várias fotos (E4) */
.fxv { display:grid; grid-template-columns:300px minmax(0,1fr); gap:16px; align-items:start; }
.fxv-esq, .fxv-dir { display:grid; gap:12px; align-content:start; min-width:0; }
.fxv-ref { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.fxv-ref img { width:58px; height:40px; object-fit:cover; border-radius:7px; border:1px solid var(--c-border-2); }
.fxv-escolher { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; max-height:180px; overflow:auto; }
.fxv-escolher button { all:unset; cursor:pointer; border-radius:7px; overflow:hidden; height:46px; border:1px solid var(--c-border-2); }
.fxv-escolher img { width:100%; height:100%; object-fit:cover; display:block; }
.fxv-fotos { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.fxv-it { all:unset; box-sizing:border-box; cursor:pointer; position:relative; height:150px; border-radius:10px; overflow:hidden; background:#0b0d10; border:1px solid var(--c-border-2); display:block; }
.fxv-it > img { width:100%; height:100%; object-fit:cover; display:block; opacity:.6; }
.fxv-it.on > img { opacity:1; }
.fxv-it.on { outline:2px solid var(--c-accent); outline-offset:1px; border-color:transparent; }
.fxv-it[disabled] { cursor:default; }
.fxv-it .chk { position:absolute; right:6px; top:6px; width:22px; height:22px; border-radius:6px; border:1px solid #fff; background:rgba(0,0,0,.5); color:#0E1116; display:grid; place-items:center; }
.fxv-it.on .chk { background:var(--c-accent); }
.fxv-it .metade { position:absolute; top:0; bottom:0; width:50%; overflow:hidden; }
.fxv-it .metade.a { left:0; } .fxv-it .metade.d { right:0; }
.fxv-it .metade img { position:absolute; top:0; height:100%; width:200%; object-fit:cover; }
.fxv-it .metade.a img { left:0; } .fxv-it .metade.d img { right:0; }
.fxv-it .tag { position:absolute; left:6px; bottom:6px; background:rgba(0,0,0,.6); color:#fff; font-size:10.5px; padding:2px 7px; border-radius:999px; }
@media (max-width: 900px) {
  .fxi, .fxv { grid-template-columns:minmax(0,1fr); }
  .fxi-palco { min-height:220px; }
}
@media (max-width: 720px) {
  .fxi-ferr { grid-template-columns:minmax(0,1fr); }
  .fxv-fotos { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fxv-it { height:120px; }
}