/*
 * NodeFolio v1.2.0 — canvas styles
 * Scoped under .nodefolio-canvas-root to avoid leaking into the host theme.
 * Typography aligned with rafaelmonzillo.com/2024 (DM Sans 400/500/700).
 */

.nodefolio-canvas-root {
    --nf-bg:           #EBEBEB;
    --nf-card:         #f6f6f2;
    --nf-curve:        #bfbfb8;
    --nf-accent:       #7d1f4f;
    --nf-text:         #191919;
    --nf-muted:        #999;
    --nf-radius:       14px;
    --nf-shadow:       0 2px 16px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.05);
    --nf-shadow-strong:0 8px 32px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.08);
    --nf-shadow-resize:0 6px 24px rgba(125,31,79,0.22), 0 0 0 1px rgba(125,31,79,0.18);

    background: var(--nf-bg);
    color: var(--nf-text);
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    position: relative;
}
.nodefolio-canvas-root *,
.nodefolio-canvas-root *::before,
.nodefolio-canvas-root *::after {
    box-sizing: border-box;
}
/* mark */
.nodefolio-canvas-root .nf-mark {
    padding: 14px 24px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--nf-muted);
    border-bottom: 1px solid rgba(0,0,0,0.07);
}
/* canvas wrap */
.nodefolio-canvas-root .nf-canvas-wrap {
    width: 100%;
    overflow-x: hidden;
    overflow-y: visible;
}
/* canvas surface — responsive: width fluid up to canvasW cap, aspect-ratio preserves height */
.nodefolio-canvas-root .nf-canvas {
    position: relative;
    width: min(100vw, var(--nf-canvas-w, 1440px));
    aspect-ratio: var(--nf-aspect, 1440 / 4180);
    margin: 0 auto;
}
/* layout: pan — fixed viewport, free canvas, scrollable internally */
.nodefolio-canvas-root.nf-layout-pan .nf-canvas-wrap {
    height: var(--nf-viewport-h, 720px);
    overflow: hidden;
    position: relative;
}
.nodefolio-canvas-root.nf-layout-pan .nf-canvas {
    width: var(--nf-canvas-w, 1440px);
    aspect-ratio: auto;
    height: var(--nf-canvas-h, 4180px);
    transform-origin: 0 0;
}
/* layout: vertical-scroll — page scroll handles Y axis */
.nodefolio-canvas-root.nf-layout-vertical-scroll .nf-canvas-wrap {
    height: auto;
    overflow-x: hidden;
    overflow-y: visible;
}
/* connections layer */
.nodefolio-canvas-root .nf-conn-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}
.nodefolio-canvas-root .nf-conn {
    stroke: var(--nf-curve);
    stroke-width: 1.5;
    fill: none;
    pointer-events: stroke;
    cursor: pointer;
    transition: stroke 0.15s, stroke-width 0.15s;
}
.nodefolio-canvas-root .nf-conn:hover {
    stroke: #d97a6c;
    stroke-width: 2.5;
}
.nodefolio-canvas-root .nf-conn.is-ghost {
    stroke: var(--nf-accent);
    stroke-dasharray: 5 4;
    stroke-width: 1.5;
    pointer-events: none;
}
/* node */
.nodefolio-canvas-root .nf-node {
    position: absolute;
    background: var(--nf-card);
    border-radius: var(--nf-radius);
    border: 1px solid rgba(0,0,0,0.07);
    box-shadow: var(--nf-shadow);
    z-index: 1;
    transition: box-shadow 0.18s;
}
.nodefolio-canvas-root .nf-node:hover { box-shadow: var(--nf-shadow-strong); }
.nodefolio-canvas-root .nf-node.is-dragging { z-index: 5; box-shadow: var(--nf-shadow-strong); }
.nodefolio-canvas-root .nf-node.is-resizing { z-index: 6; box-shadow: var(--nf-shadow-resize); }
.nodefolio-canvas-root .nf-node-inner {
    position: relative;
    border-radius: var(--nf-radius);
    overflow: hidden;
}
/* handles — siblings of .nf-node-inner so half-circles don't get clipped */
.nodefolio-canvas-root .nf-handle {
    position: absolute;
    top: 50%;
    width: 11px; height: 11px;
    background: var(--nf-card);
    border: 1px solid var(--nf-curve);
    border-radius: 50%;
    transform: translateY(-50%);
    z-index: 3;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.nodefolio-canvas-root .nf-h-out { right: -5.5px; cursor: crosshair; }
.nodefolio-canvas-root .nf-h-in  { left:  -5.5px; }
.nodefolio-canvas-root .nf-node:hover .nf-handle { border-color: var(--nf-accent); }
.nodefolio-canvas-root .nf-h-out:hover { background: var(--nf-accent); transform: translateY(-50%) scale(1.25); }
.nodefolio-canvas-root .nf-h-in.is-target { background: var(--nf-accent); border-color: var(--nf-accent); transform: translateY(-50%) scale(1.4); }
/* resize corner */
.nodefolio-canvas-root .nf-resize {
    position: absolute;
    bottom: 0; right: 0;
    width: 22px; height: 22px;
    cursor: nwse-resize;
    z-index: 4;
}
.nodefolio-canvas-root .nf-resize::before {
    content: "";
    position: absolute;
    bottom: 6px; right: 6px;
    width: 8px; height: 8px;
    border-right: 1.5px solid rgba(0,0,0,0.18);
    border-bottom: 1.5px solid rgba(0,0,0,0.18);
    transition: border-color 0.15s, width 0.15s, height 0.15s;
}
.nodefolio-canvas-root .nf-resize:hover::before {
    border-right-color: var(--nf-accent);
    border-bottom-color: var(--nf-accent);
    width: 10px; height: 10px;
}
.nodefolio-canvas-root .nf-node.is-resizing .nf-resize::before {
    border-right-color: var(--nf-accent);
    border-bottom-color: var(--nf-accent);
}
/* node header / footer */
.nodefolio-canvas-root .nf-node-header {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 12px 18px 10px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.nodefolio-canvas-root .nf-lbl-type { color: var(--nf-muted); }
.nodefolio-canvas-root .nf-lbl-name { color: var(--nf-text); }
.nodefolio-canvas-root .nf-node-body { padding: 18px; }
.nodefolio-canvas-root .nf-node-footer {
    display: flex; justify-content: space-between;
    padding: 9px 18px 12px;
    border-top: 1px solid rgba(0,0,0,0.05);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--nf-muted);
}
/* title node */
.nodefolio-canvas-root .nf-title-kicker {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--nf-muted);
    margin-bottom: 18px;
}
.nodefolio-canvas-root .nf-title-lines {
    font-weight: 400;
    font-size: clamp(32px, 4.5vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: var(--nf-text);
    margin: 0 0 22px;
}
.nodefolio-canvas-root .nf-title-lines em {
    font-style: normal;
    color: var(--nf-accent);
    font-weight: 500;
}
.nodefolio-canvas-root .nf-title-meta {
    display: flex; justify-content: space-between;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--nf-muted);
    border-top: 1px solid rgba(0,0,0,0.07);
    padding-top: 14px;
}
/* highlight node (destaque) — pull-statement tier between title and text */
.nodefolio-canvas-root .nf-highlight-kicker {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--nf-muted);
    margin-bottom: 14px;
}
.nodefolio-canvas-root .nf-highlight-lines {
    font-weight: 600;
    font-size: clamp(30px, 4.6vw, 60px);
    line-height: 1.02;
    letter-spacing: -0.045em;
    color: var(--nf-accent);
    margin: 0;
}
.nodefolio-canvas-root .nf-highlight-lines em {
    font-style: normal;
    color: var(--nf-text);
}
/* text node */
.nodefolio-canvas-root .nf-text-body { font-size: 14px; line-height: 1.55; color: var(--nf-text); }
.nodefolio-canvas-root .nf-text-body p { margin: 0 0 10px; }
.nodefolio-canvas-root .nf-text-body p:last-child { margin-bottom: 0; }
.nodefolio-canvas-root .nf-text-body em {
    font-style: normal;
    color: var(--nf-accent);
    font-weight: 500;
}
/* tags */
.nodefolio-canvas-root .nf-text-tags {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 14px;
}
.nodefolio-canvas-root .nf-tag {
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 11px;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 999px;
    color: var(--nf-text);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.nodefolio-canvas-root a.nf-tag { cursor: pointer; }
.nodefolio-canvas-root a.nf-tag:hover {
    background: var(--nf-accent);
    border-color: var(--nf-accent);
    color: #fff;
}
.nodefolio-canvas-root a.nf-tag::after {
    content: " ↗";
    opacity: 0.4;
    margin-left: 1px;
}
.nodefolio-canvas-root a.nf-tag:hover::after { opacity: 1; }
/* media stages */
.nodefolio-canvas-root .nf-media {
    width: 100%;
    background: #1a1a1a;
    overflow: hidden;
    line-height: 0;
    user-select: none;
}
.nodefolio-canvas-root .nf-media img,
.nodefolio-canvas-root .nf-media video {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    -webkit-user-drag: none;
    user-drag: none;
}
.nodefolio-canvas-root .nf-media.aspect-tall   { aspect-ratio: 9 / 16; }
.nodefolio-canvas-root .nf-media.aspect-wide   { aspect-ratio: 16 / 9; }
.nodefolio-canvas-root .nf-media.aspect-square { aspect-ratio: 1 / 1; }
.nodefolio-canvas-root .nf-media.aspect-43     { aspect-ratio: 4 / 3; }
.nodefolio-canvas-root .nf-media.aspect-32     { aspect-ratio: 3 / 2; }
.nodefolio-canvas-root .nf-media.aspect-ultra  { aspect-ratio: 21 / 9; }
.nodefolio-canvas-root .nf-media.aspect-tall img,
.nodefolio-canvas-root .nf-media.aspect-tall video,
.nodefolio-canvas-root .nf-media.aspect-wide img,
.nodefolio-canvas-root .nf-media.aspect-wide video,
.nodefolio-canvas-root .nf-media.aspect-square img,
.nodefolio-canvas-root .nf-media.aspect-square video,
.nodefolio-canvas-root .nf-media.aspect-43 img,
.nodefolio-canvas-root .nf-media.aspect-43 video,
.nodefolio-canvas-root .nf-media.aspect-32 img,
.nodefolio-canvas-root .nf-media.aspect-32 video,
.nodefolio-canvas-root .nf-media.aspect-ultra img,
.nodefolio-canvas-root .nf-media.aspect-ultra video { height: 100%; }
/* embedded YouTube/Vimeo player (iframe). pointer-events off so node drag works;
   re-enabled when player controls are ON so the viewer can interact. */
.nodefolio-canvas-root .nf-media .nf-video-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none;
}
.nodefolio-canvas-root .nf-media .nf-video-frame.is-interactive { pointer-events: auto; }
/* video badge */
.nodefolio-canvas-root .nf-video-badge {
    position: absolute; top: 12px; left: 14px;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.78);
    background: rgba(0,0,0,0.4);
    padding: 4px 8px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 2;
}
/* gallery grid */
.nodefolio-canvas-root .nf-gallery-grid {
    display: grid;
    gap: 8px;
}
.nodefolio-canvas-root .nf-gallery-grid.cols-1 { grid-template-columns: repeat(1, 1fr); }
.nodefolio-canvas-root .nf-gallery-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.nodefolio-canvas-root .nf-gallery-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.nodefolio-canvas-root .nf-gallery-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.nodefolio-canvas-root .nf-gallery-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.nodefolio-canvas-root .nf-gallery-grid.cols-6 { grid-template-columns: repeat(6, 1fr); }
.nodefolio-canvas-root .nf-gallery-grid .nf-media { aspect-ratio: 1 / 1; }
/* compare */
.nodefolio-canvas-root .nf-compare {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: #1a1a1a;
    overflow: hidden;
}
.nodefolio-canvas-root .nf-compare img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    user-drag: none; -webkit-user-drag: none;
}
.nodefolio-canvas-root .nf-compare-after {
    clip-path: inset(0 0 0 50%);
}
/* html iframe */
.nodefolio-canvas-root .nf-html-stage {
    width: 100%;
    overflow: hidden;
    background: #1a1a1a;
}
.nodefolio-canvas-root .nf-html-frame {
    border: 0;
    transform-origin: 0 0;
    pointer-events: none;
}
/* ------------------------------------------------------------
 * Editorial case mode (v1.11) — opt-in, legacy layouts unchanged.
 * ------------------------------------------------------------ */
.nodefolio-canvas-root.nf-layout-editorial {
    --nf-editorial-paper: #f7f5ee;
    --nf-editorial-navy: #1b0f4f;
    --nf-editorial-lime: #b7fd07;
    display: block;
    background: var(--nf-bg);
}
.nodefolio-canvas-root.nf-layout-editorial .nf-canvas-wrap {
    min-width: 0;
    padding: 26px 0 90px;
    overflow-x: hidden;
    background-color: var(--nf-bg);
}
.nodefolio-canvas-root.nf-layout-editorial .nf-canvas {
    width: 100%;
    max-width: var(--nf-canvas-w, 1440px);
    aspect-ratio: var(--nf-aspect, 1440 / 11200);
}
.nodefolio-canvas-root .nf-node-editorial {
    --nf-node-surface: #f6f6f2;
    --nf-node-ink: #120d22;
    color: var(--nf-node-ink);
    background: var(--nf-node-surface);
    border: 0;
    box-shadow: 0 14px 32px rgba(27,15,79,.12);
}
.nodefolio-canvas-root .nf-node-editorial:hover { box-shadow: 0 18px 38px rgba(27,15,79,.18); }
.nodefolio-canvas-root .nf-node-editorial .nf-node-header { color: var(--nf-node-ink); }
.nodefolio-canvas-root .nf-node-editorial .nf-lbl-type { color: color-mix(in srgb, var(--nf-node-ink), transparent 52%); }
.nodefolio-canvas-root .nf-editorial-intro { padding: 14px 14px 0; }
.nodefolio-canvas-root .nf-editorial-intro h3 {
    max-width: 15ch;
    margin: 0;
    color: inherit;
    font-size: clamp(18px, 2.24vw, 32px);
    font-weight: 700;
    line-height: .95;
    letter-spacing: -.035em;
    text-transform: uppercase;
}
.nodefolio-canvas-root .nf-editorial-intro p { max-width: 52ch; margin: 10px 0 0; color: inherit; opacity: .72; }
.nodefolio-canvas-root .nf-node-editorial.nf-node-type-title .nf-node-body {
    display: flex;
    min-height: 176px;
    flex-direction: column;
    justify-content: flex-end;
}
.nodefolio-canvas-root .nf-node-editorial.nf-variant-anchor.nf-node-type-title .nf-node-body { min-height: 288px; }
.nodefolio-canvas-root .nf-node-editorial.nf-node-type-highlight {
    --nf-node-surface: var(--nf-chapter);
    --nf-node-ink: var(--nf-chapter-ink);
}
.nodefolio-canvas-root .nf-node-editorial.nf-node-type-highlight .nf-highlight-lines { color: var(--nf-node-ink); }
.nodefolio-canvas-root .nf-node-editorial.nf-node-type-highlight .nf-highlight-kicker { color: inherit; opacity: .68; }
.nodefolio-canvas-root .nf-title-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.nodefolio-canvas-root .nf-title-media::after { content: ""; position: absolute; inset: 25% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.82)); }
.nodefolio-canvas-root .nf-title-media img { width: 100%; height: 100%; object-fit: cover; }
.nodefolio-canvas-root .nf-variant-media .nf-node-header { position: relative; z-index: 2; color: #fff; border-color: rgba(255,255,255,.22); }
.nodefolio-canvas-root .nf-variant-media .nf-node-body { position: relative; min-height: clamp(240px, 30.4vw, 416px); }
.nodefolio-canvas-root .nf-variant-media .nf-title-kicker,
.nodefolio-canvas-root .nf-variant-media .nf-title-lines,
.nodefolio-canvas-root .nf-variant-media .nf-title-meta { position: relative; z-index: 1; color: #fff; }
.nodefolio-canvas-root .nf-variant-bleed .nf-node-body { padding: 0; }
.nodefolio-canvas-root .nf-variant-bleed .nf-media { aspect-ratio: 16 / 7; }
.nodefolio-canvas-root .nf-gallery-mosaic {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    grid-template-rows: repeat(2, minmax(90px, 1fr));
    gap: 7px;
}
.nodefolio-canvas-root .nf-gallery-mosaic figure { min-width: 0; margin: 0; overflow: hidden; border-radius: 7px; }
.nodefolio-canvas-root .nf-gallery-mosaic figure.is-featured { grid-row: span 2; }
.nodefolio-canvas-root .nf-gallery-mosaic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nodefolio-canvas-root .nf-gallery-mosaic.is-strip { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; }
.nodefolio-canvas-root .nf-gallery-mosaic.is-strip figure.is-featured { grid-row: auto; }
.nodefolio-canvas-root .nf-gallery-mosaic.is-strip figure { aspect-ratio: 4 / 5; }
.nodefolio-canvas-root .nf-code-evidence { padding: 0 18px 18px; }
.nodefolio-canvas-root .nf-code-document {
    max-height: 448px;
    margin: 0;
    padding: clamp(14px, 2.4vw, 27px);
    overflow: auto;
    color: #eee9ff;
    background: #281970;
    border-radius: 10px;
    font: 500 clamp(9px, 1vw, 12px)/1.65 ui-monospace, SFMono-Regular, Consolas, monospace;
    white-space: pre-wrap;
}
.nodefolio-canvas-root .nf-diagram-pipeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.nodefolio-canvas-root .nf-pipeline-step {
    display: grid;
    align-content: start;
    min-height: 104px;
    padding: 14px;
    color: #120d22;
    background: color-mix(in srgb, var(--nf-chapter), white 72%);
    border-radius: 8px;
}
.nodefolio-canvas-root .nf-pipeline-step span { color: var(--nf-chapter); font-weight: 700; }
.nodefolio-canvas-root .nf-pipeline-step strong { margin-top: 22px; text-transform: uppercase; }
.nodefolio-canvas-root .nf-pipeline-step small { margin-top: 5px; color: #5b536d; }
.nodefolio-canvas-root .nf-system-swatches { display: grid; grid-template-columns: repeat(6,1fr); height: 69px; overflow: hidden; border-radius: 8px; }
.nodefolio-canvas-root .nf-system-type { display: flex; gap: 22px; align-items: end; margin-top: 12px; padding: 18px; color: #eee9ff; background: #281970; border-radius: 8px; }
.nodefolio-canvas-root .nf-system-type strong { font-size: 43px; line-height: .8; }
.nodefolio-canvas-root .nf-system-type span { white-space: pre-line; }
.nodefolio-canvas-root .nf-system-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.nodefolio-canvas-root .nf-system-rules div { display: grid; gap: 7px; padding: 13px; background: #eee9ff; border-radius: 8px; }
.nodefolio-canvas-root .nf-system-rules strong { text-transform: uppercase; }
.nodefolio-canvas-root .nf-system-rules span { color: #5b536d; font-size: 11px; }
/* error banner */
.nodefolio-canvas-root.nodefolio-error {
    padding: 24px;
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
    border-radius: var(--nf-radius);
    font-family: "DM Sans", sans-serif;
}
/* dragging state */
body.nf-is-dragging-node,
body.nf-is-resizing-node,
body.nf-is-connecting {
    user-select: none;
}
/* ------------------------------------------------------------
 * Responsive — touch devices and small viewports
 * ------------------------------------------------------------ */

/* Touch devices: drag/connect/resize só fazem sentido com mouse */
@media (hover: none) and (pointer: coarse) {
    .nodefolio-canvas-root .nf-handle,
    .nodefolio-canvas-root .nf-resize { display: none; }
}
/* Mobile: gallery cols reduzidos, padding reduzido */
@media (max-width: 760px) {
    .nodefolio-canvas-root.nf-layout-editorial { display: block; }
    .nodefolio-canvas-root.nf-layout-editorial .nf-canvas-wrap { padding: 20px 0 60px; }
    .nodefolio-canvas-root.nf-layout-editorial .nf-canvas { height: var(--nf-canvas-h-mobile, 7200px); aspect-ratio: auto; }
    .nodefolio-canvas-root .nf-node-editorial.nf-variant-anchor.nf-node-type-title .nf-node-body { min-height: 176px; }
    .nodefolio-canvas-root .nf-variant-media .nf-node-body { min-height: 208px; }
    .nodefolio-canvas-root .nf-editorial-intro { padding: 12px 12px 0; }
    .nodefolio-canvas-root .nf-editorial-intro h3 { font-size: clamp(15px, 4.8vw, 24px); }
    .nodefolio-canvas-root .nf-gallery-mosaic { grid-template-columns: 1.35fr 1fr; grid-template-rows: repeat(3, minmax(72px,1fr)); }
    .nodefolio-canvas-root .nf-gallery-mosaic figure.is-featured { grid-row: span 3; }
    .nodefolio-canvas-root .nf-gallery-mosaic.is-strip { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; }
    .nodefolio-canvas-root .nf-diagram-pipeline { grid-template-columns: 1fr; }
    .nodefolio-canvas-root .nf-pipeline-step { min-height: 0; }
    .nodefolio-canvas-root .nf-system-rules { grid-template-columns: 1fr; }
    .nodefolio-canvas-root .nf-gallery-grid.cols-3,
    .nodefolio-canvas-root .nf-gallery-grid.cols-4,
    .nodefolio-canvas-root .nf-gallery-grid.cols-5,
    .nodefolio-canvas-root .nf-gallery-grid.cols-6 {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    .nodefolio-canvas-root .nf-node-body   { padding: 12px; }
    .nodefolio-canvas-root .nf-node-header { padding: 9px 12px 7px; font-size: 8.5px; }
    .nodefolio-canvas-root .nf-node-footer { padding: 7px 12px 9px; font-size: 8.5px; }
    .nodefolio-canvas-root .nf-text-body   { font-size: 12px; }
    .nodefolio-canvas-root .nf-tag         { font-size: 8.5px; padding: 4px 8px; }
}
/* ------------------------------------------------------------
 * Lightbox mode — canvas opens as a full-screen overlay on a trigger.
 * Shell is appended to <body> by JS (escapes Elementor's stacking
 * context), mirroring the s2026-gallery lightbox.
 * ------------------------------------------------------------ */

/* The host stays hidden in page flow; JS moves the canvas root into the shell. */
.nodefolio-host[data-nf-mode="lightbox"] { display: none; }
/* Optional rendered trigger button */
.nodefolio-trigger-button {
    display: inline-block;
    padding: 14px 28px;
    font: 500 14px/1 "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #000;
    background: #fff;
    border: 1px solid #000;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.nodefolio-trigger-button:hover { background: #000; color: #fff; }
/* Overlay shell */
.nf-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: var(--nf-lightbox-backdrop, rgba(20,20,20,0.82));
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility 0s linear .35s;
}
.nf-lightbox.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity .35s ease;
}
/* Internal scroll — tall canvases (vertical-scroll layout) scroll inside the overlay */
.nf-lightbox-scroll {
    width: 100%;
    height: 100%;
    max-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.nf-lightbox .nodefolio-canvas-root { flex: 0 0 auto; }
.nf-lightbox .nf-layout-editorial { width: 100%; }
/* O Kit #38 deixa .nodefolio-canvas-root transparente para a pagina aparecer
 * desfocada atras do lightbox. O modo editorial pinta --nf-bg em FILHOS, que a
 * regra do Kit nao alcanca — entao aqui devolvemos a transparencia. */
.nf-lightbox .nf-layout-editorial,
.nf-lightbox .nf-layout-editorial .nf-canvas-wrap { background: transparent; }
/* Close button */
.nf-close {
    position: fixed;
    top: 22px;
    right: 26px;
    z-index: 100000;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    opacity: .85;
    transition: opacity .2s, transform .2s;
}
.nf-close:hover { opacity: 1; transform: rotate(90deg); }
.nf-close svg { width: 26px; height: 26px; }
/* Lock page scroll while open */
html.nf-locked, html.nf-locked body { overflow: hidden; }
/* ------------------------------------------------------------
 * Gallery node — featured image + thumbnail strip. Click a thumb
 * to swap it into the featured slot (GSAP Flip animates). In-place
 * inside the node — NO overlay.
 * ------------------------------------------------------------ */
.nodefolio-canvas-root .nf-gallery-stage {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #1a1a1a;
    border-radius: 10px;
    overflow: hidden;
}
.nodefolio-canvas-root .nf-gallery-stage .nf-gallery-cell {
    width: 100%;
    height: 100%;
    cursor: default;
}
.nodefolio-canvas-root .nf-gallery-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.nodefolio-canvas-root .nf-gallery-thumbs .nf-gallery-cell {
    width: 62px;
    height: 62px;
    cursor: pointer;
    opacity: 0.62;
    transition: opacity 0.2s;
}
.nodefolio-canvas-root .nf-gallery-thumbs .nf-gallery-cell:hover { opacity: 1; }
.nodefolio-canvas-root .nf-gallery-cell {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border-radius: 8px;
    background: #1a1a1a;
    will-change: transform;
}
.nodefolio-canvas-root .nf-gallery-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    -webkit-user-drag: none;
    user-drag: none;
}
/* gallery COVER mode (decks): single cover image, click opens the masonry overlay */
.nodefolio-canvas-root .nf-gallery-cover { cursor: zoom-in; line-height: 0; }
.nodefolio-canvas-root .nf-gallery-cover img {
    width: 100%;
    height: auto;
    display: block;
    -webkit-user-drag: none;
    user-drag: none;
    transition: filter .25s;
}
.nodefolio-canvas-root .nf-gallery-cover:hover img { filter: brightness(1.06); }
/* ---- Masonry overlay (deck cover → nested gallery, GSAP Flip) ---- */
.nf-glb {
    position: fixed; inset: 0; z-index: 100001;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.9);
    opacity: 0; visibility: hidden;
    transition: opacity .35s ease, visibility 0s linear .35s;
    --nfg-gap: 10px; --nfg-radius: 14px;
}
.nf-glb.is-open { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.nf-glb-stage { position: relative; width: 94vw; height: 90vh; overflow: hidden; }
.nf-glb-grid {
    display: grid; width: 100%; height: 100%;
    gap: var(--nfg-gap, 10px);
    grid-template-columns: repeat(var(--nfg-cols, 6), 1fr);
    grid-template-rows: repeat(var(--nfg-rows, 5), 1fr);
    grid-auto-flow: dense;
}
.nf-glb-cell {
    position: relative; min-width: 0; min-height: 0; overflow: hidden;
    border-radius: var(--nfg-radius, 14px);
    background: rgba(255,255,255,0.04); cursor: pointer; will-change: transform;
}
.nf-glb-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nf-glb-cell:not(.is-active) img { transition: transform .4s ease; }
.nf-glb-cell:not(.is-active):hover img { transform: scale(1.06); }
.nf-glb-cell:not(.is-active)::after {
    content: ""; position: absolute; inset: 0;
    background: rgba(0,0,0,0.18); transition: opacity .3s ease;
}
.nf-glb-cell:not(.is-active):hover::after { opacity: 0; }
.nf-glb-cell.is-active {
    grid-column: var(--nfg-ac, 1) / span var(--nfg-ak, 3);
    grid-row: var(--nfg-ar, 1) / span var(--nfg-ak, 3);
    cursor: default; z-index: 2;
}
.nf-glb-close {
    position: fixed; top: 22px; right: 26px; z-index: 100002;
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    background: none; border: none; color: #fff; cursor: pointer;
    opacity: .85; transition: opacity .2s, transform .2s;
}
.nf-glb-close:hover { opacity: 1; transform: rotate(90deg); }
.nf-glb-close svg { width: 26px; height: 26px; }
html.nf-glb-locked, html.nf-glb-locked body { overflow: hidden; }
/* ===== holo card (port of gallery.html, simeydotme foil) ===== */
.nodefolio-canvas-root .nfhc{--card-aspect:.747;
    --sp-1:hsl(2,100%,73%);--sp-2:hsl(53,100%,69%);--sp-3:hsl(93,100%,69%);--sp-4:hsl(176,100%,76%);--sp-5:hsl(228,100%,74%);--sp-6:hsl(283,100%,73%);
    --foil:url(../img/illusion.png);
    --disp:"Federant",serif; --text:"Rubik",sans-serif; --sign:"Caveat",cursive;
    --ember:oklch(.62 .2 41); --cream:oklch(.97 .012 85); --gold:oklch(.86 .09 86);
    --card-glow:hsl(20,90%,58%); --card-edge:hsl(33,95%,72%);}
  .nfhc{--pointer-x:50%;--pointer-y:50%;--pointer-from-center:0;--background-x:50%;--background-y:50%;--card-opacity:0;
    --rotate-x:0deg;--rotate-y:0deg;--holo-field:.54;--rim-strength:0;--ink-opacity:0;--ink-mask:none;--art-scale:1;--art-y:0%;--bcol:#e8d4a8;
    width:100%;max-width:320px;aspect-ratio:var(--card-aspect);perspective:760px;pointer-events:none;}
  .nfhc__translater{position:relative;display:grid;transform-style:preserve-3d;}
  /* default = FRAMELESS (no border, full-bleed art) */
  .nfhc__rotator{display:grid;aspect-ratio:var(--card-aspect);border:0 solid transparent;border-radius:5.4%/4.2%;overflow:hidden;
    transform:rotateY(var(--rotate-x)) rotateX(var(--rotate-y));pointer-events:auto;cursor:pointer;transition:box-shadow .4s ease;
    background:transparent;box-shadow:0 10px 34px -8px rgba(255,244,228,.32),0 0 18px -2px rgba(255,238,214,.2);}
  /* only the 3 special cards keep a solid-colour frame (half width) */
  .nfhc.framed{--rim-strength:1;}
  .nfhc.framed .nfhc__rotator{border:4.5px solid var(--bcol);box-shadow:0 10px 34px -8px rgba(255,244,228,.32),0 0 18px -2px rgba(255,238,214,.2), inset 0 0 0 1px rgba(255,255,255,.28);}
  .nfhc__rotator:hover,.nfhc__rotator:focus{outline:none;
    box-shadow:0 0 6px 1px rgba(255,244,228,.5),0 0 22px 3px rgba(255,238,214,.34),0 10px 30px -10px rgba(255,244,228,.3),0 0 64px -16px rgba(255,240,220,.4);}
  /* inner layers stay square + FILL the bordered box exactly (height:100%, not aspect-ratio, which left a bottom gap); rotator clips all to one rounded shape */
  .nfhc__rotator>*{grid-area:1/1;width:100%;height:100%;overflow:hidden;}
  .nfhc__front{box-shadow:inset 0 0 0 1.4px rgba(26,17,10,.6);}
  /* translateY BEFORE scale: CSS applies transforms right-to-left, so scale()*translateY() multiplies the shift by the scale -> art over-shifts down and lifts off the TOP edge (transparent bg leaks). translateY()*scale() shifts by exactly --art-y, keeping the top covered. */
  .nfhc__front img{display:block;width:100%;height:100%;object-fit:cover;transform:translateY(var(--art-y)) scale(var(--art-scale));}
  .nfhc.flip .nfhc__front img,.nfhc.flip .nfhc__ink{transform:scaleX(-1) translateY(var(--art-y)) scale(var(--art-scale));}
  .nfhc__shine{display:grid;overflow:hidden;z-index:3;opacity:calc(var(--card-opacity)*var(--holo-field));mix-blend-mode:color-dodge;
    --space:5%;--angle:133deg;--imgsize:33%;
    background-image:var(--foil),
      repeating-linear-gradient(0deg,var(--sp-1) calc(var(--space)*1),var(--sp-2) calc(var(--space)*2),var(--sp-3) calc(var(--space)*3),var(--sp-4) calc(var(--space)*4),var(--sp-5) calc(var(--space)*5),var(--sp-6) calc(var(--space)*6),var(--sp-1) calc(var(--space)*7)),
      repeating-linear-gradient(var(--angle),#0e152e 0%,hsl(180,10%,60%) 3.8%,hsl(180,29%,66%) 4.5%,hsl(180,10%,60%) 5.2%,#0e152e 10%,#0e152e 12%),
      radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),hsla(0,0%,0%,.1) 12%,hsla(0,0%,0%,.15) 20%,hsla(0,0%,0%,.25) 120%);
    background-blend-mode:exclusion,hue,hard-light;background-size:var(--imgsize),200% 700%,300% 100%,200% 100%;
    background-position:center,0% var(--background-y),calc(var(--background-x) + (var(--background-y)*.2)) var(--background-y),var(--background-x) var(--background-y);
    filter:brightness(calc((var(--pointer-from-center)*.3)+.35)) contrast(2) saturate(1.5);}
  .nfhc__glare{z-index:4;background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),hsl(0,0%,75%) 5%,hsl(200,5%,35%) 60%,hsl(320,40%,10%) 150%);
    background-size:120% 150%;mix-blend-mode:hard-light;opacity:calc(var(--card-opacity)*.5*var(--holo-field));}
  /* PRISM holo (color-blend): paints the gradient HUE onto the body while KEEPING its luminance (color-dodge clips to white on bright bases). Pans + ramps with tilt. Default = full-spectrum rainbow (shiny). Per-card override via --prism-grad = a MONOCHROMATIC sheen toward the frame hue (66 cyan, 74 red); the band must vary hue+sat (not just lightness) since color-blend ignores the gradient's luminance. */
  .nfhc__prism{z-index:2;mix-blend-mode:color;
    opacity:calc(var(--card-opacity)*(.3 + var(--pointer-from-center)*.55));
    background-image:var(--prism-grad,repeating-linear-gradient(112deg,hsl(0,95%,61%) 0%,hsl(45,95%,60%) 7%,hsl(92,88%,57%) 14%,hsl(168,88%,57%) 21%,hsl(205,95%,60%) 28%,hsl(258,88%,63%) 35%,hsl(312,92%,62%) 42%,hsl(0,95%,61%) 49%));
    background-size:240% 240%;background-position:var(--background-x) var(--background-y);filter:saturate(1.5) brightness(1.06);}
  /* black-ink spot foil (baked mask) — the one signature effect, scaled WITH the reframed art */
  .nfhc__ink{z-index:5;overflow:hidden;opacity:var(--ink-opacity);mix-blend-mode:screen;transform:translateY(var(--art-y)) scale(var(--art-scale));
    -webkit-mask-image:var(--ink-mask);mask-image:var(--ink-mask);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    background-image:radial-gradient(58% 44% at var(--pointer-x) var(--pointer-y),rgba(255,255,255,.85),rgba(255,250,235,0) 62%),
      repeating-linear-gradient(106deg,#3a2c10 0%,#8a6a26 1.6%,#f4cd71 3%,#fff7e6 3.8%,#e9b24a 5%,#7a5a1e 7.2%,#2c2008 9.6%);
    background-blend-mode:screen;background-size:120% 120%,260% 260%;
    background-position:var(--pointer-x) var(--pointer-y),var(--background-x) var(--background-y);
    filter:brightness(calc(var(--pointer-from-center)*.55 + .6)) contrast(1.55) saturate(1.4);}
  .nfhc__rim{z-index:6;border-radius:inherit;padding:2.55%;
    background:conic-gradient(from calc(var(--background-x)*1.4) at 50% 50%,hsl(43,90%,72%),hsl(2,90%,72%),hsl(283,70%,74%),hsl(190,80%,74%),hsl(93,80%,70%),hsl(43,90%,72%));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
    mix-blend-mode:overlay;opacity:calc(var(--card-opacity)*.6*var(--rim-strength));filter:saturate(1.4) brightness(1.08);}
  /* ===== FRAME ===== */
  .nfhc__frame{z-index:7;pointer-events:none;color:var(--cream);container-type:inline-size;position:relative;}
  .nfhc-fx-topscrim{position:absolute;top:0;left:0;right:0;height:24%;background:linear-gradient(to bottom,rgba(14,9,6,.74),rgba(14,9,6,.3) 52%,transparent);}
  .nfhc-fx-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:flex-start;gap:2.4cqw;padding:3.4cqw 4.4cqw 0;}
  .nfhc-fx-age{position:relative;width:15cqw;height:15cqw;flex:0 0 auto;margin-top:.2cqw;}
  .nfhc-fx-age svg{width:100%;height:100%;filter:drop-shadow(0 1px 2px #0009);}
  .nfhc-fx-age .lab{position:absolute;top:22%;left:0;right:0;text-align:center;font-size:1.4cqw;font-weight:700;letter-spacing:.14em;color:#fff;opacity:.82;text-shadow:0 1px 2px #000c;}
  .nfhc-fx-age .n{position:absolute;top:46%;left:0;right:0;text-align:center;font-family:var(--disp);font-size:5.2cqw;line-height:1;color:#fff;text-shadow:0 1px 3px #000b;-webkit-text-stroke:.4px #fff;}
  .nfhc-fx-id{flex:1 1 auto;min-width:0;}
  .nfhc-fx-kick{font-size:1.55cqw;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);opacity:.92;text-shadow:0 1px 3px #000c;}
  .nfhc-fx-name{display:flex;align-items:baseline;gap:1.4cqw;margin-top:.4cqw;line-height:.86;}
  .nfhc-fx-name .nm{font-family:var(--disp);font-size:8.2cqw;color:#fff;-webkit-text-stroke:.7px #fff;text-shadow:0 2px 4px rgba(0,0,0,.6),0 0 1px #000;}
  .nfhc-fx-name .ex{font-family:var(--disp);font-size:4.6cqw;color:var(--ember);-webkit-text-stroke:.5px currentColor;transform:skewX(-6deg);text-shadow:0 1px 3px #000a;}
  .nfhc-fx-name .gmx{font-size:3cqw;}  /* "Gigantamax" is long: same ember/skew/position as ex, sized to fit */
  .nfhc-fx-trainer{font-size:1.95cqw;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);opacity:.86;margin-top:.8cqw;text-shadow:0 1px 3px #000c;}
  .nfhc-fx-tier{flex:0 0 auto;text-align:right;}
  /* gradient-clipped text drops its text-shadow in Chrome -> use filter:drop-shadow so the tier reads over bright art (gmax/fiery cards) */
  .nfhc-fx-tier .t{font-family:var(--disp);font-size:3.1cqw;line-height:1;color:#fff;letter-spacing:.02em;
    background:linear-gradient(120deg,#fff,var(--gold) 55%,#e9b04a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.9)) drop-shadow(0 0 1px rgba(0,0,0,.55));}
  .nfhc-fx-tier .pip{margin-top:.7cqw;display:flex;gap:.5cqw;justify-content:flex-end;align-items:center;}
  .nfhc-fx-scrim{position:absolute;left:0;right:0;bottom:0;height:32%;background:linear-gradient(to top,rgba(18,10,7,.8),rgba(18,10,7,.4) 48%,rgba(18,10,7,.08) 80%,transparent);}
  .nfhc-fx-lower{position:absolute;left:0;right:0;bottom:0;padding:0 4.6cqw 3.2cqw;display:flex;flex-direction:column;gap:1.4cqw;}
  .nfhc-fx-lore{font-style:italic;font-size:2.25cqw;line-height:1.3;color:var(--cream);opacity:.92;text-shadow:0 1px 2px #000c;}
  .nfhc-fx-botrow{display:flex;align-items:flex-end;justify-content:space-between;gap:2.2cqw;}
  .nfhc-fx-meta{display:flex;align-items:center;gap:1.5cqw;font-size:1.75cqw;font-weight:700;color:#fff;opacity:.9;text-shadow:0 1px 2px #000c;}
  .nfhc-fx-meta .serial{font-weight:800;letter-spacing:.02em;color:var(--gold);}.nfhc-fx-meta .sep{opacity:.4;font-weight:400;}.nfhc-fx-meta .set{opacity:.8;}
  .nfhc-fx-sign{display:flex;align-items:baseline;gap:.8cqw;flex:0 0 auto;opacity:.82;}
  .nfhc-fx-sign .auto{font-family:var(--sign);font-size:3cqw;line-height:.9;
    background:linear-gradient(105deg,#fff 12%,var(--gold) 50%,#e7b452 92%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    filter:drop-shadow(0 1px 1px #0008);transform:rotate(-2deg);}
  .nfhc-fx-sign .auto-lab{font-size:1.35cqw;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#fff;opacity:.5;}
  .nfhc-fx-cc{font-size:1.4cqw;font-weight:500;opacity:.58;line-height:1.2;margin-top:.3cqw;color:#fff;text-shadow:0 1px 2px #000c;}
  .nfhc-energy{display:inline-block;vertical-align:middle;filter:drop-shadow(0 1px 1px #0007);}
/* holo card host (centers the card in the node body) */
.nodefolio-canvas-root .nfhc-host{padding:10px;display:flex;justify-content:center;}

/* ===== gallery MASONRY (1.12) ==============================================
   Additive only -- no 1.11 selector above is modified. The three original
   modes (inline, cover, mosaic) all crop via object-fit; this one does not.
   Gap/radius/type deliberately match .nf-gallery-mosaic so the node reads as
   native 1.11 furniture. */
.nodefolio-canvas-root .nf-gallery-masonry {
    columns: var(--nfm-cols, 3);
    column-gap: 7px;
}
.nodefolio-canvas-root .nf-gallery-masonry figure {
    margin: 0 0 7px;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    overflow: hidden;
    border-radius: 7px;
    line-height: 0;
    cursor: zoom-in;
}
.nodefolio-canvas-root .nf-gallery-masonry img {
    display: block;
    width: 100%;
    height: auto;              /* natural aspect ratio -- the whole point */
}
.nodefolio-canvas-root .nf-gallery-masonry figure:hover img { filter: brightness(1.06); }

/* masonry overlay -- chrome is the shared .nf-glb; only the inner layout differs */
.nf-glb--masonry .nf-mlb-scroll {
    width: 94vw; height: 90vh;
    overflow-x: hidden; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.nf-glb--masonry .nf-mlb-cols {
    columns: var(--nfm-ocols, 4);
    column-gap: 10px;
    padding: 2px;
}
.nf-glb--masonry .nf-mlb-cols figure {
    margin: 0 0 10px;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    overflow: hidden;
    border-radius: var(--nfg-radius, 14px);
    background: rgba(255,255,255,0.04);
    line-height: 0;
}
.nf-glb--masonry .nf-mlb-cols img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
    .nodefolio-canvas-root .nf-gallery-masonry { columns: 2; }
    .nf-glb--masonry .nf-mlb-cols { columns: 2; }
}