:root {
    --fluxyon-bg: #030610;
    --fluxyon-text: #eaf8ff;
    --fluxyon-muted: #b8d4df;
    --fluxyon-cyan: #63f4ff;
    --fluxyon-violet: #7163ff;
}

/* The public canvas is neutral. Visual styling comes only from the document. */
.fx-page {
    position: relative;
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 0;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
    color: inherit;
    background: transparent;
    font-family: inherit;
}

/* A página FLUXYON é o canvas publicado. Wrappers de conteúdo do tema não
 * podem transformar 100% escolhido no editor em 80/90% no frontend. O :has()
 * limita a neutralização apenas ao ancestral que realmente contém o documento. */
@supports selector(:has(*)) {
    body :where(.site, .site-content, .content-area, .site-main, main, .container, .container-fluid, .ast-container, .entry-content, .post-content, .page-content, .wp-site-blocks, .wp-block-post-content):has(.fx-page) {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: visible !important;
    }
}

body .fx-page {
    width: 100vw !important;
    max-width: 100vw !important;
}
.fx-page,
.fx-page * { box-sizing: border-box; }
.fx-page .fx-node {
    position: relative;
    isolation: isolate;
    color: inherit;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
}
.fx-page .fx-node-section h1 {
    max-width: 900px;
    margin: 0 0 16px;
    color: transparent;
    background: linear-gradient(90deg, #fff, #74f4ff, #bd8cff);
    -webkit-background-clip: text;
    background-clip: text;
    font-size: clamp(38px, 6vw, 76px);
    line-height: 0.98;
    letter-spacing: -0.045em;
}
.fx-page .fx-lead { max-width: 760px; color: var(--fluxyon-muted); font-size: clamp(16px, 2vw, 20px); line-height: 1.65; }
.fx-page .fx-lead p { margin: 0; }
.fx-page .fx-column { min-width: 0; padding: 20px; border: 1px solid rgba(99, 244, 255, 0.12); border-radius: 18px; background: rgba(255, 255, 255, 0.035); }
.fx-page .fx-column h3 { margin: 0 0 10px; color: #fff; }
.fx-page .fx-column p { margin: 0; color: var(--fluxyon-muted); line-height: 1.6; }
.fx-page .fx-node-text p { margin-top: 0; margin-bottom: 1em; }
.fx-page .fx-node-text p:last-child { margin-bottom: 0; }
.fx-page .fx-node-image img { display: inline-block; max-width: 100%; height: auto; border-radius: 0; box-shadow: none; }
.fx-page .fx-node-image figcaption { margin-top: 10px; color: #92b7c5; font-size: 13px; }
.fx-page .fx-image-placeholder { min-height: 240px; display: grid; place-items: center; border: 1px dashed rgba(99, 244, 255, 0.30); border-radius: 0; color: var(--fluxyon-cyan); background: rgba(0, 217, 255, 0.04); letter-spacing: 0.16em; }
.fx-page .fx-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 13px 22px; border-radius: 999px; color: #fff; background: linear-gradient(135deg, #00c9ef, #6758ff); box-shadow: 0 0 30px rgba(0, 217, 255, 0.27); text-decoration: none; transition: transform 160ms ease, box-shadow 160ms ease; }
.fx-page .fx-button:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 0 38px rgba(0, 217, 255, 0.38); }
.fx-page .fx-button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (max-width: 768px) {
    .fx-page { padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .fx-page *,
    .fx-page *::before,
    .fx-page *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

.fx-page .fx-children {
    display: grid;
    gap: inherit;
    width: 100%;
    margin-top: 0;
}

.fx-page .fx-node-has-children > .fx-children {
    position: relative;
}



.fx-page .fx-layout-node {
    min-width: 0;
}

.fx-page .fx-layout-node > .fx-layout-slot {
    min-width: 0;
    width: 100%;
    margin-top: 0;
}

.fx-page .fx-layout-node > .fx-layout-slot > .fx-node {
    min-width: 0;
}

/* Root containers are centered by default when their authored width is below 100%.
 * Inline/user margins still override this rule, so left/right/free positioning remains possible. */
.fx-page > .fx-node-container {
    margin-left: auto;
    margin-right: auto;
}

.fx-page .fx-node-container,
.fx-page .fx-node-grid {
    width: 100%;
    box-sizing: border-box;
    background-color: transparent;
    background-image: none;
}

.fx-page .fx-legacy-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

@media (max-width: 768px) {
    .fx-page .fx-legacy-columns {
        grid-template-columns: 1fr;
    }
}


/* Spatial layout safety and progressive fallbacks. */
.fx-page .fx-position-fixed {
    position: fixed;
}

.fx-page .fx-position-sticky {
    position: sticky;
}

.fx-page .fx-scroll-container {
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.fx-page .fx-clipped-node,
.fx-page .fx-masked-node {
    isolation: isolate;
}

@supports not (clip-path: inset(0)) {
    .fx-page .fx-clipped-node {
        clip-path: none !important;
    }
}

@supports not (mask-image: linear-gradient(black, transparent)) {
    .fx-page .fx-masked-node {
        mask-image: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fx-page .fx-scroll-container {
        scroll-behavior: auto !important;
    }
}


.fx-has-layered-background {
    background-origin: border-box;
    isolation: isolate;
}

.fx-has-outline {
    outline-offset: 3px;
}

.fx-document [style*="background-clip:text"],
.fx-document [style*="background-clip: text"] {
    -webkit-background-clip: text;
}

@supports not (inline-size: fit-content(100%)) {
    .fx-document [style*="inline-size:fit-content"] {
        width: auto;
        max-width: 100%;
    }
}

@supports not (text-wrap: balance) {
    .fx-document [style*="text-wrap:balance"] {
        overflow-wrap: anywhere;
    }
}

/* Widget SDK — contrato visual seguro e independente. */
.fx-sdk-widget { box-sizing: border-box; }
.fx-sdk-status-card {
    display: grid;
    gap: 12px;
    min-width: 0;
    color: var(--fx-color-text, #e9faff);
    background: linear-gradient(145deg, rgba(9, 24, 39, .92), rgba(28, 15, 50, .9));
    border: 1px solid rgba(93, 226, 255, .24);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .24);
}
.fx-sdk-status-card__eyebrow { color: #79e9ff; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.fx-sdk-status-card__main { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.fx-sdk-status-card__main h3 { margin: 0; color: inherit; font-size: clamp(1.15rem, 2vw, 1.55rem); }
.fx-sdk-status-card__main strong { color: #9ff8c0; font-size: clamp(1.55rem, 3vw, 2.2rem); }
.fx-sdk-status-card__note { color: color-mix(in srgb, currentColor 78%, transparent); }
.fx-sdk-status-card__note > :first-child { margin-top: 0; }
.fx-sdk-status-card__note > :last-child { margin-bottom: 0; }
.fx-sdk-status-card.is-warning .fx-sdk-status-card__main strong { color: #ffe2a3; }
.fx-sdk-status-card.is-neutral .fx-sdk-status-card__main strong { color: #bcd6df; }
.fx-sdk-widget-fallback { padding: 1rem; border: 1px dashed currentColor; border-radius: 12px; opacity: .8; }

/* LOTE 312 — falha isolada de widget sem interromper a página */
.fx-render-fallback{display:grid;gap:6px;min-height:72px;padding:16px;border:1px dashed rgba(198,52,82,.55);border-radius:14px;background:rgba(198,52,82,.06);color:inherit}.fx-render-fallback strong{color:#c63452;font-size:11px;letter-spacing:.14em}.fx-render-fallback span{overflow-wrap:anywhere}

/* FLUXYON Canvas opt-in ------------------------------------------------------
 * A composição pode declarar a classe `fx-page-canvas` no contêiner raiz
 * quando ela própria já possui cabeçalho/rodapé e precisa ocupar a página sem
 * o chrome visual do tema. Nada muda para documentos que não usam a classe. */
@supports selector(body:has(*)) {
    body:has(.fx-page > .fx-page-canvas) :where(
        .site-header,
        .site-footer,
        .entry-header,
        .page-header,
        .entry-title,
        .wp-block-post-title,
        header.wp-block-template-part,
        footer.wp-block-template-part
    ) {
        display: none !important;
    }

    body:has(.fx-page > .fx-page-canvas) :where(
        .site,
        .site-content,
        .content-area,
        .site-main,
        main,
        .container,
        .container-fluid,
        .ast-container,
        .entry-content,
        .post-content,
        .page-content,
        .wp-site-blocks,
        .wp-block-post-content
    ) {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}