/* Bloco04 — comparação. Fundo claro preservado; painel e etapas mais legíveis. */
.direction { background: #f1ecf3; color: #302137; padding: 96px 0; }
.direction-inner { width: calc(100% - 112px); max-width: 1440px; margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px,7vw,112px); align-items: center; }
.direction-kicker { color: #796584; font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 25px; }
.direction h2 { font: 500 clamp(36px,3.7vw,58px)/1.13 'Manrope',sans-serif; letter-spacing: -.055em; margin: 0 0 30px; }
.direction h2 em { color: #876393; font-style: normal; }
.direction-copy > p:not(.direction-kicker) { font-size: 15px; line-height: 1.9; color: #736378; max-width: 420px; margin: 0 0 19px; }
.direction-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 48px; margin-top: 13px; padding: 0 0 8px; border-bottom: 1px solid #b29abc; color: #62416f; font-size: 13px; font-weight: 600; }
.direction-link svg { width: 34px; height: 34px; padding: 8px; border-radius: 7px; background: var(--brand-gradient,#d8b3fb); color: #160a22; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .2s; }
.direction-link:hover svg { transform: translate(2px,-2px); }
.direction-comparison { min-width: 0; }
.direction-switch { display: flex; padding: 5px; border: 1px solid #d0c1dc; border-radius: 11px; gap: 5px; margin-bottom: 18px; background: #e9e1ef; }
.direction-switch button { flex: 1; min-height: 48px; padding: 10px 8px; border: 0; border-radius: 7px; background: transparent; color: #756480; font-size: 12px; font-weight: 500; transition: background .2s,color .2s,box-shadow .2s; }
.direction-switch button[aria-pressed="true"] { background: var(--brand-gradient,#b587fa); color: #160a22; box-shadow: 0 3px 12px #8a5fef24; }
.direction-switch button:hover { color: #302137; }
#direcao .direction-panel { position: relative; isolation: isolate; padding: 26px; border: 1px solid #b587fa55; border-radius: 14px; background: radial-gradient(ellipse at 0% 0%,#b587fa13,transparent 60%),#0d101b; color: #faf8ff; box-shadow: 0 14px 38px #30213712,0 0 22px #b587fa0d; }
.direction-panel::before { content: ''; position: absolute; top: -1px; left: 23%; right: 23%; height: 2px; border-radius: 3px; background: var(--brand-gradient,#b587fa); box-shadow: 0 0 15px #b587fa65; }
.direction-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.direction-stamp { display: flex; align-items: center; gap: 8px; color: #d8b3fb; text-transform: uppercase; letter-spacing: .12em; font-size: 9px; margin: 0; }
.direction-stamp::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #b587fa; box-shadow: 0 0 9px #b587fa70; }
.direction-status { font: 9px/1.4 ui-monospace,monospace; text-transform: uppercase; letter-spacing: .1em; color: #b2a4c7; padding: 5px 7px; border: 1px solid #b587fa2e; border-radius: 4px; white-space: nowrap; }
.direction-panel h3 { font: 500 clamp(22px,2vw,28px)/1.2 'Manrope',sans-serif; letter-spacing: -.045em; margin: 0 0 12px; }
.direction-panel-desc { font-size: 12px; color: #bcb5cd; line-height: 1.75; min-height: 42px; margin: 0 0 23px; }
.direction-steps { list-style: none; display: grid; gap: 9px; margin: 0; padding: 0; }
.direction-steps li { position: relative; display: flex; align-items: start; gap: 13px; padding: 15px 13px; background: #ffffff04; border: 1px solid #b587fa25; border-radius: 8px; transition: border-color .2s,background .2s; }
.direction-steps li:hover { background: #b587fa0c; border-color: #b587fa60; }
.direction-step-icon { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border: 1px solid #b587fa38; border-radius: 7px; background: #b587fa0b; color: #cba1fb; }
.direction-step-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.direction-step-copy { min-width: 0; }
.direction-step-number { display: block; font: 8px/1.5 ui-monospace,monospace; letter-spacing: .12em; color: #b995e2; margin: 0 0 4px; }
.direction-steps strong { display: block; font-size: 12px; line-height: 1.45; font-weight: 500; color: #f4effa; }
.direction-steps p { margin: 5px 0 0; font-size: 11px; color: #a9a2bc; line-height: 1.65; }
.direction-panel-note { font-size: 10px; line-height: 1.7; color: #9186a6; margin: 19px 0 0; padding-top: 15px; border-top: 1px solid #b587fa20; }
.direction-panel[data-mode="without"] .direction-stamp { color: #b9b2c6; }
.direction-panel[data-mode="without"] .direction-stamp::before { box-shadow: none; background: #8e859f; }
.direction-panel[data-mode="without"] .direction-step-icon { color: #a9a2bc; border-style: dashed; background: transparent; }
.direction-panel[data-mode="without"] .direction-step-number { color: #a9a2bc; }
.direction-panel[data-mode="without"] .direction-steps li { border-style: dashed; background: transparent; }
.direction-footnote { color: #796584; font-size: 10px; line-height: 1.7; margin: 14px 0 0; text-align: center; }
.direction :is(a,button):focus-visible { outline: 2px solid #8054c9; outline-offset: 4px; }
@media (max-width: 1000px) and (min-width: 701px) { .direction-inner { width: calc(100% - 72px); gap: 32px; } #direcao .direction-panel { padding: 22px; } }
@media (max-width: 700px) {
 .direction { padding: 64px 0 50px; }
 .direction-inner { width: calc(100% - 44px); grid-template-columns: 1fr; gap: 30px; }
 .direction h2 { font-size: clamp(34px,9vw,45px); margin-bottom: 24px; }
 .direction-kicker { font-size: 9px; margin-bottom: 20px; }
 .direction-copy > p:not(.direction-kicker) { font-size: 13px; line-height: 1.8; }
 .direction-switch { margin-bottom: 15px; }
 .direction-switch button { font-size: 12px; }
 #direcao .direction-panel { padding: 22px 18px 18px; }
 .direction-panel-header { margin-bottom: 20px; }
 .direction-panel h3 { font-size: 23px; }
 .direction-panel-desc { min-height: 0; margin-bottom: 19px; }
 .direction-steps li { padding: 13px 10px; gap: 11px; }
}
@media (max-width: 360px) { .direction-inner { width: calc(100% - 36px); } .direction-panel h3 { font-size: 21px; } .direction-status { font-size: 8px; padding: 4px 5px; } }
@media (prefers-reduced-motion: reduce) { .direction *, .direction *::before { transition: none !important; } }