/* SGG Business Insights — artigo em formato revista */
.edprog { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 60; background: transparent; pointer-events: none; }
.edprog span { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--glow)); transform: scaleX(0); transform-origin: 0 50%; }
html:not(.js) .edprog { display: none; }

.edhero { position: relative; isolation: isolate; min-height: min(86svh, 800px); display: grid; align-items: end; padding: 150px 0 clamp(36px, 6vw, 80px); overflow: hidden; }
.edhero__bg { position: absolute; inset: 0; z-index: -1; }
.edhero__bg img { width: 100%; height: 100%; object-fit: cover; }
.edhero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--ink) 4%, rgba(4, 6, 12, .55) 48%, rgba(4, 6, 12, .25)), linear-gradient(90deg, rgba(4, 6, 12, .6), transparent 60%); }
.edhero h1 { font-size: clamp(2.2rem, 5.6vw, 5rem); max-width: 18ch; line-height: 1.02; margin: 0 0 18px; }
.edhero .lead { max-width: 60ch; font-size: clamp(1.05rem, 1.6vw, 1.3rem); }
.edhero .crumbs a { color: var(--glow); }
.edmeta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 22px 0 0; font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--steel); }
.edmeta span + span::before, .edmeta time + span::before { content: "·"; margin-right: 18px; color: var(--line-2); }

.edbody { position: relative; z-index: 1; padding: clamp(36px, 6vw, 80px) 0 20px; }
.edcol { max-width: 740px; margin: 0 auto; font-size: clamp(1.05rem, 1.25vw, 1.18rem); line-height: 1.78; color: var(--silver); }
.edcol > p:first-child { font-size: clamp(1.2rem, 1.7vw, 1.45rem); line-height: 1.6; color: var(--text); }
.edcol p { margin: 0 0 1.15em; }
.edcol a { color: var(--glow); text-decoration: underline; text-underline-offset: 3px; }
.edcol h2 { font-size: clamp(1.55rem, 3vw, 2.3rem); line-height: 1.1; margin: 0 0 .55em; color: var(--white); }
.edcol .reason { position: relative; padding: clamp(30px, 5vw, 56px) 0 0; margin-top: clamp(18px, 3vw, 34px); border-top: 1px solid var(--line); }
.edcol .reason > .n { display: block; font: 600 13px/1 var(--mono); letter-spacing: .16em; color: var(--electric); margin-bottom: 14px; }
.edcol ul { padding-left: 1.2em; margin: 0 0 1.2em; }
.edcol li { margin-bottom: .4em; }
.edcol .tip { margin: 1.4em 0 .4em; padding: 18px 20px 6px; border-radius: var(--r-sm); background: linear-gradient(135deg, rgba(29, 91, 216, .16), rgba(29, 91, 216, .05)); border: 1px solid rgba(61, 139, 255, .3); border-left: 3px solid var(--electric); }
.edcol .tip strong { display: block; font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--glow); margin-bottom: 10px; }
.edcol .tip p { color: var(--text); font-size: .98em; }
.edcol .ed-src { font-size: .95rem; }

.ed-fig { margin: 2.2em calc(50% - min(50vw - var(--pad), 480px)); }
.ed-fig img, .ed-fig video { width: 100%; height: auto; display: block; border-radius: var(--r); border: 1px solid var(--line); }
.ed-fig figcaption, .cmp figcaption { margin-top: 10px; font-size: .86rem; color: var(--steel); text-align: center; }
@media (max-width: 800px) { .ed-fig { margin-left: 0; margin-right: 0; } }

.ed-cta { margin: 2.6em 0 1em; padding: clamp(22px, 4vw, 36px); border-radius: var(--r); background: radial-gradient(120% 140% at 0 0, rgba(29, 91, 216, .28), rgba(10, 20, 48, .9)); border: 1px solid var(--line-2); display: grid; gap: 18px; }
.ed-cta p { margin: 0 0 .6em; color: var(--text); }
.ed-cta__btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* Comparação interativa (dois sites fictícios) */
.cmp { margin: 2.2em calc(50% - min(50vw - var(--pad), 480px)); }
@media (max-width: 800px) { .cmp { margin-left: 0; margin-right: 0; } }
.cmp__stage { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line-2); container-type: inline-size; background: #fff; user-select: none; -webkit-user-select: none; }
.cmp__pane { position: absolute; inset: 0; overflow: hidden; }
.cmp__pane--old { clip-path: inset(0 calc(100% - var(--x)) 0 0); background: #e8e2c4; color: #222; font-family: "Times New Roman", Times, serif; padding: 2.2cqw 3cqw; }
.cmp__pane--new { background: linear-gradient(160deg, #f7faff, #e6efff); color: #0a1430; font-family: var(--sans, system-ui, sans-serif); padding: 2.4cqw 3.4cqw; }
.cmp__tag { position: absolute; bottom: 2.2cqw; z-index: 3; font: 600 max(10px, 1.7cqw)/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: .9cqw 1.6cqw; border-radius: 99px; pointer-events: none; }
.cmp__tag--old { left: 2.2cqw; background: #6b5b2a; color: #fff; }
.cmp__tag--new { right: 2.2cqw; background: var(--blue); color: #fff; }
.cmp__handle { position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--x); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 0 18px rgba(61, 139, 255, .8); pointer-events: none; }
.cmp__handle::after { content: "↔"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-size: 20px; box-shadow: 0 4px 18px rgba(0, 0, 0, .45); border: 2px solid #fff; }
.cmp__range { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; -webkit-appearance: none; appearance: none; }
.cmp__range:focus-visible ~ .cmp__handle { box-shadow: 0 0 0 3px var(--electric), 0 0 18px rgba(61, 139, 255, .9); }
/* site antigo (de propósito confuso) */
.o-top { display: flex; flex-wrap: wrap; gap: .6cqw 1.2cqw; font-size: 1.5cqw; color: #00c; text-decoration: underline; }
.o-top i { font-style: normal; }
.cmp__pane--old h4 { margin: 1.6cqw 0; font-size: 4cqw; color: #c00; text-align: center; letter-spacing: .02em; text-shadow: 1px 1px 0 #ff0; }
.o-row { display: flex; gap: 2cqw; align-items: flex-start; }
.o-img { flex: 0 0 24cqw; height: 15cqw; background: repeating-linear-gradient(45deg, #b9b08a, #b9b08a 6px, #cfc79f 6px, #cfc79f 12px); border: 2px inset #888; }
.cmp__pane--old p { margin: 0; font-size: 1.7cqw; line-height: 1.25; color: #555; }
.o-blocks { display: flex; gap: 1cqw; margin-top: 2cqw; }
.o-blocks span { flex: 1; height: 9cqw; background: #d4cca4; border: 1px solid #998; }
.o-blocks span:nth-child(2) { background: #c9a0a0; }
.o-blocks span:nth-child(3) { background: #a0b9c9; }
.cmp__pane--old small { display: block; margin-top: 2.4cqw; height: 1cqw; width: 18cqw; background: #cfc8a8; }
/* site novo */
.n-top { display: flex; align-items: center; gap: 2cqw; padding-bottom: 1.8cqw; border-bottom: 1px solid rgba(10, 20, 48, .1); }
.n-top b { font-size: 2.2cqw; color: var(--blue); }
.n-nav { display: flex; gap: 2cqw; margin-left: auto; font-size: 1.7cqw; color: #3a4a6b; }
.n-nav i { font-style: normal; }
.n-top u { text-decoration: none; background: #0a1430; color: #fff; font-size: 1.6cqw; padding: 1cqw 2cqw; border-radius: 99px; }
.n-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3cqw; align-items: center; padding: 3cqw 0; }
.n-hero h4 { color: #0a1430; font-family: inherit; margin: 0 0 1.2cqw; font-size: 4.2cqw; line-height: 1.05; }
.n-hero p { margin: 0 0 2cqw; font-family: inherit; font-size: 1.8cqw; color: #3a4a6b; line-height: 1.4; }
.n-btn { display: inline-block; background: var(--blue); color: #fff; font-weight: 600; font-size: 1.9cqw; padding: 1.3cqw 2.6cqw; border-radius: 99px; box-shadow: 0 1.2cqw 3cqw rgba(29, 91, 216, .35); }
.n-img { aspect-ratio: 4 / 3; border-radius: 2cqw; background: linear-gradient(135deg, #1d5bd8, #7fb2ff 60%, #c9defd); }
.n-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; }
.n-cards span { height: 8.5cqw; border-radius: 1.4cqw; background: #fff; box-shadow: 0 .4cqw 2cqw rgba(10, 20, 48, .1); }
/* sem JavaScript: os dois lado a lado, empilhados */
html:not(.js) .cmp__stage { aspect-ratio: auto; display: grid; gap: 0; }
html:not(.js) .cmp__pane { position: relative; clip-path: none; }
html:not(.js) .cmp__handle, html:not(.js) .cmp__range { display: none; }
html:not(.js) .cmp__tag { position: static; display: inline-block; margin: 8px; }
@media (max-width: 520px) { .n-nav { display: none; } .cmp__stage { aspect-ratio: 4 / 3.6; } .cmp__handle::after { width: 38px; height: 38px; } }
@media (prefers-reduced-motion: reduce) { .edprog span { transition: none; } }

/* ---- Imersão da leitura ---- */
.edhero__bg img { transform: translate3d(0, var(--py, 0px), 0) scale(1.14); will-change: transform; }
html.still .edhero__bg img, html.lite .edhero__bg img { transform: none; }
.edhero h1 .w i { font-style: normal; }
.edcol .reason > .n { font-size: clamp(3.4rem, 8vw, 6rem); font-weight: 700; letter-spacing: 0; line-height: .9; color: transparent; -webkit-text-stroke: 1px rgba(127, 178, 255, .55); margin-bottom: 8px; }
@media (min-width: 1280px) { .edcol .reason > .n { position: absolute; left: -150px; top: 46px; margin: 0; } }
.edcol .reason h2 { background: linear-gradient(180deg, #fff, var(--silver)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ed-fig img { transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.ed-fig:hover img { transform: scale(1.02); }
.edtoc { position: fixed; right: clamp(14px, 2vw, 36px); top: 50%; transform: translateY(-50%); z-index: 40; display: none; flex-direction: column; gap: 4px; }
@media (min-width: 1200px) { .edtoc { display: flex; } }
.edtoc a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; height: 26px; font: 500 11px/1 var(--mono); letter-spacing: .08em; color: transparent; text-transform: uppercase; transition: color .25s; }
.edtoc a::after { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--steel); background: transparent; transition: all .25s; flex: none; }
.edtoc a:hover, .edtoc a.on { color: var(--text); }
.edtoc a.on::after { background: var(--electric); border-color: var(--electric); box-shadow: 0 0 12px var(--electric); transform: scale(1.25); }
.edtoc a span { max-width: 22ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:not(.js) .edtoc { display: none; }