/* Montador de Wireframe · Torus */

/* ---------- fontes (Poppins, local) ---------- */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/poppins-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-latin-700-normal.woff2") format("woff2"); }

/* ---------- identidade (troque a cor em index.html → WF_CONFIG.cor) ---------- */
:root {
  --brand-50: #F5F1FC; --brand-100: #E9E1F9; --brand-200: #D3C2F4; --brand-300: #B69AEC; --brand-400: #9268E3;
  --brand-500: #6D35D9; --brand-600: #5D2DB8; --brand-700: #4C2598; --brand-800: #391C71; --brand-900: #27134E;
  --brand-rgb: 109, 53, 217;
  --gray-900: #17171C; --gray-800: #25252D; --gray-700: #3C3C46; --gray-600: #5B5B67; --gray-500: #7E7E8B;
  --gray-400: #A6A6B2; --gray-300: #CBCBD4; --gray-200: #E3E3E9; --gray-100: #F0F0F4; --gray-50: #F8F8FA;
  --danger: #C62828;
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --shadow-1: 0 1px 2px rgba(23, 16, 48, .07), 0 1px 1px rgba(23, 16, 48, .04);
  --shadow-2: 0 8px 28px rgba(31, 17, 71, .12), 0 2px 6px rgba(31, 17, 71, .06);
  --shadow-3: 0 22px 60px rgba(31, 17, 71, .26), 0 4px 12px rgba(31, 17, 71, .1);
  --lib-w: 276px; --panel-w: 300px; --top-h: 58px; --bar-h: 46px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font-family: var(--font); color: var(--gray-800); background: var(--gray-100); -webkit-font-smoothing: antialiased; overflow: hidden; font-size: 14px; }
button, input, select, textarea { font-family: inherit; }
button { -webkit-tap-highlight-color: transparent; }
svg { flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }

/* ---------- estrutura geral ---------- */
.app { display: grid; grid-template-rows: var(--top-h) var(--bar-h) minmax(0, 1fr); height: 100vh; height: 100dvh; }
.workspace { position: relative; display: grid; grid-template-columns: var(--lib-w) minmax(0, 1fr) var(--panel-w); min-height: 0; }
.app.panel-min .workspace { grid-template-columns: var(--lib-w) minmax(0, 1fr); }
.app.panel-min .structure { display: none; }
.app.is-preview .workspace { grid-template-columns: 0 minmax(0, 1fr) var(--panel-w); }
.app.is-preview.panel-min .workspace { grid-template-columns: 0 minmax(0, 1fr); }
.app.is-preview .library { visibility: hidden; overflow: hidden; border: 0; }

/* ---------- barra superior ---------- */
.topbar { position: relative; z-index: 60; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 18px; background: var(--brand-800); color: #fff; min-width: 0; }
.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand-mark { font-weight: 700; font-size: 20px; letter-spacing: .01em; line-height: 1; display: flex; align-items: center; }
.brand-mark img { height: 26px; width: auto; display: block; }
.brand-sep { width: 1px; height: 28px; background: rgba(255, 255, 255, .22); }
.brand-tool { display: flex; flex-direction: column; line-height: 1.25; font-weight: 600; font-size: 13.5px; }
.brand-tool small { font-size: 11px; font-weight: 400; color: rgba(255, 255, 255, .62); }
.proj-wrap { display: flex; flex-direction: column; margin-left: 14px; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .14); min-width: 0; }
.proj { font: 600 14px/1.2 var(--font); color: #fff; background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 3px 6px; margin: 0 0 1px -7px; width: 230px; max-width: 26vw; }
.proj:hover { border-color: rgba(255, 255, 255, .25); }
.proj:focus { outline: none; border-color: var(--brand-300); background: rgba(255, 255, 255, .08); }
.save { display: flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(255, 255, 255, .62); white-space: nowrap; }
.save::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #7EE2A8; }
.save.saving::before { background: #FFD36B; }
.save.err { color: #FFC7BE; }
.save.err::before { background: #FF8A80; }
.tb-flex { flex: 1; min-width: 8px; }
.tb-group { display: flex; align-items: center; gap: 2px; padding: 3px; background: rgba(255, 255, 255, .08); border-radius: 10px; flex: none; }
.tb-btn { height: 34px; min-width: 34px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: rgba(255, 255, 255, .86); display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: 500 13px var(--font); cursor: pointer; white-space: nowrap; flex: none; transition: background .15s, color .15s; }
.tb-btn svg { width: 18px; height: 18px; }
.tb-btn:hover { background: rgba(255, 255, 255, .13); color: #fff; }
.tb-btn.is-on { background: #fff; color: var(--brand-800); }
.tb-btn:disabled { opacity: .35; cursor: default; background: transparent; }
.tb-btn.primary { background: var(--brand-500); color: #fff; padding: 0 14px; }
.tb-btn.primary:hover { background: var(--brand-400); }
.tb-btn.tb-solo { background: rgba(255, 255, 255, .08); }
.tb-btn.tb-solo:hover { background: rgba(255, 255, 255, .16); }
.tb-lib { display: none; }

/* ---------- barra de páginas ---------- */
.pagebar { position: relative; z-index: 50; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: #fff; border-bottom: 1px solid var(--gray-200); min-width: 0; }
.pb-label { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-500); flex: none; }
.ptabs { display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 0 1 auto; padding: 2px 0; }
.ptabs::-webkit-scrollbar { display: none; }
.ptab { display: flex; align-items: center; border-radius: 9px; flex: none; transition: background .15s; }
.ptab:hover { background: var(--gray-100); }
.ptab.is-cur { background: var(--brand-50); box-shadow: inset 0 0 0 1px var(--brand-100); }
.ptab-btn { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 6px 0 7px; border: 0; background: transparent; border-radius: 9px 0 0 9px; font: 500 13px var(--font); color: var(--gray-700); cursor: pointer; max-width: 240px; }
.ptab-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptab-n { width: 20px; height: 20px; border-radius: 6px; background: var(--gray-100); font-size: 11px; font-weight: 600; display: grid; place-items: center; color: var(--gray-600); flex: none; }
.ptab-c { font-size: 11px; color: var(--gray-500); flex: none; }
.ptab.is-cur .ptab-btn { color: var(--brand-700); font-weight: 600; }
.ptab.is-cur .ptab-n { background: var(--brand-500); color: #fff; }
.ptab-menu { width: 26px; height: 32px; border: 0; background: transparent; border-radius: 0 9px 9px 0; color: var(--gray-500); cursor: pointer; display: grid; place-items: center; opacity: 0; transition: opacity .15s; }
.ptab-menu svg { width: 16px; height: 16px; }
.ptab:hover .ptab-menu, .ptab.is-cur .ptab-menu, .ptab-menu[aria-expanded] { opacity: 1; }
.ptab-menu:hover { color: var(--brand-600); }
.pb-add { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1.5px dashed var(--brand-300); border-radius: 9px; background: #fff; color: var(--brand-600); font: 600 12.5px var(--font); cursor: pointer; flex: none; transition: background .15s, border-color .15s; }
.pb-add svg { width: 15px; height: 15px; }
.pb-add:hover { background: var(--brand-50); border-color: var(--brand-500); }
.pb-count { margin-left: auto; font-size: 12px; color: var(--gray-500); white-space: nowrap; flex: none; }

/* ---------- biblioteca de seções ---------- */
.library { display: flex; flex-direction: column; min-height: 0; background: #fff; border-right: 1px solid var(--gray-200); z-index: 20; }
.lib-head { padding: 16px 16px 12px; border-bottom: 1px solid var(--gray-100); }
.lib-head h2 { font-size: 15px; font-weight: 600; margin: 0; color: var(--gray-900); }
.lib-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
.lib-head .lib-close { display: none; margin: -6px -6px -6px 0; }
.lib-head p { font-size: 12px; line-height: 1.45; color: var(--gray-500); margin: 4px 0 12px; }
.lib-search { position: relative; display: block; }
.lib-search svg { position: absolute; left: 11px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: var(--gray-400); pointer-events: none; }
.lib-search input { width: 100%; height: 38px; padding: 0 12px 0 36px; border: 1px solid var(--gray-200); border-radius: 10px; background: var(--gray-50); font: 400 13px var(--font); color: var(--gray-800); }
.lib-search input:focus { outline: none; border-color: var(--brand-400); background: #fff; box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .14); }
.lib-list { flex: 1; overflow-y: auto; padding: 0 10px 40px; overscroll-behavior: contain; }
.lib-ch { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; padding: 14px 8px 8px; background: #fff; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-500); }
.lib-item { display: grid; grid-template-columns: 72px minmax(0, 1fr) 16px; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 8px; margin: 0 0 2px; border: 1px solid transparent; border-radius: 12px; background: transparent; cursor: grab; color: inherit; touch-action: pan-y; transition: background .12s, border-color .12s; }
.lib-item:hover { background: var(--brand-50); border-color: var(--brand-200); }
.lib-item:active { cursor: grabbing; }
.lib-th svg { display: block; width: 72px; height: 45px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--gray-200); }
.lib-tx b { display: block; font-size: 13px; font-weight: 600; color: var(--gray-900); margin-bottom: 2px; }
.lib-tx small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 11.5px; line-height: 1.4; color: var(--gray-500); }
.lib-grip { color: var(--gray-300); touch-action: none; display: grid; place-items: center; height: 100%; }
.lib-grip svg { width: 16px; height: 16px; }
.lib-item:hover .lib-grip { color: var(--brand-400); }
.lib-none { padding: 28px 12px; text-align: center; color: var(--gray-500); font-size: 13px; line-height: 1.6; }
.lib-scrim { display: none; }

.thumb-svg .bg { fill: #F4F2F9; }
.thumb-svg .l { fill: #DCD7E7; }
.thumb-svg .m { fill: #BCB3CD; }
.thumb-svg .d { fill: #6F6787; }
.thumb-svg .w { fill: #FFFFFF; }
.thumb-svg .a { fill: var(--brand-500); }
.thumb-svg .o { fill: #FFFFFF; stroke: #CFC8DD; stroke-width: 1; }
.thumb-svg .oa { fill: #FFFFFF; stroke: var(--brand-500); stroke-width: 1.2; }
.thumb-svg .k { stroke: #BCB3CD; stroke-width: 1.2; }

/* ---------- área da página ---------- */
.stage { position: relative; overflow: auto; overflow-anchor: none; min-width: 0; min-height: 0; background-color: var(--gray-100); background-image: radial-gradient(rgba(23, 16, 48, .07) 1px, transparent 1px); background-size: 18px 18px; }
.stage-in { padding: 24px 24px 160px; min-height: 100%; }
.frame { position: relative; container-type: inline-size; container-name: page; margin: 0 auto; max-width: 1200px; background: #fff; border-radius: 14px; box-shadow: var(--shadow-2); overflow: hidden; transition: max-width .25s ease;
  --wf-ink: #2E2E36; --wf-text: #62626E; --wf-mute: #9696A2; --wf-line: #E4E4EA; --wf-ph: #E3E3E9; --wf-ph-2: #D1D1D9; --wf-ph-ink: #A2A2AE;
  --wf-btn: #393943; --wf-btn-ink: #FFFFFF; --wf-card: #FFFFFF; --wf-soft: #F3F3F6; --ed-hover: rgba(var(--brand-rgb), .3);
  --wf-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0L100 100M100 0L0 100' fill='none' stroke='%23CFCFD8' stroke-width='1.3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.frame.dev-tablet { max-width: 740px; }
.frame.dev-mobile { max-width: 390px; }
.bbar { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; background: var(--gray-50); border-bottom: 1px solid var(--gray-200); }
.bbar > i { width: 10px; height: 10px; border-radius: 50%; background: var(--gray-300); flex: none; }
.bbar-url { display: flex; align-items: center; gap: 7px; flex: 1; max-width: 520px; height: 26px; margin: 0 auto; padding: 0 12px; border-radius: 13px; background: #fff; border: 1px solid var(--gray-200); font-size: 12px; color: var(--gray-500); overflow: hidden; white-space: nowrap; }
.bbar-url svg { width: 13px; height: 13px; }
.bbar-url span { overflow: hidden; text-overflow: ellipsis; }
.bbar-url b { color: var(--gray-800); font-weight: 500; }
.secs { min-height: 60px; }

/* ---------- moldura de cada seção (modo edição) ---------- */
.sec { position: relative; outline: 1.5px dashed transparent; outline-offset: -1.5px; transition: outline-color .15s, opacity .15s; }
.frame:not(.preview) .sec:hover { outline-color: var(--brand-300); }
.frame:not(.preview) .sec.is-sel { outline: 2px solid var(--brand-500); outline-offset: -2px; }
.sec.is-moving { opacity: .35; }
.sec.flash { animation: secFlash 1.3s ease; }
@keyframes secFlash { 0% { box-shadow: inset 0 0 0 4px rgba(var(--brand-rgb), .55); } 100% { box-shadow: inset 0 0 0 4px rgba(var(--brand-rgb), 0); } }
.sec-label { position: absolute; top: 10px; left: 10px; z-index: 8; display: flex; align-items: center; gap: 5px; max-width: calc(100% - 330px); font-family: var(--font); pointer-events: none; }
.sec-label > * { pointer-events: auto; }
.sec-num { flex: none; height: 26px; min-width: 30px; padding: 0 7px; border-radius: 7px; background: var(--brand-800); color: #fff; font: 600 11.5px/26px var(--font); text-align: center; box-shadow: var(--shadow-1); }
.sec-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; height: 26px; padding: 0 9px; border: 0; border-radius: 7px; background: var(--brand-500); color: #fff; font: 600 11.5px/1 var(--font); cursor: pointer; box-shadow: var(--shadow-1); }
.sec-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
.sec-name svg { width: 12px; height: 12px; opacity: .8; }
.sec-name:hover { background: var(--brand-600); }
.sec-type { flex: none; height: 26px; padding: 0 8px; border-radius: 7px; background: rgba(23, 16, 48, .55); color: #fff; font: 500 11px/26px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.sec-name-in { height: 26px; width: 230px; padding: 0 9px; border: 2px solid var(--brand-500); border-radius: 7px; font: 600 12px var(--font); color: var(--gray-900); background: #fff; box-shadow: var(--shadow-2); outline: none; pointer-events: auto; }
.sec-tools { position: absolute; top: 9px; right: 9px; z-index: 9; display: flex; align-items: center; gap: 2px; padding: 3px; background: #fff; border: 1px solid var(--gray-200); border-radius: 10px; box-shadow: var(--shadow-2); font-family: var(--font); opacity: 0; pointer-events: none; transform: translateY(-3px); transition: opacity .15s, transform .15s; }
.sec:hover > .sec-tools, .sec.is-sel > .sec-tools, .sec:focus-within > .sec-tools { opacity: 1; pointer-events: auto; transform: none; }
.st-btn { height: 32px; min-width: 32px; padding: 0 7px; border: 0; border-radius: 7px; background: transparent; color: var(--gray-700); display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 600 12px var(--font); cursor: pointer; transition: background .12s, color .12s; }
.st-btn svg { width: 17px; height: 17px; }
.st-btn:hover { background: var(--brand-50); color: var(--brand-600); }
.st-btn:disabled { opacity: .3; cursor: default; background: transparent; color: var(--gray-700); }
.st-btn.on { color: var(--brand-600); background: var(--brand-50); }
.st-btn.danger:hover { background: #FDECEC; color: var(--danger); }
.st-btn.grab { cursor: grab; touch-action: none; }
.st-btn.grab:active { cursor: grabbing; }
.st-btn[aria-expanded] { background: var(--brand-100); color: var(--brand-700); }
.st-sep { width: 1px; height: 20px; margin: 0 3px; background: var(--gray-200); }
.sec-note { padding: 12px 18px 16px; background: var(--brand-50); border-top: 1px dashed var(--brand-200); font-family: var(--font); }
.note-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.note-h span { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--brand-700); }
.note-h svg { width: 15px; height: 15px; }
.note-x { border: 0; background: transparent; color: var(--gray-500); font: 500 11.5px var(--font); cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.note-x:hover { color: var(--danger); background: #fff; }
.sec-note textarea { display: block; width: 100%; min-height: 58px; padding: 10px 12px; border: 1px solid var(--brand-200); border-radius: 9px; background: #fff; font: 400 13.5px/1.5 var(--font); color: var(--gray-800); resize: vertical; }
.sec-note textarea:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .14); }
.sec-err { padding: 40px; text-align: center; color: var(--danger); }

/* cabeçalho e rodapé globais */
.g-wrap { position: relative; }
.g-strip { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 10px 5px 12px; background: var(--brand-50); border-bottom: 1px solid var(--brand-100); font: 600 11px var(--font); color: var(--brand-700); }
.g-strip > span { display: flex; align-items: center; gap: 6px; }
.g-strip svg { width: 14px; height: 14px; }
.g-opt { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border: 1px solid var(--brand-200); border-radius: 6px; background: #fff; color: var(--brand-700); font: 600 11px var(--font); cursor: pointer; }
.g-opt:hover, .g-opt[aria-expanded] { background: var(--brand-100); }
.g-wrap[data-global="footer"] .g-strip { border-top: 1px solid var(--brand-100); }

/* indicador de soltar e fantasma do arraste */
.drop-ind { position: absolute; left: 14px; right: 14px; height: 6px; border-radius: 6px; background: var(--brand-500); box-shadow: 0 0 0 5px rgba(var(--brand-rgb), .18); z-index: 30; pointer-events: none; display: none; }
.drop-ind.on { display: block; }
.drop-ind.same { opacity: .35; }
.drop-ind span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 6px 12px; border-radius: 20px; background: var(--brand-500); color: #fff; font: 600 11.5px/1 var(--font); white-space: nowrap; box-shadow: var(--shadow-2); }
.ghost { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 7px; background: #fff; border: 1.5px solid var(--gray-300); border-radius: 12px; box-shadow: var(--shadow-3); font: 600 13px var(--font); color: var(--gray-700); opacity: .92; }
.ghost.ok { border-color: var(--brand-500); color: var(--brand-800); opacity: 1; }
.ghost .lib-th svg { width: 56px; height: 35px; }
.ghost-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--brand-50); color: var(--brand-600); }
.ghost-ic svg { width: 18px; height: 18px; }
body.is-dragging, body.is-dragging * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; }

/* página vazia */
.empty { margin: 28px; padding: 54px 28px; border: 2px dashed var(--brand-200); border-radius: 16px; background: var(--brand-50); text-align: center; font-family: var(--font); transition: background .15s, border-color .15s; }
.empty.hot { border-color: var(--brand-500); background: var(--brand-100); }
.empty-ic { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: #fff; color: var(--brand-500); box-shadow: var(--shadow-1); }
.empty-ic svg { width: 26px; height: 26px; }
.empty h3 { margin: 14px 0 6px; font-size: 18px; color: var(--brand-800); }
.empty p { max-width: 520px; margin: 0 auto 18px; font-size: 14px; line-height: 1.6; color: var(--gray-600); }
.empty.pv { color: var(--gray-500); background: var(--gray-50); border-color: var(--gray-200); }
.tpl-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* ---------- edição de textos ---------- */
.frame:not(.preview) .ed { border-radius: 4px; outline: none; cursor: text; transition: box-shadow .12s, background-color .12s; min-width: 1ch; }
.frame:not(.preview) .ed:hover { box-shadow: 0 0 0 2px var(--ed-hover); }
.frame:not(.preview) .ed:focus { box-shadow: 0 0 0 2px var(--brand-500); background-color: rgba(var(--brand-rgb), .07); }
.ed:empty::before { content: attr(data-l); opacity: .45; font-style: italic; }
.ed:not([data-s]) { white-space: pre-wrap; }
.ed[data-s] { overflow-wrap: anywhere; }

#hint { position: fixed; z-index: 150; pointer-events: none; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; max-width: 340px; padding: 7px 11px; border-radius: 9px; background: var(--gray-900); color: #fff; font: 500 12px/1.35 var(--font); box-shadow: var(--shadow-2); }
#hint[hidden] { display: none; }
#hint b { font-weight: 600; }
.hint-c { color: var(--brand-200); }
.hint-c.over { color: #FFB4A9; }
.hint-tip { width: 100%; color: rgba(255, 255, 255, .62); font-weight: 400; }

/* ======================================================================
   WIREFRAME (conteúdo das seções) · tons neutros de propósito
   ====================================================================== */
.frame, .pr-frame { font-family: var(--font); color: var(--wf-ink); }
.sec-body { padding: 76px 64px; }
.sec-body.bleed { padding: 0; }
.bg-white { background: #FFFFFF; }
.bg-gray { background: #F4F4F7; --wf-soft: #EAEAEF; --wf-ph: #E2E2E8; }
.bg-dark { --wf-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0L100 100M100 0L0 100' fill='none' stroke='%234E4E59' stroke-width='1.3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); background: #2C2C34; --wf-ink: #F3F3F6; --wf-text: #C4C4CE; --wf-mute: #9090A0; --wf-line: #44444E; --wf-ph: #3D3D47; --wf-ph-2: #4C4C57; --wf-ph-ink: #74747F; --wf-btn: #F3F3F6; --wf-btn-ink: #2C2C34; --wf-card: #35353E; --wf-soft: #3E3E48; --ed-hover: rgba(var(--brand-rgb), .6); }

.w-kick { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--wf-mute); margin: 0 0 12px; }
.w-h1 { font-size: 46px; line-height: 1.12; font-weight: 700; letter-spacing: -.015em; color: var(--wf-ink); margin: 0 0 18px; }
.w-h1.sm { font-size: 38px; margin-bottom: 12px; }
.w-h2 { font-size: 32px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; color: var(--wf-ink); margin: 0 0 14px; }
.w-h2.sm { font-size: 26px; }
.w-h3 { font-size: 18.5px; line-height: 1.3; font-weight: 600; color: var(--wf-ink); margin: 0 0 8px; }
.w-h3.sm { font-size: 16px; margin-bottom: 4px; }
.w-h3.muted { color: var(--wf-mute); font-size: 15px; font-weight: 600; letter-spacing: .02em; }
.w-lead { font-size: 17px; line-height: 1.6; color: var(--wf-text); margin: 0 0 28px; }
.w-p { font-size: 15.5px; line-height: 1.7; color: var(--wf-text); margin: 0 0 18px; }
.w-sm { font-size: 14px; line-height: 1.65; color: var(--wf-text); margin: 0; }
.w-sm.muted { color: var(--wf-mute); }
.w-link { display: inline-block; font-size: 14px; font-weight: 600; color: var(--wf-ink); text-decoration: underline; text-underline-offset: 3px; }
.w-head { max-width: 720px; margin: 0 0 44px; }
.w-head.al-center { margin-left: auto; margin-right: auto; text-align: center; }
.w-head.sm { margin-bottom: 26px; }
.w-head .w-p { margin: 0; }
.al-center { text-align: center; }

.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.al-center .btns, .btns.center { justify-content: center; }
.w-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border-radius: 9px; background: var(--wf-btn); color: var(--wf-btn-ink); font-size: 14.5px; font-weight: 600; line-height: 1.2; text-align: center; }
.w-btn.alt { background: transparent; color: var(--wf-ink); box-shadow: inset 0 0 0 1.5px var(--wf-ink); }
.w-btn.sm { min-height: 38px; padding: 0 16px; font-size: 13px; border-radius: 8px; }

/* imagem (placeholder) */
.ph { position: relative; display: flex; align-items: center; justify-content: center; min-height: 90px; border-radius: 12px; color: var(--wf-ph-ink); overflow: hidden; background-color: var(--wf-ph); background-image: var(--wf-x); background-size: 100% 100%; background-repeat: no-repeat; }
.ph > svg { position: relative; z-index: 1; width: 34px; height: 34px; padding: 7px; box-sizing: content-box; border-radius: 50%; background: var(--wf-ph); }
.ph-cap { position: absolute; left: 10px; bottom: 10px; z-index: 2; max-width: calc(100% - 20px); padding: 3px 8px; border-radius: 6px; background: rgba(255, 255, 255, .88); color: #4A4A55; font-size: 11.5px; font-weight: 500; line-height: 1.35; }
.ph-split { aspect-ratio: 5 / 4; }
.ph-card { aspect-ratio: 16 / 10; border-radius: 0; }
.ph-wide { aspect-ratio: 16 / 7; }
.ph-gal { aspect-ratio: 4 / 3; }
.ph-post { aspect-ratio: 16 / 10; margin-bottom: 16px; }
.ph-post > svg { width: 28px; height: 28px; }
.ph-bg { position: absolute; inset: 0; border-radius: 0; min-height: 0; }
.ph-bg > svg { width: 52px; height: 52px; opacity: .45; }
.ph-bg .ph-cap { left: auto; right: 16px; bottom: 16px; }
.vid > svg { width: 64px; height: 64px; padding: 0; background: none; color: var(--wf-ph-ink); }
.v169 { aspect-ratio: 16 / 9; }
.v916 { aspect-ratio: 9 / 16; max-width: 280px; margin: 0 auto 14px; width: 100%; }
.v169.vid { margin-bottom: 0; }
.vt .v169 { margin-bottom: 14px; }
.vt { text-align: center; }
.vid-wrap { max-width: 920px; margin: 0 auto; }
.vid-btn { margin-top: 28px; display: flex; justify-content: center; }
.avatar { width: 128px; height: 128px; min-height: 0; margin: 0 auto 16px; border-radius: 50%; }
.avatar > svg { width: 34px; height: 34px; padding: 0; background: none; }
.av { width: 46px; height: 46px; min-height: 0; border-radius: 50%; flex: none; }
.av > svg { width: 20px; height: 20px; padding: 0; background: none; }

/* banners */
.hero { position: relative; display: flex; align-items: center; min-height: 580px; overflow: hidden; background: #45454F; --wf-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0L100 100M100 0L0 100' fill='none' stroke='%235B5B67' stroke-width='1.3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --wf-ink: #FFFFFF; --wf-text: rgba(255, 255, 255, .84); --wf-mute: rgba(255, 255, 255, .64); --wf-btn: #FFFFFF; --wf-btn-ink: #2C2C34; --wf-ph: #4D4D58; --wf-ph-2: #595965; --wf-ph-ink: #7C7C89; --wf-line: rgba(255, 255, 255, .2); --ed-hover: rgba(var(--brand-rgb), .7); }
.hero.h-m { min-height: 460px; }
.hero.h-s { min-height: 320px; }
.hero.plain { background: #34343D; }
.hero-in { position: relative; z-index: 2; width: 100%; max-width: 820px; padding: 88px 72px; }
.hero-in.al-center { margin: 0 auto; text-align: center; }
.hero-in.al-center .w-lead { margin-left: auto; margin-right: auto; }
.hero .w-lead { max-width: 640px; }
.crumb { font-size: 12.5px; font-weight: 500; color: var(--wf-mute); margin-bottom: 14px; }
.crumb span { margin: 0 6px; }
.slider { position: relative; }
.slider .slide { display: none; }
.slider .slide.is-on { display: block; }
.hero.slider { display: block; }
.hero.slider .slide.is-on { position: relative; display: flex; align-items: center; min-height: inherit; }
.hero.slider.has-nav .hero-in { padding-left: 104px; padding-right: 104px; }
.hero.slider.has-nav .hero-in.al-center { max-width: 920px; }
.sl-arrow { position: absolute; top: 50%; z-index: 4; display: grid; place-items: center; width: 46px; height: 46px; margin-top: -23px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: #2C2C34; cursor: pointer; box-shadow: 0 3px 10px rgba(0, 0, 0, .18); }
.sl-arrow svg { width: 20px; height: 20px; }
.sl-arrow.prev { left: 20px; }
.sl-arrow.next { right: 20px; }
.sl-dots { position: absolute; left: 0; right: 0; bottom: 20px; z-index: 4; display: flex; justify-content: center; gap: 8px; }
.dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 6px; background: rgba(255, 255, 255, .5); cursor: pointer; transition: width .2s, background .2s; }
.dot.is-on { width: 26px; background: #fff; }
.sl-count { position: absolute; left: 20px; bottom: 16px; z-index: 4; padding: 4px 10px; border-radius: 20px; background: rgba(23, 16, 48, .55); color: #fff; font: 500 11.5px var(--font); }
.slider:not(.hero) .sl-dots { position: static; margin-top: 22px; }
.slider:not(.hero) .dot { background: var(--wf-line); }
.slider:not(.hero) .dot.is-on { background: var(--wf-ink); }
.slider:not(.hero) .sl-count { position: static; display: block; width: fit-content; margin: 10px auto 0; background: var(--gray-100); color: var(--gray-600); }
.slider.imgs .sl-arrow { top: calc(50% - 30px); }
.slider.imgs .sl-arrow.prev { left: -22px; }
.slider.imgs .sl-arrow.next { right: -22px; }
.sl-cap { margin-top: 14px; text-align: center; }
.tsl { max-width: 900px; margin: 0 auto; padding: 0 64px; }
.tsl .sl-arrow { background: var(--wf-card); color: var(--wf-ink); border: 1px solid var(--wf-line); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.tsl .sl-arrow.prev { left: 0; }
.tsl .sl-arrow.next { right: 0; }
.tslide { text-align: center; }
.qi { display: block; width: 44px; height: 44px; margin: 0 auto 18px; color: var(--wf-mute); }
.qi svg { width: 100%; height: 100%; }
.tq { font-size: 15px; line-height: 1.7; color: var(--wf-text); margin: 0 0 20px; }
.tq.big { font-size: 20px; line-height: 1.6; font-weight: 500; color: var(--wf-ink); }
.who { display: flex; align-items: center; gap: 12px; text-align: left; }
.tslide .who { justify-content: center; }
.who-n { font-weight: 600; font-size: 14.5px; color: var(--wf-ink); }
.who-i { font-size: 12.5px; color: var(--wf-mute); margin-top: 1px; }
.vt .who-n { margin-top: 2px; }

.hero-form .hf-in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: center; width: 100%; padding: 80px 64px; }
.hero-form .hf-txt .w-lead { margin-bottom: 22px; }
.hero .form-card { --wf-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0L100 100M100 0L0 100' fill='none' stroke='%23CFCFD8' stroke-width='1.3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); --wf-ink: #2E2E36; --wf-text: #62626E; --wf-mute: #9696A2; --wf-line: #E4E4EA; --wf-btn: #393943; --wf-btn-ink: #FFFFFF; --wf-soft: #F3F3F6; --wf-card: #FFFFFF; --ed-hover: rgba(var(--brand-rgb), .3); color: var(--wf-ink); }
.hero .form-card .w-h3 { margin-bottom: 18px; }

/* imagem + texto */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.split.img-left > .ph:last-child { order: -1; }
.split-txt > :last-child { margin-bottom: 0; }
.hero-split .w-h1 { font-size: 42px; }

/* texto */
.txt { max-width: 780px; }
.txt.al-center { margin: 0 auto; }
.txt.two { max-width: none; }
.txt-cols { display: grid; gap: 40px; }
.txt.two .txt-cols { grid-template-columns: 1fr 1fr; text-align: left; }
.txt .btns { margin-top: 10px; }

/* manifesto */
.manifesto { max-width: 880px; margin: 0 auto; text-align: center; }
.w-quote { font-size: 30px; line-height: 1.42; font-weight: 600; letter-spacing: -.01em; color: var(--wf-ink); margin: 0 0 22px; }
.sig { font-size: 14px; font-weight: 600; color: var(--wf-mute); }

/* lista com ícones */
.checks { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 14px 36px; }
.checks:last-child { margin-bottom: 0; }
.checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.6; color: var(--wf-text); text-align: left; }
.ck { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: var(--wf-btn); color: var(--wf-btn-ink); }
.ck svg { width: 14px; height: 14px; stroke-width: 2.6; }
.ck.sm { width: 20px; height: 20px; }
.ck.sm svg { width: 12px; height: 12px; }

/* abas */
.tab-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 38px; border-bottom: 1px solid var(--wf-line); }
.tab-btn { padding: 12px 18px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: 14.5px; font-weight: 600; color: var(--wf-mute); cursor: pointer; }
.tab-btn.is-on { color: var(--wf-ink); border-color: var(--wf-ink); }
.tab-pane { display: none; }
.tab-pane.is-on { display: block; }

/* grades e cards */
.grid { display: grid; gap: 24px; }
.cols-1 { grid-template-columns: minmax(0, 1fr); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { background: var(--wf-card); border: 1px solid var(--wf-line); border-radius: 16px; padding: 30px; }
.card.plain { background: transparent; border-color: transparent; padding: 8px; }
.card.media { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card-in { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.card-in .btns { margin-top: auto; padding-top: 16px; }
.ico { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 18px; border-radius: 15px; background: var(--wf-soft); color: var(--wf-mute); }
.ico svg { width: 26px; height: 26px; }
.ico.sm { width: 40px; height: 40px; margin: 0; border-radius: 11px; }
.ico.sm svg { width: 20px; height: 20px; }
.al-center > .ico, .card.al-center .ico { margin-left: auto; margin-right: auto; }
.lnk { margin-top: 14px; }
.tag { display: inline-block; width: fit-content; margin-bottom: 12px; padding: 4px 11px; border-radius: 20px; background: var(--wf-soft); color: var(--wf-text); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.nums { text-align: center; }
.num-n { font-size: 48px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; color: var(--wf-ink); }
.num-l { margin-top: 6px; font-size: 14px; color: var(--wf-text); }
.logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.logo-ph { flex: 1 1 130px; max-width: 176px; height: 76px; display: grid; place-items: center; padding: 0 12px; border-radius: 12px; background: var(--wf-soft); color: var(--wf-mute); font-size: 12.5px; font-weight: 600; text-align: center; }
.person { text-align: center; }
.p-name { font-size: 16.5px; font-weight: 600; color: var(--wf-ink); }
.p-role { margin-top: 2px; font-size: 13.5px; color: var(--wf-mute); }
.p-bio { margin-top: 10px; }

.plans { align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 34px 28px 28px; background: var(--wf-card); border: 1px solid var(--wf-line); border-radius: 18px; }
.plan.is-feat { border: 2px solid var(--wf-ink); box-shadow: 0 14px 34px rgba(0, 0, 0, .08); }
.plan-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 5px 13px; border-radius: 20px; background: var(--wf-ink); color: var(--wf-card); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.plan-price { margin: 16px 0 4px; font-size: 30px; font-weight: 700; color: var(--wf-ink); }
.plan ul { list-style: none; padding: 0; margin: 20px 0 26px; flex: 1; }
.plan li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--wf-line); font-size: 14px; color: var(--wf-text); }
.plan > .w-btn { width: 100%; }

.tbl-wrap { overflow-x: auto; border: 1px solid var(--wf-line); border-radius: 14px; background: var(--wf-card); }
.w-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.w-tbl th, .w-tbl td { padding: 15px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--wf-line); color: var(--wf-text); }
.w-tbl th { background: var(--wf-soft); color: var(--wf-ink); font-weight: 600; }
.w-tbl td:first-child { font-weight: 600; color: var(--wf-ink); }
.w-tbl tr:last-child td { border-bottom: 0; }

/* carrossel de cards */
.car { position: relative; }
.car-track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 2px 14px; scrollbar-width: thin; }
.car-track > * { flex: 0 0 calc((100% - (var(--vis) - 1) * 24px) / var(--vis)); scroll-snap-align: start; }
.car-arrow { position: absolute; top: 34%; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--wf-line); border-radius: 50%; background: var(--wf-card); color: var(--wf-ink); cursor: pointer; box-shadow: 0 3px 10px rgba(0, 0, 0, .1); }
.car-arrow svg { width: 20px; height: 20px; }
.car-arrow.prev { left: -22px; }
.car-arrow.next { right: -22px; }
.car-hint { margin-top: 6px; font: 500 12px var(--font); color: var(--wf-mute); text-align: center; }
.frame.preview .car-hint { display: none; }

/* etapas e linha do tempo */
.steps-h { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 24px; }
.steps-h .step { position: relative; text-align: center; }
.steps-h .step:not(:last-child)::after { content: ""; position: absolute; top: 27px; left: calc(50% + 36px); right: calc(-50% + 12px); height: 2px; background: var(--wf-line); }
.step-n { position: relative; z-index: 1; display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 18px; border-radius: 50%; background: var(--wf-btn); color: var(--wf-btn-ink); font-size: 18px; font-weight: 700; }
.steps-v { display: grid; max-width: 760px; margin: 0 auto; }
.steps-v .step { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 22px; padding-bottom: 30px; }
.steps-v .step-n { margin: 0; }
.steps-v .step:not(:last-child)::after { content: ""; position: absolute; left: 26px; top: 60px; bottom: 6px; width: 2px; background: var(--wf-line); }
.steps-v .step-tx { padding-top: 12px; }
.tl { position: relative; max-width: 940px; margin: 0 auto; }
.tl::before { content: ""; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 2px; margin-left: -1px; background: var(--wf-line); }
.tl-item { position: relative; width: 50%; padding: 0 46px 42px 0; text-align: right; }
.tl-item:nth-child(even) { margin-left: 50%; padding: 0 0 42px 46px; text-align: left; }
.tl-item::before { content: ""; position: absolute; top: 4px; right: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--wf-card); border: 4px solid var(--wf-ink); box-sizing: border-box; }
.tl-item:nth-child(even)::before { right: auto; left: -9px; }
.tl-d { margin-bottom: 6px; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--wf-mute); }

/* prova social */
.tcard { display: flex; flex-direction: column; }
.tcard .tq { flex: 1; }
.stars { display: inline-flex; gap: 2px; margin-bottom: 14px; color: var(--wf-ink); }
.stars svg { width: 16px; height: 16px; }
.rv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.rv-head .w-head { margin: 0; }
.rv-sum { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid var(--wf-line); border-radius: 14px; background: var(--wf-card); }
.rv-sum small { font-size: 12px; color: var(--wf-mute); }
.rv-score { display: flex; align-items: center; gap: 8px; }
.rv-score b { font-size: 24px; color: var(--wf-ink); }
.rv-score .stars { margin: 0; }
.g-badge, .rv-g { display: grid; place-items: center; border-radius: 50%; background: var(--wf-soft); color: var(--wf-ink); font-weight: 700; }
.g-badge { width: 44px; height: 44px; font-size: 20px; }
.rv-g { width: 26px; height: 26px; margin-left: auto; font-size: 12px; }
.rv-card .who { margin-bottom: 14px; }
.rv-av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--wf-soft); color: var(--wf-mute); font-weight: 600; flex: none; }
.auto-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 20px; padding: 10px 14px; border-radius: 10px; background: var(--wf-soft); color: var(--wf-mute); font-size: 12.5px; line-height: 1.5; }
.auto-note svg { width: 16px; height: 16px; margin-top: 1px; }

/* mapa e contato */
.map-ph { min-height: 380px; border-radius: 16px; }
.map-ph > svg { width: 44px; height: 44px; color: var(--wf-ink); padding: 8px; }
.addr { display: grid; gap: 22px; margin-top: 10px; }
.addr.row { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 28px; }
.addr-it { display: flex; gap: 14px; align-items: flex-start; text-align: left; }
.ci .w-h3 { margin-top: 2px; }

/* conversão */
.cta { max-width: 800px; margin: 0 auto; text-align: center; }
.cta .w-h2 { font-size: 36px; }
.cta .btns { justify-content: center; }
.cta.cta-split { display: flex; align-items: center; justify-content: space-between; gap: 40px; max-width: none; text-align: left; }
.cta.cta-split .w-p { margin: 0; }
.cta.cta-split .btns { flex: none; }
.form-card { padding: 32px; border: 1px solid var(--wf-line); border-radius: 18px; background: var(--wf-card); box-shadow: 0 12px 32px rgba(0, 0, 0, .06); }
.form-card > .w-btn { width: 100%; margin-top: 20px; }
.form-narrow { max-width: 620px; margin: 0 auto; }
.fgrid { display: grid; gap: 16px 18px; }
.fgrid.c2 { grid-template-columns: 1fr 1fr; }
.fw .fl { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--wf-ink); }
.fi { height: 48px; border: 1px solid var(--wf-line); border-radius: 9px; background: var(--wf-soft); }
.fi.ta { height: 112px; }
.fi.sel { display: flex; align-items: center; justify-content: flex-end; padding: 0 14px; color: var(--wf-mute); }
.fi.sel svg { width: 18px; height: 18px; }
.f-full { grid-column: 1 / -1; }
.lgpd { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--wf-mute); text-align: center; }
.nl { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.nl.center { flex-direction: column; text-align: center; }
.nl .w-p { margin: 0; }
.nl-form { display: flex; gap: 10px; flex: 0 1 470px; width: 100%; }
.nl-in { display: flex; align-items: center; flex: 1; min-width: 0; height: 48px; padding: 0 16px; border: 1px solid var(--wf-line); border-radius: 9px; background: var(--wf-card); color: var(--wf-mute); font-size: 14px; }

/* FAQ */
.faq { display: grid; gap: 12px; max-width: 880px; margin: 0 auto; }
.faq-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr); gap: 56px; align-items: start; }
.faq-side .faq { max-width: none; margin: 0; }
.faq-side .w-head { margin: 0; }
.qa { background: var(--wf-card); border: 1px solid var(--wf-line); border-radius: 14px; }
.qa-q { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; font-size: 15.5px; font-weight: 600; color: var(--wf-ink); }
.qa-qt { flex: 1; min-width: 0; }
.qa-t { flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: var(--wf-soft); color: var(--wf-ink); cursor: pointer; transition: transform .2s; }
.qa-t svg { width: 16px; height: 16px; }
.qa.is-open .qa-t { transform: rotate(45deg); }
.qa-a { display: none; padding: 0 20px 20px; }
.qa.is-open .qa-a { display: block; }

/* ferramenta */
.tool { padding: 30px; border: 1px solid var(--wf-line); border-radius: 18px; background: var(--wf-card); box-shadow: 0 12px 32px rgba(0, 0, 0, .06); }
.tool-t { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; font-size: 17px; font-weight: 600; color: var(--wf-ink); }
.tool > .w-btn { width: 100%; margin-top: 18px; }
.tool-r { margin-top: 16px; padding: 18px; border: 1.5px dashed var(--wf-line); border-radius: 12px; text-align: center; color: var(--wf-mute); font-size: 14px; }

/* blog */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: -14px 0 30px; justify-content: center; }
.chip { padding: 7px 16px; border: 1px solid var(--wf-line); border-radius: 20px; background: var(--wf-card); color: var(--wf-text); font-size: 13px; font-weight: 500; }
.chip.is-on { background: var(--wf-ink); border-color: var(--wf-ink); color: var(--wf-card); }
.post-m { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12px; color: var(--wf-mute); }
.post-m .tag { margin: 0; }
.post .w-sm { margin-bottom: 12px; }
.post.big { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 36px; align-items: center; }
.post.big .ph-post { margin: 0; }
.post.big .w-h3 { font-size: 26px; }

/* cabeçalho e rodapé do wireframe */
.g-top { display: flex; align-items: center; gap: 8px; padding: 9px 40px; background: #2C2C34; color: #C4C4CE; font-size: 12.5px; --wf-ink: #F3F3F6; --ed-hover: rgba(var(--brand-rgb), .6); }
.g-top > svg { width: 14px; height: 14px; }
.g-top > svg:not(:first-child) { margin-left: 14px; }
.g-soc { display: flex; gap: 6px; margin-left: auto; }
.g-soc i, .f-soc i { display: block; width: 22px; height: 22px; border-radius: 50%; background: #4A4A55; }
.g-header { display: flex; align-items: center; gap: 28px; padding: 20px 40px; background: #fff; border-bottom: 1px solid #E8E8EE; }
.g-logo { flex: none; display: grid; place-items: center; width: 120px; height: 42px; border-radius: 9px; background: #E3E3E9; color: #8A8A96; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; }
.g-logo.dark { background: #3E3E48; color: #8E8E9A; }
.g-menu { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 22px; flex: 1; min-width: 0; }
.g-link { padding: 4px 0; border-bottom: 2px solid transparent; font-size: 14px; font-weight: 500; color: #5A5A66; white-space: nowrap; cursor: pointer; }
.g-link:hover { color: #2E2E36; }
.g-link.is-cur { color: #2E2E36; border-color: #2E2E36; }
.g-burger { display: none; color: #2E2E36; margin-left: auto; }
.g-burger svg { width: 24px; height: 24px; }
.g-footer { background: #2C2C34; color: #C4C4CE; --wf-ink: #F3F3F6; --wf-text: #C4C4CE; --wf-mute: #8E8E9A; --wf-line: #45454F; --wf-btn: #F3F3F6; --wf-btn-ink: #2C2C34; --wf-card: #35353E; --ed-hover: rgba(var(--brand-rgb), .6); }
.f-news { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 34px 40px; border-bottom: 1px solid #45454F; }
.f-news .f-t { margin: 0; }
.f-main { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(var(--fc), minmax(0, 1fr)); gap: 40px; padding: 56px 40px 40px; }
.f-t { margin-bottom: 14px; font-size: 14.5px; font-weight: 600; color: #fff; }
.f-t.big { font-size: 20px; }
.f-l { display: block; padding: 4px 0; font-size: 13.5px; color: #A9A9B5; cursor: pointer; }
.f-about { margin: 18px 0; font-size: 13.5px; line-height: 1.7; color: #A9A9B5; }
.f-soc { display: flex; gap: 10px; }
.f-soc i { width: 34px; height: 34px; background: #3E3E48; }
.f-bottom { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding: 18px 40px; border-top: 1px solid #45454F; font-size: 12.5px; color: #8E8E9A; }

/* modo visualização */
.frame.preview .g-link, .frame.preview .f-l[data-goto-page] { cursor: pointer; }

/* ---------- respostas ao tamanho da página (desktop / tablet / celular) ---------- */
@container page (max-width: 760px) {
  .sec-body { padding: 60px 40px; }
  .hero-in { padding: 72px 48px; }
  .hero.slider.has-nav .hero-in { padding-left: 84px; padding-right: 84px; }
  .w-h1 { font-size: 38px; }
  .w-h2 { font-size: 28px; }
  .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { gap: 40px; }
  .hero-form .hf-in { gap: 32px; padding: 64px 40px; }
  .faq-side { grid-template-columns: 1fr; gap: 28px; }
  .steps-h.many { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 36px; }
  .steps-h.many .step:nth-child(4n)::after { display: none; }
  .f-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f-brand { grid-column: 1 / -1; }
  .g-header, .g-top { padding-left: 28px; padding-right: 28px; }
  .g-menu { gap: 4px 16px; }
  .g-link { font-size: 13px; }
  .car-track > * { flex-basis: calc((100% - 24px) / 2); }
}
@container page (max-width: 620px) {
  .sec-body { padding: 48px 20px; }
  .hero { min-height: 520px; }
  .hero.h-m { min-height: 420px; }
  .hero.h-s { min-height: 260px; }
  .hero-in, .hero.slider.has-nav .hero-in { padding: 64px 22px 80px; }
  .sl-arrow { width: 38px; height: 38px; margin-top: -19px; top: auto; bottom: 14px; }
  .sl-arrow.prev { left: 12px; }
  .sl-arrow.next { right: 12px; }
  .sl-count { display: none; }
  .ph-bg .ph-cap { top: auto; bottom: 62px; left: 12px; right: auto; }
  .sec-tools { top: 42px; right: 8px; }
  .st-btn.txt span { display: none; }
  .w-h1, .w-h1.sm, .hero-split .w-h1 { font-size: 30px; }
  .w-h2, .cta .w-h2 { font-size: 24px; }
  .w-quote { font-size: 22px; }
  .w-lead { font-size: 15.5px; }
  .num-n { font-size: 38px; }
  .cols-2, .cols-3, .cols-4 { grid-template-columns: minmax(0, 1fr); }
  .nums.cols-2, .nums.cols-3, .nums.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .txt.two .txt-cols, .post.big, .hero-form .hf-in { grid-template-columns: minmax(0, 1fr); }
  .split { gap: 28px; }
  .hero-form .hf-in { padding: 56px 20px; }
  .fgrid.c2 { grid-template-columns: 1fr; }
  .steps-h { grid-template-columns: 1fr; text-align: left; }
  .steps-h .step { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; text-align: left; }
  .steps-h .step-n { width: 48px; height: 48px; margin: 0; }
  .steps-h .step::after { display: none; }
  .tl::before { left: 9px; }
  .tl-item, .tl-item:nth-child(even) { width: 100%; margin-left: 0; padding: 0 0 32px 40px; text-align: left; }
  .tl-item::before, .tl-item:nth-child(even)::before { left: 0; right: auto; }
  .car-track > * { flex-basis: 82%; }
  .car-arrow { display: none; }
  .slider.imgs .sl-arrow, .tsl .sl-arrow { display: none; }
  .tsl { padding: 0; }
  .cta.cta-split, .nl { flex-direction: column; align-items: stretch; text-align: center; gap: 22px; }
  .cta.cta-split .btns { justify-content: center; }
  .nl-form { flex-direction: column; flex-basis: auto; }
  .rv-head { flex-direction: column; align-items: stretch; }
  .g-menu, .g-header > .w-btn { display: none; }
  .g-burger { display: block; }
  .g-header, .g-top { padding: 16px 20px; }
  .g-top { flex-wrap: wrap; }
  .f-main { grid-template-columns: 1fr; padding: 40px 20px 28px; gap: 28px; }
  .f-news { flex-direction: column; align-items: stretch; padding: 28px 20px; }
  .f-bottom { padding: 16px 20px; flex-direction: column; }
  .sec-label { max-width: calc(100% - 20px); }
  .sec-type { display: none; }
  .logo-ph { flex-basis: 40%; }
  .form-card, .tool { padding: 22px; }
}

/* ---------- painel de estrutura (pop-up à direita) ---------- */
.structure { position: relative; z-index: 25; display: flex; flex-direction: column; min-height: 0; margin: 12px 12px 12px 0; overflow: hidden; background: #fff; border: 1px solid var(--gray-200); border-radius: 18px; box-shadow: var(--shadow-2); }
.st-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 12px 12px 16px; background: linear-gradient(180deg, var(--brand-50), #fff); }
.st-title { display: flex; align-items: center; gap: 10px; }
.st-title > svg { width: 24px; height: 24px; color: var(--brand-500); }
.st-title b { display: block; font-size: 14.5px; color: var(--gray-900); }
.st-title small { font-size: 11.5px; color: var(--gray-500); }
.ic-btn { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--gray-500); cursor: pointer; flex: none; }
.ic-btn svg { width: 18px; height: 18px; }
.ic-btn:hover { background: var(--gray-100); color: var(--gray-800); }
.st-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 2px 14px 10px; }
.st-stat { padding: 8px 10px; border: 1px solid var(--gray-100); border-radius: 11px; background: var(--gray-50); }
.st-stat b { display: block; font-size: 19px; line-height: 1.2; color: var(--brand-700); }
.st-stat span { font-size: 11px; color: var(--gray-500); }
.st-prog { height: 5px; margin: 0 14px 12px; overflow: hidden; border-radius: 5px; background: var(--gray-100); }
.st-prog i { display: block; height: 100%; border-radius: 5px; background: var(--brand-500); transition: width .3s; }
.st-tree { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 8px 12px; border-top: 1px solid var(--gray-100); overscroll-behavior: contain; }
.st-page { margin-top: 6px; }
.st-ph { display: flex; align-items: center; gap: 2px; padding: 2px; border-radius: 10px; }
.st-page.is-cur > .st-ph { background: var(--brand-50); }
.st-chev { display: grid; place-items: center; width: 24px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--gray-400); cursor: pointer; flex: none; }
.st-chev svg { width: 15px; height: 15px; transition: transform .15s; }
.st-page.is-col .st-chev svg { transform: rotate(-90deg); }
.st-chev:hover { color: var(--gray-700); }
.st-pname { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; height: 30px; padding: 0 4px; border: 0; background: transparent; text-align: left; font: 600 13px var(--font); color: var(--gray-800); cursor: pointer; }
.st-pt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-pn { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--gray-100); color: var(--gray-600); font-size: 11px; flex: none; }
.st-page.is-cur .st-pn { background: var(--brand-500); color: #fff; }
.st-page.is-cur .st-pname { color: var(--brand-800); }
.st-pc { flex: none; margin-right: 6px; padding: 2px 8px; border-radius: 10px; background: var(--gray-100); color: var(--gray-500); font-size: 11px; font-weight: 600; }
.st-secs { list-style: none; margin: 2px 0 4px 22px; padding: 0 0 0 10px; border-left: 1.5px solid var(--gray-200); }
.st-sec { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; text-align: left; cursor: pointer; }
.st-sec::before { content: ""; position: absolute; left: -10px; top: 50%; width: 8px; height: 1.5px; background: var(--gray-200); }
.st-sec:hover { background: var(--gray-50); }
.st-sec.is-sel { background: var(--brand-50); }
.st-sn { flex: none; width: 18px; font-size: 10.5px; font-weight: 600; color: var(--gray-400); }
.st-st { flex: 1; min-width: 0; }
.st-st b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 500; color: var(--gray-800); }
.st-st small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--gray-500); }
.st-sec.is-sel .st-st b { color: var(--brand-800); font-weight: 600; }
.st-note { display: grid; place-items: center; color: var(--brand-400); }
.st-note svg { width: 13px; height: 13px; }
.pdot { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--gray-300); display: inline-block; }
.pdot.p1 { border-color: var(--brand-400); background: linear-gradient(90deg, var(--brand-400) 50%, transparent 50%); }
.pdot.p2 { border-color: var(--brand-500); background: var(--brand-500); }
.pdot.na { border-style: dotted; }
.st-empty { padding: 6px 8px; font-size: 12px; font-style: italic; color: var(--gray-400); }
.st-g { display: flex; align-items: center; gap: 8px; margin: 14px 6px 0; padding: 9px 10px; border-radius: 10px; background: var(--gray-50); color: var(--gray-500); font-size: 11.5px; line-height: 1.4; }
.st-g svg { width: 15px; height: 15px; color: var(--brand-400); }
.st-legend { display: flex; justify-content: center; gap: 12px; padding: 8px 12px; border-top: 1px solid var(--gray-100); font-size: 10.5px; color: var(--gray-500); }
.st-legend span { display: flex; align-items: center; gap: 5px; }
.st-legend .pdot { width: 9px; height: 9px; }
.st-foot { padding: 10px 12px 12px; }
.st-pill { position: absolute; right: 18px; bottom: 18px; z-index: 26; display: none; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 12px; border: 1px solid var(--brand-200); border-radius: 22px; background: #fff; color: var(--brand-700); font: 600 13px var(--font); cursor: pointer; box-shadow: var(--shadow-2); }
.st-pill svg { width: 20px; height: 20px; color: var(--brand-500); }
.st-pill b { font-weight: 500; font-size: 12px; color: var(--gray-500); }
.st-pill:hover { border-color: var(--brand-400); }
.app.panel-min .st-pill { display: flex; }

/* ---------- botões, campos, popovers, modais ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid var(--gray-200); border-radius: 10px; background: #fff; color: var(--gray-800); font: 600 13.5px var(--font); cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s; }
.btn svg { width: 17px; height: 17px; }
.btn:hover { background: var(--gray-50); border-color: var(--gray-300); }
.btn.sm { height: 34px; padding: 0 13px; font-size: 12.5px; }
.btn.primary { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }
.btn.primary:hover { background: var(--brand-600); border-color: var(--brand-600); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger:hover { background: #A61F1F; }
.btn.ghost { background: var(--brand-50); border-color: var(--brand-100); color: var(--brand-700); }
.btn.ghost:hover { background: var(--brand-100); }
.btn.block { width: 100%; }

.pop { position: fixed; z-index: 200; min-width: 250px; max-width: 340px; overflow: hidden; background: #fff; border: 1px solid var(--gray-200); border-radius: 15px; box-shadow: var(--shadow-3); font-family: var(--font); color: var(--gray-800); animation: popIn .12s ease; }
@keyframes popIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.opts-pop { width: 330px; }
.pop.menu-pop { max-width: none; }
.pop-h { padding: 13px 16px 11px; border-bottom: 1px solid var(--gray-100); }
.pop-h b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.pop-h small { font-size: 11.5px; color: var(--gray-500); }
.pop-b { display: grid; gap: 12px; max-height: min(64vh, 520px); overflow: auto; padding: 12px 14px 16px; }
.opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.opt.col { flex-direction: column; align-items: stretch; gap: 6px; padding-top: 10px; border-top: 1px solid var(--gray-100); }
.opt-l { font-size: 12.5px; font-weight: 500; color: var(--gray-600); }
.seg { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; padding: 2px; border-radius: 9px; background: var(--gray-100); }
.seg button { padding: 6px 9px; border: 0; border-radius: 7px; background: transparent; color: var(--gray-600); font: 500 12px var(--font); cursor: pointer; white-space: nowrap; }
.seg button:hover { color: var(--gray-900); }
.seg button.is-on { background: #fff; color: var(--brand-700); font-weight: 600; box-shadow: var(--shadow-1); }
.stepper { display: inline-flex; align-items: center; gap: 4px; padding: 2px; border-radius: 9px; background: var(--gray-100); }
.stepper button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; background: #fff; color: var(--gray-700); cursor: pointer; box-shadow: var(--shadow-1); }
.stepper button svg { width: 14px; height: 14px; }
.stepper button:hover { color: var(--brand-600); }
.stepper button:disabled { opacity: .35; cursor: default; }
.stepper b { min-width: 24px; text-align: center; font-size: 13px; }
.pop select { height: 38px; padding: 0 10px; border: 1px solid var(--gray-200); border-radius: 9px; background: #fff; font: 500 13px var(--font); color: var(--gray-800); }
.menu { display: grid; padding: 6px; }
.menu button { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--gray-800); font: 500 13px var(--font); text-align: left; cursor: pointer; }
.menu button > svg { width: 18px; height: 18px; color: var(--gray-500); }
.menu button:hover { background: var(--brand-50); color: var(--brand-800); }
.menu button:hover > svg { color: var(--brand-500); }
.menu button.danger, .menu button.danger > svg { color: var(--danger); }
.menu button.danger:hover { background: #FDECEC; }
.menu button:disabled { opacity: .4; cursor: default; background: transparent; }
.menu.wide { width: 360px; max-width: calc(100vw - 16px); }
.menu.wide button { align-items: flex-start; }
.menu.wide button > svg { margin-top: 2px; }
.menu b { display: block; font-weight: 600; }
.menu small { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 400; line-height: 1.35; color: var(--gray-500); }
.menu hr { margin: 5px 4px; border: 0; border-top: 1px solid var(--gray-100); }

.modal-ov { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; background: rgba(24, 12, 52, .48); animation: fadeIn .15s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal { display: flex; flex-direction: column; width: min(520px, 100%); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow: hidden; background: #fff; border-radius: 20px; box-shadow: var(--shadow-3); font-family: var(--font); animation: popIn .16s ease; }
.modal.wide { width: min(740px, 100%); }
.modal-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 20px 10px 24px; }
.modal-h h2 { margin: 0; font-size: 19px; color: var(--gray-900); }
.modal-b { overflow: auto; padding: 6px 24px 20px; font-size: 14px; line-height: 1.6; color: var(--gray-700); }
.modal-b p { margin: 0 0 10px; }
.modal-b .muted { color: var(--gray-500); font-size: 13px; }
.modal-f { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--gray-100); background: var(--gray-50); }
.fld { display: grid; gap: 7px; margin-bottom: 16px; }
.fld > span { font-size: 12.5px; font-weight: 600; color: var(--gray-700); }
.fld input { height: 44px; padding: 0 12px; border: 1px solid var(--gray-300); border-radius: 10px; font: 500 14px var(--font); color: var(--gray-900); }
.fld input:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .15); }
.tpl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tpl { position: relative; cursor: pointer; }
.tpl input { position: absolute; opacity: 0; pointer-events: none; }
.tpl-c { display: block; height: 100%; padding: 11px 13px; border: 1.5px solid var(--gray-200); border-radius: 12px; transition: border-color .12s, background .12s; }
.tpl:hover .tpl-c { border-color: var(--brand-300); }
.tpl input:checked + .tpl-c { border-color: var(--brand-500); background: var(--brand-50); }
.tpl input:focus-visible + .tpl-c { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.tpl b { display: block; font-size: 13px; color: var(--gray-900); }
.tpl small { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.4; color: var(--gray-500); }
.copy-ta { width: 100%; min-height: 260px; padding: 12px; border: 1px solid var(--gray-300); border-radius: 10px; font: 400 12.5px/1.5 ui-monospace, Menlo, Consolas, monospace; }

.welcome .lead { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--gray-700); }
.how { list-style: none; display: grid; gap: 14px; margin: 0 0 18px; padding: 0; }
.how li { display: flex; gap: 14px; align-items: flex-start; }
.how-n { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--brand-500); color: #fff; font-weight: 700; }
.how .how-t { display: block; margin-bottom: 2px; color: var(--gray-900); font-size: 14.5px; }
.how p b { color: var(--gray-800); }
.how p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--gray-600); }
.callout { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; border: 1px solid var(--brand-100); border-radius: 13px; background: var(--brand-50); font-size: 13.5px; line-height: 1.6; color: var(--gray-700); }
.callout > svg { width: 20px; height: 20px; margin-top: 2px; color: var(--brand-500); }
.callout b { color: var(--brand-800); }
.tips { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; font-size: 12.5px; color: var(--gray-500); }
kbd { display: inline-block; min-width: 22px; padding: 1px 6px; border: 1px solid var(--gray-300); border-bottom-width: 2px; border-radius: 6px; background: #fff; font: 600 11px var(--font); color: var(--gray-700); text-align: center; }

#toast-root { position: fixed; left: 50%; bottom: 22px; z-index: 400; display: grid; gap: 8px; justify-items: center; transform: translateX(-50%); pointer-events: none; width: max-content; max-width: calc(100vw - 24px); }
.toast { display: flex; align-items: center; gap: 14px; padding: 11px 12px 11px 18px; border-radius: 13px; background: var(--gray-900); color: #fff; font: 500 13.5px/1.45 var(--font); box-shadow: var(--shadow-3); opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; pointer-events: auto; }
.toast.on { opacity: 1; transform: none; }
.toast-btn { flex: none; padding: 6px 12px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .15); color: #fff; font: 600 13px var(--font); cursor: pointer; }
.toast-btn:hover { background: rgba(255, 255, 255, .25); }

/* ---------- mapa do site ---------- */
.mm { position: fixed; inset: 0; z-index: 250; display: flex; flex-direction: column; background: var(--gray-50); font-family: var(--font); animation: fadeIn .15s ease; }
.mm-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; background: #fff; border-bottom: 1px solid var(--gray-200); }
.mm-tt { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mm-tt > svg { width: 26px; height: 26px; color: var(--brand-500); }
.mm-tt b { display: block; font-size: 16px; color: var(--gray-900); }
.mm-tt small { font-size: 12px; color: var(--gray-500); }
.mm-act { display: flex; gap: 8px; flex: none; }
.mm-scroll { flex: 1; overflow: auto; padding: 40px 32px 60px; background-image: radial-gradient(rgba(23, 16, 48, .07) 1px, transparent 1px); background-size: 18px 18px; }
.mm-tree { display: flex; flex-direction: column; align-items: center; width: max-content; min-width: 100%; margin: 0 auto; }
.mm-root { position: relative; display: grid; gap: 2px; padding: 14px 28px; border-radius: 16px; background: var(--brand-800); color: #fff; text-align: center; box-shadow: var(--shadow-2); }
.mm-root b { font-size: 17px; }
.mm-root small { font-size: 12px; color: rgba(255, 255, 255, .7); }
.mm-root::after { content: ""; position: absolute; left: 50%; top: 100%; height: 30px; border-left: 2px solid var(--brand-300); }
.mm-pages { display: flex; align-items: flex-start; margin: 30px 0 0; padding: 0; list-style: none; }
.mm-page { position: relative; display: flex; flex-direction: column; align-items: stretch; width: 228px; padding: 30px 10px 0; }
.mm-page::before { content: ""; position: absolute; top: 0; left: 50%; height: 30px; border-left: 2px solid var(--brand-300); }
.mm-page::after { content: ""; position: absolute; top: 0; left: 0; right: 0; border-top: 2px solid var(--brand-300); }
.mm-page:first-child::after { left: 50%; }
.mm-page:last-child::after { right: 50%; }
.mm-page:only-child::after { display: none; }
.mm-pnode { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 10px; padding: 11px 13px; border: 2px solid var(--brand-400); border-radius: 13px; background: #fff; text-align: left; cursor: pointer; box-shadow: var(--shadow-1); transition: border-color .12s, box-shadow .12s; }
.mm-pnode:hover { border-color: var(--brand-600); box-shadow: var(--shadow-2); }
.mm-pn { grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--brand-500); color: #fff; font: 700 13px var(--font); }
.mm-pt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 14px var(--font); color: var(--gray-900); }
.mm-pnode small { font: 500 11.5px var(--font); color: var(--gray-500); }
.mm-secs { list-style: none; margin: 10px 0 0 14px; padding: 0 0 0 14px; border-left: 2px solid var(--brand-200); }
.mm-secs li { position: relative; padding-top: 8px; }
.mm-secs li::before { content: ""; position: absolute; left: -14px; top: calc(8px + 50% - 4px); width: 12px; border-top: 2px solid var(--brand-200); }
.mm-snode { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 8px 10px; border: 1px solid var(--gray-200); border-radius: 10px; background: #fff; text-align: left; cursor: pointer; font-family: var(--font); transition: border-color .12s, background .12s; }
.mm-snode:hover { border-color: var(--brand-300); background: var(--brand-50); }
.mm-sn { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--gray-100); color: var(--gray-600); font-size: 10.5px; font-weight: 600; }
.mm-st { min-width: 0; }
.mm-st b { display: block; font-size: 12.5px; font-weight: 600; color: var(--gray-800); line-height: 1.35; }
.mm-st small { display: block; font-size: 11px; color: var(--gray-500); }
.mm-empty { margin: 10px 0 0 14px; font-size: 12px; font-style: italic; color: var(--gray-400); }

/* ---------- telas menores (o próprio sistema) ---------- */
@media (max-width: 1380px) {
  .brand-tool small { display: none; }
  .tb-solo .tb-label { display: none; }
  .tb-solo { padding: 0 8px; }
}
@media (max-width: 1199px) {
  .workspace, .app.panel-min .workspace { grid-template-columns: var(--lib-w) minmax(0, 1fr); }
  .app.is-preview .workspace { grid-template-columns: 0 minmax(0, 1fr); }
  .structure { position: absolute; top: 0; right: 0; bottom: 0; width: var(--panel-w); }
  .tb-label { display: none; }
  .tb-btn.primary { padding: 0 10px; }
  .brand-tool { display: none; }
  .brand-sep { display: none; }
  .proj-wrap { margin-left: 4px; }
}
@media (max-width: 859px) {
  :root { --top-h: 54px; }
  .workspace, .app.panel-min .workspace, .app.is-preview .workspace { grid-template-columns: minmax(0, 1fr); }
  .library { position: fixed; top: 0; bottom: 0; left: 0; z-index: 120; width: min(330px, 88vw); transform: translateX(-102%); transition: transform .22s ease; box-shadow: var(--shadow-3); visibility: visible !important; }
  .app.lib-open .library { transform: none; }
  .lib-head .lib-close { display: grid; }
  .lib-scrim { position: fixed; inset: 0; z-index: 110; display: block; background: rgba(24, 12, 52, .4); opacity: 0; pointer-events: none; transition: opacity .2s; }
  .app.lib-open .lib-scrim { opacity: 1; pointer-events: auto; }
  .tb-lib { display: inline-flex; background: var(--brand-500); color: #fff; padding: 0 12px; }
  .tb-lib:hover { background: var(--brand-400); }
  .brand { display: none; }
  .proj-wrap { margin-left: 0; padding-left: 0; border-left: 0; }
  .proj { width: 150px; max-width: 34vw; }
  .tb-dev, #btnMap, #btnHelp, .save { display: none; }
  .topbar { gap: 6px; padding: 0 8px; }
  .pb-label, .pb-count { display: none; }
  .stage-in { padding: 14px 10px 120px; }
  .structure { width: min(var(--panel-w), 92vw); margin: 8px; top: 0; bottom: 0; right: 0; }
  .st-pill { right: 12px; bottom: 12px; }
  .st-pill b { display: none; }
  .tpl-grid { grid-template-columns: 1fr; }
  .mm-bar { flex-wrap: wrap; }
  .mm-act .btn span { display: none; }
  .mm-tt small { display: none; }
}
@media (max-width: 520px) {
  .tb-undo { display: none; }
  .proj-wrap { flex: 1 1 auto; }
  .proj { width: 100%; max-width: none; }
  .tb-flex { display: none; }
}
@media (hover: none) {
  .ptab-menu { opacity: 1; }
}

/* ---------- impressão / PDF ---------- */
#print-root { display: none; }
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  html, body { height: auto; overflow: visible; background: #fff; }
  body.printing > *:not(#print-root) { display: none !important; }
  body.printing #print-root { display: block; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pr-cover { padding: 10mm 0 6mm; font-family: var(--font); }
  .pr-brand { font-size: 10pt; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-500); }
  .pr-cover h1 { margin: 4mm 0 2mm; font-size: 26pt; color: var(--brand-800); }
  .pr-cover p { margin: 0; color: var(--gray-500); font-size: 11pt; }
  .pr-map { padding: 6mm 0; }
  .pr-map .mm-tree { width: auto; min-width: 0; }
  .pr-map .mm-pages { flex-wrap: wrap; justify-content: center; gap: 4mm 0; }
  .pr-map .mm-page { width: 56mm; break-inside: avoid; }
  .pr-map .mm-page::after { display: none; }
  .pr-map .mm-pnode, .pr-map .mm-snode { box-shadow: none; }
  .pr-page { break-before: page; }
  .pr-h { display: flex; justify-content: space-between; padding: 0 0 4mm; font: 600 13pt var(--font); color: var(--brand-800); }
  .pr-h span { font-weight: 500; font-size: 10pt; color: var(--gray-500); }
  .pr-frame { max-width: 1200px; margin: 0 auto; border: 1px solid var(--gray-200); border-radius: 8px; box-shadow: none; zoom: .72; }
  .pr-frame .g-wrap { break-inside: avoid; }
  .pr-h { max-width: 864px; margin: 0 auto; }
  .pr-frame .qa-a { display: block; }
  .pr-frame .qa-t { display: none; }
  .pr-frame .tab-pane { display: block; margin-bottom: 32px; }
  .pr-frame .sec { break-inside: avoid; }
  .pr-sl { padding: 2mm 3mm; background: var(--brand-50); border-top: 1px solid var(--brand-100); font: 600 9pt var(--font); color: var(--brand-700); break-after: avoid; }
  .pr-sl span { font-weight: 400; color: var(--gray-500); }
  .pr-frame .sl-arrow, .pr-frame .car-arrow { display: none; }
}