/* ==========================================================================
   Ferramentas interativas (Animações de Texto · Cursores Personalizados)
   Layout em 3 colunas: presets · palco · ajustes
   ========================================================================== */
#textosView, #cursoresView { display: none; }
body.modo-textos #textosView, body.modo-cursores #cursoresView { display: grid; }
body.modo-textos #conteudo > section:not(#textosView),
body.modo-cursores #conteudo > section:not(#cursoresView) { display: none; }
body.modo-textos .rodape, body.modo-cursores .rodape { display: none; }

.tl {
  --tl-painel: #101013;
  --tl-caixa: #16161a;
  --tl-caixa-2: #1c1c21;
  --tl-borda: rgba(255,255,255,0.07);
  --tl-borda-2: rgba(255,255,255,0.12);
  grid-template-columns: 330px minmax(0, 1fr) 330px;
  gap: 14px;
  padding: 14px 20px 20px;
  height: calc(100vh - 64px);
  min-height: 640px;
}
.tl-col {
  min-height: 0; display: flex; flex-direction: column; gap: 10px;
  background: var(--tl-painel); border: 1px solid var(--tl-borda); border-radius: 22px; padding: 10px;
}

/* ---- coluna esquerda ---- */
.tl-cab { padding: 10px 10px 6px; }
.tl-voltar {
  display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2);
  transition: color var(--t);
}
.tl-voltar span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--tl-borda-2); }
.tl-voltar svg { width: 13px; height: 13px; }
.tl-voltar:hover { color: var(--text); }
.tl-cab h2 { margin: 14px 0 0; font-size: 23px; font-weight: 500; letter-spacing: -0.03em; display: flex; align-items: center; gap: 10px; }
.tl-info { width: 16px; height: 16px; color: var(--text-3); cursor: help; }

.tl-caixa { background: var(--tl-caixa); border: 1px solid var(--tl-borda); border-radius: 16px; padding: 12px; }
.tl-presets { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tl-tit { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--text); }
.tl-tit-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--tl-caixa-2); border: 1px solid var(--tl-borda-2); color: var(--text-2); flex: none; }
.tl-tit-ic svg { width: 14px; height: 14px; }
.tl-tit small { font-size: 11px; color: var(--text-3); font-weight: 400; }

.tl-filtros { margin-top: 12px; display: flex; gap: 2px; padding: 3px; border-radius: 11px; background: #0d0d10; border: 1px solid var(--tl-borda); }
.tl-filtros button {
  flex: 1; height: 30px; border-radius: 8px; font-size: 12.5px; color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; transition: background var(--t), color var(--t);
}
.tl-filtros button:hover { color: var(--text); }
.tl-filtros button[aria-pressed="true"] { background: #26262c; color: var(--text); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }
.tl-filtros svg { width: 13px; height: 13px; }

.tl-lista {
  margin-top: 12px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; padding: 2px 4px 4px 2px;
  scrollbar-width: thin; scrollbar-color: #2a2a30 transparent;
}
.tl-grupo-rot { grid-column: 1 / -1; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); padding: 8px 2px 0; }
.tl-vazio { grid-column: 1 / -1; padding: 28px 8px; text-align: center; color: var(--text-3); font-size: 12.5px; line-height: 1.5; }
.tl-preset {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 6px 6px 9px;
  border-radius: 14px; border: 1px solid var(--tl-borda); background: #131317; text-align: center;
  transition: border-color var(--t), background var(--t), transform 200ms var(--ease);
}
.tl-preset:hover { border-color: var(--tl-borda-2); background: #17171c; }
.tl-preset[aria-pressed="true"] { border-color: rgba(255,255,255,0.75); background: #18181d; box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset; }
.tl-preset-midia {
  position: relative; height: 92px; border-radius: 10px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #1d1d22 0%, #0b0b0d 70%);
  display: grid; place-items: center; color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.tl-preset-midia svg { width: 30px; height: 30px; }
.tl-preset-tag {
  position: absolute; top: 7px; left: 7px; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.1em;
  padding: 2px 5px; border-radius: 4px; color: var(--text-3); background: rgba(255,255,255,0.05); border: 1px solid var(--tl-borda);
}
.tl-preset-nome { font-size: 12px; color: var(--text-2); }
.tl-preset[aria-pressed="true"] .tl-preset-nome { color: var(--text); font-weight: 500; }
.tl-preset-fav { position: absolute; top: 10px; right: 10px; width: 12px; height: 12px; color: #ff6b8a; }

/* ---- palco ---- */
.tl-palco {
  position: relative; min-height: 0; overflow: hidden; border-radius: 22px;
  background: #0a0a0c; border: 1px solid var(--tl-borda);
}

/* ---- coluna direita ---- */
.tl-dir { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2a2a30 transparent; }
.tl-promo {
  position: relative; overflow: hidden; border-radius: 16px; padding: 14px 16px 16px; border: 1px solid var(--tl-borda);
  background: radial-gradient(90% 120% at 100% 0%, rgba(224,101,27,0.35), transparent 60%),
              radial-gradient(80% 120% at 0% 100%, rgba(29,95,184,0.35), transparent 60%), #121216;
}
.tl-promo-tag { display: inline-block; font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; padding: 3px 7px; border-radius: 999px; background: #f3f3f5; color: #0b0b0e; }
.tl-promo p { margin: 10px 0 0; font-size: 14.5px; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; color: var(--text); }
.tl-promo small { display: block; margin-top: 8px; font-size: 12px; color: var(--text-2); line-height: 1.45; }

.tl-ctrl { display: grid; grid-template-columns: 82px minmax(0, 1fr) 62px; gap: 10px; align-items: center; margin-top: 12px; }
.tl-ctrl label { font-size: 12.5px; color: var(--text-2); display: inline-flex; align-items: center; gap: 5px; }
.tl-ctrl label svg { width: 12px; height: 12px; color: var(--text-3); }
.tl-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 30px; margin: 0; border-radius: 9px; cursor: pointer;
  background: linear-gradient(90deg, #2b2b31 0 var(--p, 50%), #1a1a1f var(--p, 50%) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}
.tl-range::-webkit-slider-runnable-track { height: 30px; background: transparent; }
.tl-range::-moz-range-track { height: 30px; background: transparent; }
.tl-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 6px; height: 22px; margin-top: 4px; border-radius: 4px;
  background: #f3f3f5; box-shadow: 0 0 0 3px rgba(0,0,0,0.35);
}
.tl-range::-moz-range-thumb { width: 6px; height: 22px; border: 0; border-radius: 4px; background: #f3f3f5; }
.tl-range:focus-visible { outline: 2px solid rgba(255,255,255,0.5); outline-offset: 2px; }
.tl-val {
  height: 30px; border-radius: 9px; background: #1a1a1f; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
  display: grid; place-items: center; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums;
}
.tl-btn {
  width: 100%; height: 36px; margin-top: 14px; border-radius: 12px; font-size: 13px; color: var(--text);
  border: 1px solid var(--tl-borda-2); background: #1a1a1f; transition: background var(--t), border-color var(--t);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.tl-btn:hover { background: #222228; border-color: rgba(255,255,255,0.22); }
.tl-btn svg { width: 14px; height: 14px; }
.tl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tl-chip {
  height: 30px; padding: 0 11px; border-radius: 9px; font-size: 12.5px; color: var(--text-2);
  background: #1a1a1f; border: 1px solid transparent; transition: color var(--t), background var(--t), border-color var(--t);
}
.tl-chip:hover { color: var(--text); }
.tl-chip[aria-pressed="true"] { color: var(--text); background: #26262c; border-color: var(--tl-borda-2); }
.tl-campo { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 12px; }
.tl-campo span:first-child { font-size: 12.5px; color: var(--text-2); }
.tl-campo .tl-val { place-items: center start; padding: 0 12px; }
.tl-cor { display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 10px; border-radius: 9px; background: #1a1a1f; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05); font-family: var(--mono); font-size: 11.5px; color: var(--text-2); position: relative; cursor: pointer; }
.tl-cor i { width: 16px; height: 16px; border-radius: 5px; flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2); }
.tl-cor input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.tl-switch { justify-self: end; width: 34px; height: 20px; border-radius: 999px; background: #2a2a30; position: relative; transition: background var(--t); }
.tl-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #f3f3f5; transition: transform 220ms var(--ease); }
.tl-switch[aria-checked="true"] { background: #6b6b75; }
.tl-switch[aria-checked="true"]::after { transform: translateX(14px); }

.tl-acoes { margin-top: auto; padding-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tl-acoes .tl-btn { margin: 0; height: 42px; border-radius: 14px; }
.tl-acoes .tl-btn[aria-pressed="true"] svg { color: #ff6b8a; fill: #ff6b8a; }
.tl-acoes .tl-prim {
  grid-column: 1 / -1; height: 46px; border-color: rgba(255,170,130,0.35);
  background: linear-gradient(180deg, #2a1a16, #17110f); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.tl-acoes .tl-prim:hover { background: linear-gradient(180deg, #33201a, #1c1411); border-color: rgba(255,170,130,0.55); }
.tl-aviso { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(8px); opacity: 0; pointer-events: none; z-index: 30;
  padding: 9px 14px; border-radius: 999px; font-size: 12.5px; color: #0b0b0e; background: #f3f3f5; transition: opacity 200ms, transform 200ms var(--ease); white-space: nowrap; }
.tl-aviso.on { opacity: 1; transform: translateX(-50%); }

/* ==========================================================================
   Palco · Animações de Texto
   ========================================================================== */
.tx-palco { background: #6f8fb3; container-type: size; }
.tx-palco video, .tx-palco .tx-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tx-palco::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10,20,40,0.28) 0%, rgba(10,20,40,0) 30%, rgba(10,20,40,0) 60%, rgba(10,20,40,0.35) 100%); }
.tx-moldura { position: absolute; inset: 0; z-index: 2; padding: clamp(18px, 2.6vw, 34px); display: flex; flex-direction: column; color: #fff; }
.tx-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font-size: 11.5px; font-weight: 500; letter-spacing: 0.01em; }
.tx-nav-esq { display: flex; gap: 22px; }
.tx-logo { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.22em; }
.tx-logo i { width: 11px; height: 11px; border-radius: 50%; border: 1.6px solid currentColor; display: inline-block; }
.tx-nav-dir { justify-self: end; display: flex; align-items: center; gap: 14px; letter-spacing: 0.04em; }
.tx-menu { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.18); backdrop-filter: blur(8px); display: grid; place-items: center; }
.tx-menu i { width: 12px; height: 6px; border-top: 1.5px solid #fff; border-bottom: 1.5px solid #fff; display: block; }
.tx-h1 { margin: clamp(20px, 4vh, 48px) 0 0; font-size: clamp(40px, 12.5cqw, 128px); font-weight: 500; line-height: 0.92; letter-spacing: -0.045em; text-transform: uppercase; }
.tx-base { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.tx-h2 { margin: 0; font-size: clamp(22px, 4.6cqw, 46px); font-weight: 500; line-height: 0.98; letter-spacing: -0.035em; text-transform: uppercase; }
.tx-cards { display: flex; gap: 10px; }
.tx-card { display: flex; gap: 10px; align-items: center; padding: 8px 10px 8px 8px; border-radius: 14px; background: rgba(255,255,255,0.16); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.22); min-width: 0; }
.tx-card img { width: 52px; height: 42px; border-radius: 9px; object-fit: cover; flex: none; }
.tx-card b { display: block; font-size: 10.5px; letter-spacing: 0.03em; }
.tx-card span { display: block; font-size: 9.5px; opacity: 0.85; margin-top: 2px; letter-spacing: 0.03em; }
.tx-card u { display: inline-block; margin-top: 4px; font-size: 9.5px; text-decoration: underline; text-underline-offset: 2px; }
.tx-num b { font-size: 22px; letter-spacing: -0.03em; font-weight: 500; }
@media (max-width: 1400px) { .tx-cards .tx-card:first-child { display: none; } }

/* partes do texto dividido */
.tx-li { display: block; }
.tx-li-in { display: inline-block; }
.tx-pal { display: inline-block; white-space: nowrap; }
.tx-let { display: inline-block; white-space: pre; }
.tx-mascara .tx-li { overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.tx-persp .tx-li { perspective: 600px; }

/* prévia nos cards */
.tl-preset-midia .tx-amostra { font-size: 15.5px; font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; text-align: center; color: #f3f3f5; }

/* ==========================================================================
   Palco · Cursores
   ========================================================================== */
.cr-palco {
  background-color: #0b0b0d;
  background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 22px 22px;
  display: grid; place-items: center;
}
.cr-palco canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.cr-meio { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.cr-meio p { margin: 0; font-size: 12.5px; color: var(--text-3); }
.cr-meio div { display: flex; gap: 10px; }
.cr-meio button {
  height: 38px; padding: 0 16px; border-radius: 12px; font-size: 12.5px; color: var(--text);
  border: 1px solid var(--tl-borda-2); background: #16161a; display: inline-flex; align-items: center; gap: 8px;
  transition: background var(--t), border-color var(--t);
}
.cr-meio button:hover { background: #1f1f25; border-color: rgba(255,255,255,0.25); }
.cr-meio svg { width: 14px; height: 14px; }
.cr-palco.sem-cursor, .cr-palco.sem-cursor * { cursor: none !important; }

@media (max-width: 1180px) {
  .tl { grid-template-columns: 290px minmax(0, 1fr); height: auto; }
  .tl-palco { min-height: 560px; }
  .tl-dir { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .tl { grid-template-columns: minmax(0, 1fr); padding: 10px 12px 16px; }
  .tl-presets { max-height: 420px; }
  .tl-palco { min-height: 480px; }
}
.tl-dir > * { flex-shrink: 0; }

/* ==========================================================================
   Palco · Formas de Partículas
   ========================================================================== */
#particulasView { display: none; }
body.modo-particulas #particulasView { display: grid; }
body.modo-particulas #conteudo > section:not(#particulasView) { display: none; }
body.modo-particulas .rodape { display: none; }
.pt-palco { background: #030306; }
.pt-gl { position: absolute; inset: 0; }
.pt-dica { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); margin: 0; font-size: 11.5px; color: rgba(255,255,255,0.35); pointer-events: none; white-space: nowrap; }
.pt-zoom { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: rgba(16,16,19,0.8); border: 1px solid var(--tl-borda-2); backdrop-filter: blur(8px); z-index: 4; }
.pt-zoom button { width: 32px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: var(--text-2); transition: background var(--t), color var(--t); }
.pt-zoom button:hover { background: #26262c; color: var(--text); }
.pt-zoom svg { width: 14px; height: 14px; }
.pt-mini { background-size: cover; background-position: center; }
.pt-var {
  position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  padding: 3px 8px; border-radius: 999px; font-size: 9.5px; color: #0b0b0e; background: rgba(243,243,245,0.92);
}
.pt-var svg { width: 9px; height: 9px; }
.pt-mais { padding: 0; }
.pt-mais-cab { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; text-align: left; color: var(--text); }
.pt-mais-cab b { display: block; font-size: 13.5px; font-weight: 500; }
.pt-mais-cab small { display: block; margin-top: 3px; font-size: 10.5px; color: var(--text-3); }
.pt-mais-cab svg { width: 16px; height: 16px; color: var(--text-2); transition: transform 200ms var(--ease); flex: none; }
.pt-mais-cab[aria-expanded="true"] svg { transform: rotate(180deg); }
.pt-mais-corpo { padding: 0 12px 12px; }
.pt-video { margin-top: 10px; }
.pt-video .tl-chip { flex: 1; }
.pt-palco.gravando::before { content: "● REC"; position: absolute; top: 12px; right: 14px; z-index: 5; font-family: var(--mono); font-size: 11px; color: #ff4d4d; }

/* ==========================================================================
   Compressor de Imagens
   ========================================================================== */
#compressorView { display: none; }
body.modo-compressor #compressorView { display: grid; }
body.modo-compressor #conteudo > section:not(#compressorView) { display: none; }
body.modo-compressor .rodape { display: none; }
#compressorView .tl-esq > .tl-caixa:first-of-type { flex-shrink: 0; }
.cp-enviar { margin-top: 12px; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: #1a1a1f; border: 1px solid var(--tl-borda); cursor: pointer; transition: border-color var(--t), background var(--t); }
.cp-enviar:hover { border-color: var(--tl-borda-2); background: #1e1e24; }
.cp-enviar-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #f3f3f5; color: #0b0b0e; flex: none; }
.cp-enviar-ic svg { width: 16px; height: 16px; }
.cp-enviar b { display: block; font-size: 13.5px; font-weight: 500; }
.cp-enviar small { display: block; margin-top: 2px; font-family: var(--mono); font-size: 9.5px; color: var(--text-3); letter-spacing: 0.02em; }
.cp-lista { margin-top: 8px; max-height: 210px; overflow-y: auto; display: grid; gap: 4px; scrollbar-width: thin; scrollbar-color: #2a2a30 transparent; }
.cp-lista:empty { display: none; }
.cp-item { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 30px 6px 6px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; }
.cp-item:hover { background: #1a1a1f; }
.cp-item[aria-current="true"] { background: #1c1c21; border-color: var(--tl-borda-2); }
.cp-item img { width: 38px; height: 38px; border-radius: 7px; object-fit: cover; flex: none; background: #222; }
.cp-item span { min-width: 0; }
.cp-item b { display: block; font-size: 12px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-item em { display: block; font-style: normal; font-size: 11px; color: var(--text-3); margin-top: 2px; }
.cp-item em b { display: inline; color: var(--text-2); }
.cp-item em i { font-style: normal; color: #7ee2a8; }
.cp-item em i.cp-pior, .cp-pior b, .cp-item em i.cp-pior { color: #ff9b7a; }
.cp-erro { color: #ff9b7a !important; }
.cp-rem { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: var(--text-3); }
.cp-rem:hover { background: #26262c; color: var(--text); }
.cp-rem svg { width: 12px; height: 12px; }
.cp-total { padding: 6px 4px 2px; font-size: 11.5px; color: var(--text-3); border-top: 1px solid var(--tl-borda); margin-top: 4px; }
.cp-total b { color: var(--text); font-weight: 500; }

.cp-palco { background: #111114; display: flex; }
.cp-palco.cp-arrastando { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35); }
.cp-soltar { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 60px; cursor: pointer; width: 100%; height: 100%; justify-content: center; }
.cp-soltar-ic { width: 40px; height: 40px; color: var(--text-2); margin-bottom: 6px; }
.cp-soltar b { font-size: 17px; font-weight: 500; color: var(--text); }
.cp-soltar span { font-size: 13px; color: var(--text-2); max-width: 44ch; line-height: 1.5; }
.cp-soltar small { margin-top: 6px; font-size: 11.5px; color: var(--text-3); }
.cp-ver { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 14px; gap: 12px; }
.cp-ver[hidden] { display: none; }
.cp-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cp-nome { font-size: 13.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-topo .tl-btn { margin: 0; width: auto; padding: 0 14px; height: 34px; }
.cp-topo .tl-btn:disabled { opacity: 0.4; pointer-events: none; }
.cp-comp {
  position: relative; flex: 1; min-height: 0; border-radius: 16px; overflow: hidden; cursor: ew-resize; user-select: none; touch-action: none;
  background-color: #0c0c0f; background-image: linear-gradient(45deg, #17171b 25%, transparent 25%, transparent 75%, #17171b 75%), linear-gradient(45deg, #17171b 25%, transparent 25%, transparent 75%, #17171b 75%);
  background-size: 20px 20px; background-position: 0 0, 10px 10px;
}
.cp-comp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.cp-antes { position: absolute; inset: 0; }
.cp-linha { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.25); pointer-events: none; }
.cp-linha span { position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
.cp-linha span::before, .cp-linha span::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; border: 5px solid transparent; margin-top: -5px; }
.cp-linha span::before { left: 6px; border-right-color: #111; }
.cp-linha span::after { right: 6px; border-left-color: #111; }
.cp-tag { position: absolute; top: 12px; padding: 5px 10px; border-radius: 999px; font-size: 11.5px; color: #fff; background: rgba(0,0,0,0.55); backdrop-filter: blur(6px); pointer-events: none; }
.cp-tag-a { left: 12px; } .cp-tag-b { right: 12px; }
.cp-carregando { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10,10,12,0.55); font-size: 13px; color: var(--text); backdrop-filter: blur(2px); }
.cp-carregando[hidden] { display: none; }
.cp-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.cp-stats > span { flex: 1; min-width: 140px; padding: 10px 14px; border-radius: 12px; background: #16161a; border: 1px solid var(--tl-borda); }
.cp-stats small { display: block; font-size: 11px; color: var(--text-3); }
.cp-stats b { display: block; margin-top: 3px; font-size: 18px; font-weight: 500; letter-spacing: -0.02em; color: var(--text); }
.cp-stats em { display: block; font-style: normal; font-size: 11.5px; color: var(--text-2); margin-top: 1px; }
.cp-stats .cp-eco b { color: #7ee2a8; }
.cp-stats .cp-eco.cp-pior b { color: #ff9b7a; }
.cp-stats .cp-alerta { flex-basis: 100%; min-width: 0; padding: 8px 12px; font-size: 12px; color: #ffcf9e; background: rgba(255,155,90,0.08); border-color: rgba(255,155,90,0.25); }
.cp-cab { display: flex; align-items: center; justify-content: space-between; }
.cp-reset { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: var(--text-3); }
.cp-reset:hover { background: #222228; color: var(--text); }
.cp-reset svg { width: 13px; height: 13px; }
.cp-nota { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--text-3); }
.cp-nota:empty { display: none; }
.cp-sub { display: block; margin-top: 14px; font-size: 12px; color: var(--text-2); }
.cp-num { width: 100%; height: 30px; border-radius: 9px; border: 0; background: #1a1a1f; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05); color: var(--text); padding: 0 12px; font: inherit; font-size: 12.5px; }
.cp-num:focus { outline: 2px solid rgba(255,255,255,0.35); outline-offset: 1px; }
.tl-chip:disabled { opacity: 0.35; cursor: not-allowed; }
#cpFundoBox[hidden] { display: none; }

/* ==========================================================================
   Tecido Holográfico
   ========================================================================== */
#tecidoView { display: none; }
body.modo-tecido #tecidoView { display: grid; }
body.modo-tecido #conteudo > section:not(#tecidoView) { display: none; }
body.modo-tecido .rodape { display: none; }
#tecidoView .tl-esq > .tl-caixa:first-of-type { flex-shrink: 0; }
#tecidoView .cp-enviar + .cp-enviar, #tecidoView .hg-arq + .cp-enviar { margin-top: 8px; }
.hg-palco { background: radial-gradient(80% 70% at 50% 45%, #121216 0%, #050506 70%); }
.hg-arq { margin-top: 6px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 10px; background: #1c1c21; border: 1px solid var(--tl-borda-2); font-size: 12px; color: var(--text-2); }
.hg-arq[hidden] { display: none; }
.hg-arq span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hg-arq button { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: var(--text-3); flex: none; }
.hg-arq button:hover { background: #26262c; color: var(--text); }
.hg-arq svg { width: 12px; height: 12px; }
.hg-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.hg-duo .tl-btn { margin: 0; font-size: 12.5px; }
.hg-amostra { box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 0 0 1px rgba(255,255,255,0.06); }
.tl-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.tl-campo:has(.tl-switch) { grid-template-columns: minmax(0, 1fr) auto; }

/* ==========================================================================
   Movimento da Imagem
   ========================================================================== */
#movimentoView { display: none; }
body.modo-movimento #movimentoView { display: grid; }
body.modo-movimento #conteudo > section:not(#movimentoView) { display: none; }
body.modo-movimento .rodape { display: none; }
.mv-palco { background: #0d0d10; }
.mv-cats { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 4px; }
.mv-cats .tl-chip { height: 26px; padding: 0 9px; font-size: 11.5px; border-radius: 8px; }
.mv-mini { overflow: hidden; }
.mv-slots { margin-top: 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.mv-slot {
  position: relative; aspect-ratio: 1 / 1; border-radius: 10px; border: 1px dashed rgba(255,255,255,0.14); background: #141418 center/cover no-repeat;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--text-3); transition: border-color var(--t), color var(--t);
}
.mv-slot:hover { border-color: rgba(255,255,255,0.35); color: var(--text); }
.mv-slot b { font-size: 10.5px; font-weight: 500; }
.mv-slot svg { width: 12px; height: 12px; }
.mv-slot.cheio { border-style: solid; border-color: var(--tl-borda-2); }
.mv-x { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; background: rgba(0,0,0,0.65); color: #fff; opacity: 0; transition: opacity var(--t); }
.mv-slot:hover .mv-x { opacity: 1; }
.mv-x svg { width: 10px; height: 10px; }
.mv-add { cursor: pointer; }

/* ==========================================================================
   SVG para 3D
   ========================================================================== */
#svg3dView { display: none; }
body.modo-svg3d #svg3dView { display: grid; }
body.modo-svg3d #conteudo > section:not(#svg3dView) { display: none; }
body.modo-svg3d .rodape { display: none; }
#svg3dView .tl-esq > .tl-caixa:first-of-type { flex-shrink: 0; }
.s3-palco { background: #07070a; }
.s3-mini svg { width: 34px; height: 34px; fill: #d7dae0; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6)); }
.s3-mini svg path { fill: #d7dae0; }

/* ==========================================================================
   Menu suspenso de Ferramentas
   ========================================================================== */
.fm-painel {
  position: fixed; z-index: 60; overflow: auto; padding: 12px; border-radius: 22px;
  background: rgba(16,16,19,0.96); border: 1px solid rgba(255,255,255,0.09); backdrop-filter: blur(18px);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.85);
  opacity: 0; transform: translateY(-6px); transition: opacity 160ms ease, transform 200ms var(--ease);
  scrollbar-width: thin; scrollbar-color: #2a2a30 transparent;
}
.fm-painel.on { opacity: 1; transform: none; }
.fm-painel[hidden] { display: none; }
.fm-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fm-item {
  display: flex; gap: 14px; align-items: stretch; text-align: left; padding: 8px; border-radius: 16px;
  background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06); color: inherit;
  transition: background 160ms, border-color 160ms;
}
.fm-item:hover, .fm-item:focus-visible { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); outline: none; }
.fm-img { flex: none; width: 168px; height: 104px; border-radius: 11px; overflow: hidden; background: #0b0b0e; }
.fm-img img { width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; transition: transform 500ms var(--ease); }
.fm-item:hover .fm-img img { transform: scale(1.04); }
.fm-txt { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding-right: 6px; }
.fm-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--text-3); }
.fm-tag em { font-style: normal; font-family: var(--font); font-size: 10.5px; letter-spacing: 0; font-weight: 600; color: #0b0b0e; background: #f3f3f5; padding: 1px 7px; border-radius: 999px; }
.fm-txt b { font-size: 16px; font-weight: 500; letter-spacing: -0.02em; color: var(--text); }
.fm-txt small { font-size: 12.5px; line-height: 1.45; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fm-rodape { display: flex; justify-content: flex-end; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.07); }
.fm-todas { height: 38px; padding: 0 16px; border-radius: 12px; font-size: 13px; color: var(--text); background: #1c1c21; border: 1px solid rgba(255,255,255,0.12); transition: background 160ms, border-color 160ms; }
.fm-todas:hover { background: #24242a; border-color: rgba(255,255,255,0.22); }
@media (max-width: 860px) { .fm-grade { grid-template-columns: 1fr; } .fm-img { width: 120px; height: 80px; } }

/* ==========================================================================
   Cor Líquida
   ========================================================================== */
#corliquidaView { display: none; }
body.modo-corliquida #corliquidaView { display: grid; }
body.modo-corliquida #conteudo > section:not(#corliquidaView) { display: none; }
body.modo-corliquida .rodape { display: none; }
.cq-palco { display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 0%, #141418 0%, #0a0a0c 70%); }
.cq-quadro { position: relative; border-radius: 14px; overflow: hidden; background: #111; box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06); transition: width 260ms var(--ease), height 260ms var(--ease); }
.cq-mini { height: 74px; padding: 0; }
.cq-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cq-duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cq-duplo .tl-btn { margin: 0; }
.cq-duplo-in { margin-top: 12px; }
.tl-btn:disabled { opacity: 0.4; cursor: default; }
.cq-cor-lin { display: grid; grid-template-columns: 82px minmax(0, 1fr) 30px; gap: 8px; align-items: center; margin-top: 10px; }
.cq-cor-lin > span { font-size: 12.5px; color: var(--text-2); }
.cq-cor-x { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--text-3); background: #1a1a1f; transition: color var(--t), background var(--t); }
.cq-cor-x:hover:not(:disabled) { color: var(--text); background: #24242a; }
.cq-cor-x:disabled { opacity: 0.35; cursor: default; }
.cq-cor-x svg { width: 12px; height: 12px; }
.cq-tec { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 12px; }
.cq-tec > span { font-size: 12.5px; color: var(--text-2); }
.cq-tec .tl-filtros { margin-top: 0; }
#cqDurs { margin-top: 10px; }
.cq-gravar { margin-top: 10px; }
#corliquidaView [hidden] { display: none; }

/* ==========================================================================
   Entrada da página Ferramentas (gradiente Antipode + mosaico)
   ========================================================================== */
.fe { padding-top: 22px; }
.fe-hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-rows: minmax(0, 1fr); gap: 32px;
  height: clamp(520px, 64vh, 700px); margin-bottom: 40px;
  border-radius: 24px; border: 1px solid rgba(255,255,255,0.07);
  background: radial-gradient(70% 90% at 15% 20%, #2a2c33 0%, #0b0c10 55%, #05060a 100%);
}
.fe-hero-gl { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); display: block; z-index: -2; filter: blur(16px); opacity: 0.8; }
.fe-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(5,6,10,0.15) 0%, rgba(5,6,10,0.25) 45%, rgba(5,6,10,0.7) 100%), linear-gradient(0deg, rgba(5,6,10,0.55) 0%, transparent 40%); }
.fe-hero-txt { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 48px 0 48px clamp(24px, 3vw, 44px); min-width: 0; }
.fe-hero-pill {
  align-self: flex-start; display: inline-block; height: 30px; line-height: 28px; padding: 0 13px; border-radius: 999px;
  font-size: 12.5px; color: var(--text-2); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.fe-hero-txt h2 { margin: 18px 0 0; font-weight: 400; font-size: clamp(28px, 2.7vw, 50px); line-height: 1.06; letter-spacing: -0.045em; color: var(--text); }
.fe-hero-txt p { margin: 14px 0 0; font-size: clamp(14px, 1.05vw, 17px); color: var(--text-2); }
.fe-hero-txt p b { color: var(--text); font-weight: 500; }
.fe-hero-fav {
  position: absolute; left: clamp(24px, 3vw, 44px); bottom: clamp(20px, 2.4vw, 32px);
  display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 18px; border-radius: 12px;
  font-size: 14px; color: var(--text); background: rgba(16,16,20,0.55); border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background var(--t), border-color var(--t);
}
.fe-hero-fav:hover { background: rgba(30,30,36,0.7); border-color: rgba(255,255,255,0.24); }
.fe-hero-fav svg { width: 14px; height: 14px; color: #ff4f7a; }

.fe-hero-mosaico {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0 16px 0 0; min-width: 0; min-height: 0; height: 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 74%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 74%, transparent 100%);
}
.fe-col { position: relative; overflow: hidden; min-width: 0; height: 100%; }
.fe-col-trilho { display: flex; flex-direction: column; gap: 12px; animation: feSobe var(--dur, 50s) linear infinite; will-change: transform; }
.fe-col-rev .fe-col-trilho { animation-direction: reverse; }
.fe-hero-mosaico:hover .fe-col-trilho { animation-play-state: paused; }
@keyframes feSobe { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 6px)); } }
.fe-tile {
  position: relative; display: block; width: 100%; flex: none; border-radius: 14px; overflow: hidden; padding: 0;
  background: #0d0d10; border: 1px solid rgba(255,255,255,0.08); cursor: pointer;
  box-shadow: 0 18px 40px rgba(0,0,0,0.35); transition: border-color var(--t), transform 400ms var(--ease);
}
.fe-tile:hover { border-color: rgba(255,255,255,0.3); transform: scale(1.015); }
.fe-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 900ms var(--ease); }
.fe-tile:hover img { transform: scale(1.05); }
.fe-t-alto { aspect-ratio: 4 / 4.4; }
.fe-t-medio { aspect-ratio: 4 / 3.4; }
.fe-t-baixo { aspect-ratio: 16 / 10; }
.fe-tile-nome {
  position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11.5px; font-weight: 500; color: #fff; padding: 5px 9px; border-radius: 8px;
  background: rgba(10,10,14,0.62); border: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
@media (prefers-reduced-motion: reduce) { .fe-col-trilho { animation: none; } }
@media (max-width: 1100px) {
  .fe-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
  .fe-hero-mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fe-hero-mosaico .fe-col:nth-child(3) { display: none; }
}
@media (max-width: 760px) {
  .fe-hero { grid-template-columns: minmax(0, 1fr); height: auto; }
  .fe-hero-txt { padding: 56px 22px 96px; }
  .fe-hero-mosaico { display: none; }
}
@media (max-width: 760px) { .fe-hero-txt h2 br { display: none; } }

/* ==========================================================================
   Cards da página Ferramentas · layout horizontal + glow prata no hover
   ========================================================================== */
#ferramentasView .fe-grade { gap: 18px; }
#ferramentasView .fe-card {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: stretch;
  min-height: 340px; padding: 8px; border-radius: 20px;
  background: linear-gradient(180deg, #141417 0%, #0e0e11 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  transition: border-color 320ms var(--ease), box-shadow 320ms var(--ease), transform 320ms var(--ease);
}
#ferramentasView .fe-card:not(.fe-breve):hover {
  transform: none; border-color: rgba(235,238,245,0.85);
  box-shadow: 0 0 0 1px rgba(235,238,245,0.35), 0 0 22px rgba(220,226,238,0.28), 0 0 60px rgba(200,208,224,0.12), inset 0 1px 0 rgba(255,255,255,0.12);
}
/* mídia: painel escuro com a imagem em leve perspectiva */
#ferramentasView .fe-midia {
  aspect-ratio: auto; height: 100%; min-height: 0; border-radius: 14px; background: #08080a;
  perspective: 1100px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}
#ferramentasView .fe-midia img {
  position: absolute; inset: 0; transform-origin: 50% 50%;
  transform: rotateY(-14deg) rotateX(4deg) scale(1.28); filter: brightness(0.72) saturate(0.95);
  transition: transform 900ms var(--ease), filter 600ms var(--ease);
}
#ferramentasView .fe-midia::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(5,5,8,0.65) 100%), linear-gradient(90deg, rgba(5,5,8,0.35), transparent 30%, transparent 70%, rgba(5,5,8,0.35));
}
#ferramentasView .fe-card:not(.fe-breve):hover .fe-midia img { transform: rotateY(-8deg) rotateX(2deg) scale(1.3); filter: brightness(0.95) saturate(1.05); }
#ferramentasView .fe-tag, #ferramentasView .fe-selo, #ferramentasView .fe-ic { display: none; }
/* texto */
#ferramentasView .fe-corpo {
  border-top: 0; padding: 14px 18px 16px 22px; display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
#ferramentasView .fe-pills { display: flex; align-items: center; gap: 6px; margin-bottom: auto; }
#ferramentasView .fe-pills span {
  height: 24px; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center;
  font-size: 11.5px; color: var(--text-2); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
}
#ferramentasView .fe-pills em {
  font-style: normal; height: 20px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600; color: #0b0b0e; background: #f3f3f5; box-shadow: 0 0 0 1.5px #0e0e11, 0 0 0 2.5px rgba(255,255,255,0.55);
}
#ferramentasView .fe-corpo h3 {
  display: flex; align-items: center; gap: 0; font-size: clamp(20px, 1.55vw, 27px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.12;
}
#ferramentasView .fe-seta {
  width: 0; height: 22px; flex: none; opacity: 0; transform: translate(-6px, 4px);
  transition: width 320ms var(--ease), opacity 260ms var(--ease), transform 320ms var(--ease), margin 320ms var(--ease);
}
#ferramentasView .fe-card:not(.fe-breve):hover .fe-seta { width: 22px; margin-right: 12px; opacity: 1; transform: none; }
#ferramentasView .fe-corpo p { font-size: 14px; line-height: 1.55; color: var(--text-2); max-width: 46ch; }
/* coluna da direita: imagem do outro lado (espelhado, como na referência) */
@media (min-width: 901px) {
  #ferramentasView .fe-grade > .fe-card:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); }
  #ferramentasView .fe-grade > .fe-card:nth-child(even) .fe-midia { order: 2; }
  #ferramentasView .fe-grade > .fe-card:nth-child(even) .fe-midia img { transform: rotateY(14deg) rotateX(4deg) scale(1.28); }
  #ferramentasView .fe-grade > .fe-card:nth-child(even):hover .fe-midia img { transform: rotateY(8deg) rotateX(2deg) scale(1.3); }
  #ferramentasView .fe-grade > .fe-card:nth-child(even) .fe-corpo { padding: 14px 22px 16px 18px; }
}
@media (max-width: 1250px) and (min-width: 901px) { #ferramentasView .fe-card { min-height: 300px; } #ferramentasView .fe-corpo p { font-size: 13px; } }
@media (max-width: 620px) {
  #ferramentasView .fe-card { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  #ferramentasView .fe-midia { aspect-ratio: 16 / 10; height: auto; }
  #ferramentasView .fe-corpo { padding: 16px 12px 12px; }
  #ferramentasView .fe-pills { margin-bottom: 18px; }
}
@media (hover: none) { #ferramentasView .fe-seta { width: 22px; margin-right: 12px; opacity: 1; transform: none; } }

/* capas em vídeo dos cards (tocam só quando o card está visível) */
#ferramentasView .fe-midia video.fe-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: 50% 50%;
  transform: rotateY(-14deg) rotateX(4deg) scale(1.28); filter: brightness(0.72) saturate(0.95);
  transition: transform 900ms var(--ease), filter 600ms var(--ease), opacity 400ms var(--ease);
}
#ferramentasView .fe-card:not(.fe-breve):hover .fe-midia video.fe-video { transform: rotateY(-8deg) rotateX(2deg) scale(1.3); filter: brightness(0.98) saturate(1.05); }
@media (min-width: 901px) {
  #ferramentasView .fe-grade > .fe-card:nth-child(even) .fe-midia video.fe-video { transform: rotateY(14deg) rotateX(4deg) scale(1.28); }
  #ferramentasView .fe-grade > .fe-card:nth-child(even):hover .fe-midia video.fe-video { transform: rotateY(8deg) rotateX(2deg) scale(1.3); }
}