/* Home — composição específica da página. Fundamentos e componentes vêm de styles/tokens.css e styles/components.css. */
.wl-name .eyebrow{color:var(--blue);font-size:var(--fs-label)}
.phone .p-head{gap:10px}
.phone .p-head b{white-space:nowrap}
.phone .p-head .quiet{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px}
.dark .ui:not(.kyra) .quiet,.dark .client-card .quiet{color:var(--ink-3)}
.hero{padding-block:clamp(40px, 5vw, 88px) clamp(80px, 9vw, 150px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:28px}
.hero-copy .lead{max-width:34ch}
.hero-copy .sub{font-size:var(--fs-body);color:var(--ink);max-width:38ch;line-height:1.55}
.hero-copy .sub span{display:block}
.for-who{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-small);color:var(--ink-2)}
.for-who::before{content:"";width:18px;height:1px;background:var(--neutral)}
.hero-stage{position:relative;padding-bottom:128px}
.hero-stage .side{margin-bottom:12px}
.q-row.is-target{background:var(--blue-wash)}
.phone{position:absolute;right:0;bottom:0;width:min(56%,268px);border-radius:28px;background:var(--white);box-shadow:0 30px 60px -28px rgba(29,29,31,.45),0 0 0 1px var(--line);padding:14px 12px 16px;font-family:var(--f-ui);font-size:12.5px;transition:transform .7s var(--ease),opacity .7s var(--ease)}
.phone .notch{width:64px;height:5px;border-radius:9px;background:var(--line-2);margin:0 auto 12px}
.phone .p-head{display:flex;align-items:center;justify-content:space-between;padding:0 4px 10px}
.phone .p-head b{font-weight:600;font-size:12.5px}
.phone .p-card{border-radius:14px;background:var(--paper);padding:12px;display:flex;flex-direction:column;gap:8px}
.phone .p-card .k{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#0060C9;font-weight:600}
.phone .p-card .t{font-weight:500;font-size:13px;line-height:1.35}
.phone .ui-btn{height:34px;width:100%}
.client-label{position:absolute;left:0;bottom:56px;margin:0;display:flex;align-items:center;gap:12px;transition:opacity .6s var(--ease)}
.client-label .rule{width:clamp(40px,8vw,120px);height:1px;background:var(--line-2)}
[data-hero][data-step="0"] .client-label,[data-hero][data-step="1"] .client-label{opacity:.3}
[data-hero][data-step="0"] .phone,[data-hero][data-step="1"] .phone{transform:translateY(18px);opacity:0}
.hero .ui-queue .action-cell{display:flex;align-items:center;gap:8px;justify-content:flex-end}
@media (max-width:980px){.hero-grid{grid-template-columns:minmax(0,1fr)}.hero-stage{max-width:620px}}
@media (max-width:560px){.hero-stage{padding-bottom:0}.client-label{position:static;margin-top:32px}.client-label .rule{display:none}.phone{position:relative;right:auto;bottom:auto;width:82%;margin:12px 0 0 auto}.hero .ui-row .meta{display:none}}
@media (max-width:560px){[data-hero][data-step="0"] .phone,[data-hero][data-step="1"] .phone{opacity:.35;transform:translateY(8px)}}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,120px);align-items:start}
.split.center{align-items:center}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr)}}
.scatter{position:relative;display:flex;flex-direction:column;gap:0;padding-left:28px}
.scatter::before{content:"";position:absolute;left:9px;top:22px;bottom:22px;width:1px;background:var(--line-2);transform-origin:top;transition:transform 1s var(--ease) .35s}
.sc-item{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:start;padding:14px 16px;margin-bottom:12px;background:var(--white);border-radius:14px;box-shadow:var(--shadow-ui),0 0 0 1px var(--line);font-family:var(--f-ui);font-size:13px;transition:transform .9s var(--ease),box-shadow .6s}
.sc-item::before{content:"";position:absolute;left:-23px;top:22px;width:9px;height:9px;border-radius:50%;background:var(--paper);box-shadow:0 0 0 1.5px var(--neutral);transition:background .4s .6s,box-shadow .4s .6s}
.sc-item .src{grid-row:span 2;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--paper);font-size:10px;font-weight:600;color:var(--ink-2)}
.sc-item .src svg{width:15px;height:15px}
.sc-item .t{font-weight:500}
.sc-item .m{color:var(--ink-2);font-size:12px}
.sc-item .linked{grid-column:2;display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;max-height:0;overflow:hidden;opacity:0;transition:max-height .6s var(--ease) .5s,opacity .5s .7s}
.scatter.is-connected .sc-item{transform:none!important}
.scatter.is-connected .sc-item::before{background:var(--blue);box-shadow:0 0 0 4px var(--blue-wash)}
.scatter.is-connected .linked{max-height:60px;opacity:1}
.scatter:not(.is-connected)::before{transform:scaleY(0)}
.scatter-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 18px -28px;font-family:var(--f-ui);font-size:12.5px;color:var(--ink-2);transition:opacity .5s .4s}
.scatter-head b{color:var(--ink);font-weight:600}
.scatter:not(.is-connected) .scatter-head{opacity:.35}
.sc-item:nth-of-type(1){--tx:-14px;--ty:10px;--rot:-2.4deg}
.sc-item:nth-of-type(2){--tx:46px;--ty:22px;--rot:2.2deg}
.sc-item:nth-of-type(3){--tx:-30px;--ty:30px;--rot:1.4deg}
.sc-item:nth-of-type(4){--tx:58px;--ty:34px;--rot:-2.8deg}
.scatter:not(.is-connected) .sc-item{transform:translate(var(--tx),var(--ty)) rotate(var(--rot))}
@media (max-width:560px){.sc-item:nth-of-type(1){--tx:-4px;--rot:-1.4deg}.sc-item:nth-of-type(2){--tx:6px;--rot:1.2deg}.sc-item:nth-of-type(3){--tx:-6px;--rot:1deg}.sc-item:nth-of-type(4){--tx:8px;--rot:-1.6deg}}
.scattered-words{font-size:var(--fs-h3);line-height:1.35;letter-spacing:-.018em;display:flex;flex-direction:column;gap:2px}
.scattered-words span:nth-child(odd){color:var(--ink)}
.scattered-words span:nth-child(even){color:var(--ink-2)}
.marks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:var(--space-inner);border-top:1px solid var(--line-2)}
.marks li{list-style:none;padding:22px 24px 0 0;font-size:1.06rem;line-height:1.4;letter-spacing:-.01em;display:flex;gap:12px;align-items:baseline}
.marks li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--blue);transform:translateY(-2px)}
.marks{padding:0;margin-bottom:0}
@media (max-width:900px){.marks{grid-template-columns:repeat(2,minmax(0,1fr))}.marks li{padding-bottom:18px}}
@media (max-width:480px){.marks{grid-template-columns:minmax(0,1fr)}}
.op-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:end;margin-bottom:var(--space-head)}
@media (max-width:900px){.op-head{grid-template-columns:minmax(0,1fr)}}
.c360{display:grid;grid-template-columns:240px minmax(0,1fr);overflow:hidden}
.c360-side{background:var(--paper);border-right:1px solid var(--line);padding:22px 14px;display:flex;flex-direction:column;gap:18px}
.c360-id{display:flex;flex-direction:column;gap:4px;padding:0 10px}
.c360-id .nm{font-weight:600;font-size:14px}
.c360-id .sm{color:var(--ink-2);font-size:12px}
.team{display:flex;flex-direction:column;gap:8px;padding:14px 10px 0;border-top:1px solid var(--line)}
.team .r{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2)}
.av{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:600;background:var(--ink);color:var(--paper);flex:none}
.av.b{background:var(--blue);color:#fff}
.av.g{background:var(--neutral);color:var(--ink)}
.c360-main{padding:22px 24px 24px;min-height:430px;display:flex;flex-direction:column;gap:18px;min-width:0}
.c360-main h4{font-family:var(--f-ui);font-weight:600;font-size:15px;letter-spacing:-.01em}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kpi{border-radius:12px;background:var(--paper);padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.kpi b{font-weight:600;font-size:18px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi span{font-size:11.5px;color:var(--ink-2)}
.tl{display:flex;flex-direction:column;gap:0;border-radius:12px;box-shadow:0 0 0 1px var(--line)}
.tl .ui-row{padding:11px 14px}
.op-foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:20px 48px;margin-top:var(--space-sub)}
.op-foot .micro{font-size:var(--fs-h3);letter-spacing:-.018em;line-height:1.3}
.op-foot .micro span{display:inline}
.op-foot .micro span + span::before{content:" "}
@media (max-width:760px){.c360{grid-template-columns:minmax(0,1fr)}.c360-side{border-right:0;border-bottom:1px solid var(--line)}.tabs-v{flex-direction:row;overflow-x:auto;scrollbar-width:none;margin-inline:-14px;padding-inline:14px}.tabs-v::-webkit-scrollbar{display:none}.team{display:none}.c360-main{min-height:0;padding:18px}.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.kpi b{font-size:16px}}
.att-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(40px,6vw,96px);align-items:center}
@media (max-width:980px){.att-grid{grid-template-columns:minmax(0,1fr)}}
.inbox{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);overflow:hidden}
.chat{display:flex;flex-direction:column;min-height:400px;border-right:1px solid var(--line);min-width:0}
.chat-body{flex:1;display:flex;flex-direction:column;gap:8px;padding:16px;background:var(--paper)}
.msg{max-width:84%;padding:9px 12px;border-radius:14px;background:var(--white);box-shadow:0 0 0 1px var(--line);font-size:12.8px;line-height:1.4}
.msg small{display:block;margin-top:3px;color:var(--ink-3);font-size:10.5px}
.msg.out{align-self:flex-end;background:var(--ink);color:var(--paper);box-shadow:none}
.msg.out small{color:var(--paper-3)}
.msg.sys{align-self:center;background:none;box-shadow:none;color:var(--ink-3);font-size:11.5px;padding:2px}
.ctx{padding:16px;display:flex;flex-direction:column;gap:14px;min-width:0}
.ctx dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px 14px;font-size:12.3px}
.ctx dt{color:var(--ink-2)}
.ctx dd{margin:0;font-weight:500;text-align:right}
.pipe{display:flex;gap:4px}
.pipe i{flex:1;height:5px;border-radius:9px;background:var(--line-2)}
.pipe i.on{background:var(--blue)}
.inline-points{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:var(--fs-small);color:var(--ink)}
.inline-points span{display:inline-flex;align-items:center;gap:9px}
.inline-points span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--neutral)}
@media (max-width:640px){.inbox{grid-template-columns:minmax(0,1fr)}.chat{border-right:0;border-bottom:1px solid var(--line);min-height:0}}
#plataforma{overflow-x:clip}
.ia-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(40px,6vw,104px);align-items:center}
@media (max-width:980px){.ia-grid{grid-template-columns:minmax(0,1fr)}}
.kyra-mark{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-small);color:var(--paper-2)}
.kyra-mark i{margin-left:5px;width:10px;height:10px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 5px rgba(0,122,255,.18)}
.kyra{font-family:var(--f-ui);font-size:13px;background:var(--surface-d);border-radius:20px;box-shadow:0 0 0 1px var(--line-d);color:var(--paper);overflow:hidden}
.kyra-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line-d)}
.kyra-head .t{display:flex;align-items:center;gap:10px;font-weight:600}
.kyra-head .t i{width:8px;height:8px;border-radius:50%;background:var(--blue)}
.kyra-head .ctx-pill{font-size:11.5px;color:var(--paper-2);background:var(--surface-d2);padding:4px 10px;border-radius:999px}
.kyra-body{display:flex;flex-direction:column;gap:14px;padding:18px;min-height:470px}
.k-msg{transition:opacity .5s var(--ease),transform .5s var(--ease)}
.k-msg.is-pending{opacity:0;transform:translateY(8px)}
.k-user{align-self:flex-end;max-width:80%;background:var(--blue);color:#fff;padding:10px 14px;border-radius:16px 16px 4px 16px;font-size:13.2px}
.k-bot{display:flex;flex-direction:column;gap:10px;max-width:96%}
.k-bot .src{font-size:11px;color:var(--paper-3);display:flex;align-items:center;gap:6px}
.k-bot p{color:var(--paper);line-height:1.5}
.k-list{display:flex;flex-direction:column;border-radius:12px;background:var(--surface-d2);overflow:hidden}
.k-list .r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:10px 12px;border-bottom:1px solid var(--line-d)}
.k-list .r:last-child{border-bottom:0}
.k-list .r b{font-weight:500}
.k-list .r span{color:var(--paper-2);font-size:12px;grid-column:1}
.k-list .r em{grid-row:1 / span 2;grid-column:2;align-self:center;font-style:normal;font-size:11px;color:var(--paper-2)}
.preview{border-radius:14px;box-shadow:0 0 0 1px rgba(0,122,255,.45);background:rgba(0,122,255,.07);padding:12px;display:flex;flex-direction:column;gap:10px}
.preview .ph{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px}
.preview .ph b{font-weight:600}
.preview ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:12.3px;color:var(--paper-2)}
.preview li{display:flex;gap:8px;align-items:baseline}
.preview li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--blue);flex:none;transform:translateY(-2px)}
.preview .acts{display:flex;gap:8px;justify-content:flex-end}
.preview .ui-btn{background:var(--surface-d2);color:var(--paper)}
.preview .ui-btn.primary{background:var(--blue);color:#fff}
.typing{display:inline-flex;gap:4px;padding:10px 12px;border-radius:12px;background:var(--surface-d2);align-self:flex-start}
.typing i{width:5px;height:5px;border-radius:50%;background:var(--paper-2);animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}
.micro-3{display:flex;flex-direction:column;font-size:var(--fs-h3);line-height:1.3;letter-spacing:-.018em}
.micro-3 span:last-child{color:var(--blue)}
.replay{align-self:flex-start;border:0;background:none;color:var(--paper-2);font-family:var(--f-ui);font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:4px 0}
.replay:hover{color:var(--paper)}
.guard{font-size:var(--fs-small);color:var(--paper-2);display:flex;gap:10px;align-items:baseline;max-width:52ch}
.guard::before{content:"";width:14px;height:1px;background:var(--paper-3);flex:none;transform:translateY(-4px)}
.auto{margin-top:var(--space-section);padding-top:var(--space-inner);border-top:1px solid var(--line-d)}
.auto-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:end}
@media (max-width:900px){.auto-head{grid-template-columns:minmax(0,1fr)}}
.events{display:flex;flex-direction:column;color:var(--paper-2);font-size:1.02rem;line-height:1.6}
.flow{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin:var(--space-head) 0 0;font-family:var(--f-ui)}
.node{position:relative;display:flex;flex-direction:column;gap:10px;padding:0}
.node .k{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-3)}
.node .card{position:relative;z-index:1;background:var(--surface-d);border-radius:14px;box-shadow:0 0 0 1px var(--line-d);padding:14px;display:flex;flex-direction:column;gap:6px;flex:1;min-height:104px;transition:box-shadow .4s,background .4s}
.node .card b{font-weight:500;font-size:13.2px;color:var(--paper)}
.node .card span{font-size:12px;color:var(--paper-2);line-height:1.4}
.node.is-on .card{box-shadow:0 0 0 1px var(--blue),0 0 0 6px rgba(0,122,255,.12);background:#2B2F37}
.node .k i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--paper-3);margin-right:8px;transform:translateY(-1px);transition:background .3s}
.node.is-on .k i,.node.is-done .k i{background:var(--blue)}
.node:not(:last-child)::after{content:"";position:absolute;z-index:0;top:calc(50% + 13px);right:-18px;width:18px;height:1px;background:var(--paper-3)}
.flow-log{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:24px;font-family:var(--f-ui);font-size:12px;color:var(--paper-2)}
.flow-log .dot{background:var(--ok)}
.flow-foot{margin-top:var(--space-sub);font-size:var(--fs-h3);letter-spacing:-.018em}
@media (max-width:900px){.flow{grid-template-columns:minmax(0,1fr);gap:14px}.node{padding:0 0 0 22px}.node .card{min-height:0}.node:not(:last-child)::after{top:auto;bottom:-14px;left:3px;right:auto;width:1px;height:14px}.node::before{content:"";position:absolute;left:3px;top:0;bottom:0;width:1px;background:var(--line-d)}}
.bridge{display:grid;grid-template-columns:minmax(0,1.15fr) 120px minmax(0,.9fr);align-items:start;gap:0;margin-top:var(--space-head)}
.bridge .pass{align-self:center}
.bridge .office .ui{background:var(--surface-d);color:var(--paper);box-shadow:0 0 0 1px var(--line-d)}
.bridge .office .ui-head{border-color:var(--line-d)}
.bridge .office .ui-row{border-color:var(--line-d)}
.bridge .office .ui-meta,.bridge .office .what{color:var(--paper-2)}
.bridge .office .meta{color:var(--paper-3)}
.bridge .office .chip{background:var(--surface-d2);color:var(--paper)}
.bridge .office .chip.ok{background:rgba(52,199,89,.16);color:#7EE29A}
.bridge .office .chip.blue{background:rgba(0,122,255,.2);color:#8CC2FF}
.bridge .side{margin-bottom:14px}
.bridge .pass{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--paper-3)}
.bridge .pass .line{position:relative;width:72%;height:1px;background:var(--line-d);overflow:hidden}
.bridge .pass .line::after{content:"";position:absolute;inset:0;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
.bridge .pass .lbl{transition:color .4s}
.client-card{background:var(--paper);color:var(--ink);border-radius:26px;padding:14px 12px 16px;font-family:var(--f-ui);font-size:12.8px;box-shadow:0 30px 70px -30px rgba(0,0,0,.6);max-width:300px;transition:transform .8s var(--ease),opacity .8s var(--ease)}
.client-card .notch{width:64px;height:5px;border-radius:9px;background:var(--line-2);margin:0 auto 12px}
.client-card .p-head{display:flex;justify-content:space-between;align-items:center;padding:0 4px 10px}
.client-card .p-head b{font-weight:600}
.client-card .item{background:var(--white);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px;box-shadow:0 0 0 1px var(--line)}
.client-card .item + .item{margin-top:8px}
.client-card .k{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#0060C9;font-weight:600}
.client-card .big{font-weight:600;font-size:18px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.client-card .ui-btn{width:100%;height:34px}
.office .row-proc .chip{transition:all .4s}
[data-bridge] .stage-proc,[data-bridge] .stage-pub{transition:opacity .5s}
[data-bridge][data-step="0"] .row-proc .chip.s-done{display:none}
[data-bridge]:not([data-step="0"]) .row-proc .chip.s-wait{display:none}
[data-bridge][data-step="0"] .pass .l1,[data-bridge][data-step="1"] .pass .l2,[data-bridge][data-step="0"] .pass .l2{color:var(--paper-3)}
[data-bridge][data-step="1"] .pass .l1,[data-bridge][data-step="2"] .pass .lbl,[data-bridge][data-step="3"] .pass .lbl{color:var(--paper)}
[data-bridge][data-step="2"] .pass .line::after,[data-bridge][data-step="3"] .pass .line::after{transform:none}
[data-bridge][data-step="0"] .client-card,[data-bridge][data-step="1"] .client-card,[data-bridge][data-step="2"] .client-card{opacity:.18;transform:translateY(14px)}
[data-bridge][data-step="0"] .row-pub .chip.s-done,[data-bridge][data-step="1"] .row-pub .chip.s-done{display:none}
[data-bridge][data-step="2"] .row-pub .chip.s-wait,[data-bridge][data-step="3"] .row-pub .chip.s-wait{display:none}
.bridge-caption{display:grid;grid-template-columns:minmax(0,1.15fr) 120px minmax(0,.9fr);margin-top:22px;font-size:var(--fs-small);color:var(--paper-2)}
.bridge-caption p:last-child{grid-column:3}
@media (max-width:900px){.bridge,.bridge-caption{grid-template-columns:minmax(0,1fr)}.bridge .pass{flex-direction:row;height:auto;padding:22px 0;justify-content:flex-start;gap:14px}.bridge .pass .line{width:40px}.bridge-caption p:last-child{grid-column:auto;margin-top:6px}.client-card{max-width:340px}}
.mc-wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:clamp(40px,6vw,96px);align-items:start}
@media (max-width:980px){.mc-wrap{grid-template-columns:minmax(0,1fr)}}
.ifs{display:flex;flex-direction:column;border-top:1px solid var(--line-2)}
.ifs div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:18px;padding:16px 0;border-bottom:1px solid var(--line)}
.ifs dt{color:var(--ink-2);font-size:var(--fs-small);padding-top:2px}
.ifs dd{margin:0;font-size:1.02rem;line-height:1.45;letter-spacing:-.01em}
.ifs dl{margin:0}
@media (max-width:480px){.ifs div{grid-template-columns:minmax(0,1fr);gap:4px}}
.portal{display:grid;grid-template-columns:210px minmax(0,1fr);overflow:hidden;min-height:520px}
.portal-nav{background:var(--paper);border-right:1px solid var(--line);padding:22px 12px;display:flex;flex-direction:column;gap:14px}
.portal-nav .who{padding:0 10px;display:flex;flex-direction:column;gap:2px}
.portal-nav .who b{font-size:13.5px;font-weight:600}
.portal-nav .who span{font-size:11.5px;color:var(--ink-2)}
.portal-nav [role="tablist"]{display:flex;flex-direction:column;gap:1px}
.portal-nav .tab{height:32px;font-size:12.6px}
.portal-nav .tab .badge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--blue);color:#fff;font-size:10.5px;font-weight:600;display:grid;place-items:center}
.portal-main{padding:22px 24px 24px;display:flex;flex-direction:column;gap:14px;min-width:0}
.portal-main h4{font-family:var(--f-ui);font-size:16px;font-weight:600;letter-spacing:-.012em}
.portal-main .intro{color:var(--ink-2);font-size:12.6px;margin-top:-8px}
.p-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:center;padding:14px;border-radius:14px;background:var(--paper)}
.p-item .k{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#0060C9;font-weight:600;grid-column:1}
.p-item .t{font-weight:500;font-size:13.4px;grid-column:1}
.p-item .m{color:var(--ink-2);font-size:12px;grid-column:1}
.p-item .a{grid-column:2;grid-row:1 / span 3}
.p-steps{display:flex;gap:4px;margin-top:6px;grid-column:1}
.p-steps i{width:28px;height:4px;border-radius:9px;background:var(--line-2)}
.p-steps i.on{background:var(--blue)}
.portal-note{font-size:var(--fs-small);color:var(--ink-2);margin-top:18px;max-width:60ch}
@media (max-width:760px){.portal{grid-template-columns:minmax(0,1fr);min-height:0}.portal-nav{border-right:0;border-bottom:1px solid var(--line)}.portal-nav [role="tablist"]{flex-direction:row;overflow-x:auto;scrollbar-width:none;margin-inline:-10px;padding-inline:10px;gap:4px}.portal-nav [role="tablist"]::-webkit-scrollbar{display:none}.portal-nav .tab{flex:none}.portal-main{padding:16px}}
@media (max-width:420px){.p-item{grid-template-columns:minmax(0,1fr)}.p-item .a{grid-column:1;grid-row:auto;margin-top:8px}}
.erp-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:end;margin-bottom:var(--space-head)}
@media (max-width:900px){.erp-head{grid-template-columns:minmax(0,1fr)}}
.word-run{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:var(--fs-h3);letter-spacing:-.018em;line-height:1.35;color:var(--ink-2)}
.word-run span{color:var(--ink)}
.scope{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;margin-bottom:16px;font-size:var(--fs-small);color:var(--ink-2)}
.erp{overflow:hidden}
.erp-bar{display:flex;align-items:center;gap:14px;padding:12px 24px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.erp-bar .co{display:flex;align-items:center;gap:10px;font-weight:600;font-size:13.5px;margin-right:auto}
.erp-bar .co i{width:26px;height:26px;border-radius:8px;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:600}
.erp-tabs{display:flex;gap:2px;padding:3px;background:var(--paper);border-radius:10px;overflow-x:auto;scrollbar-width:none;max-width:100%}
.erp-tabs::-webkit-scrollbar{display:none}
.erp-tabs .tab{height:30px;padding:0 12px;flex:none;font-size:12.4px}
.erp-tabs .tab[aria-selected="true"]{box-shadow:0 0 0 1px var(--line)}
.erp-main{padding:22px 24px 24px;min-height:380px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:22px}
.erp-main .col{display:flex;flex-direction:column;gap:12px}
.erp-main h4{font-family:var(--f-ui);font-size:15px;font-weight:600}
.big-num{font-family:var(--f-ui);font-weight:600;font-size:30px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.list{display:flex;flex-direction:column;border-radius:12px;box-shadow:0 0 0 1px var(--line)}
.list .ui-row{padding:10px 14px}
.num{font-variant-numeric:tabular-nums;font-weight:500}
.chart{width:100%;height:auto;display:block}
.chart text{font-family:var(--f-ui);font-size:10.5px;fill:var(--ink-2)}
.legend{display:flex;gap:16px;font-size:11.5px;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:9px;height:9px;border-radius:3px;background:var(--ink)}
.legend i.b{background:var(--neutral)}
.illus{font-size:11px;color:var(--ink-3)}
@media (max-width:760px){.erp-main{grid-template-columns:minmax(0,1fr);padding:16px;min-height:0}}
.consult{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);margin-top:var(--space-inner);padding-top:var(--space-sub);border-top:1px solid var(--line-2)}
@media (max-width:900px){.consult{grid-template-columns:minmax(0,1fr)}}
.impact{display:flex;flex-direction:column;font-size:var(--fs-h3);letter-spacing:-.018em;line-height:1.3;margin-top:var(--space-sub)}
.impact span:last-child{color:var(--blue)}
.wl{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);gap:clamp(40px,6vw,104px);align-items:center}
@media (max-width:980px){.wl{grid-template-columns:minmax(0,1fr)}}
.wl-name{display:flex;flex-direction:column;gap:4px}
.wl-name b{font-weight:500;font-size:1.15rem;letter-spacing:-.01em}
.wl-name span{color:var(--ink-2);font-size:var(--fs-small)}
.wl-demo{position:relative;--acc:var(--blue);--acc-ink:#fff;--acc-wash:var(--blue-wash);--acc-text:#0060C9}
.wl-demo[data-brand="office"]{--acc:#1F6B57;--acc-ink:#fff;--acc-wash:rgba(31,107,87,.10);--acc-text:#1F6B57}
.browser{overflow:hidden}
.browser .url{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--paper)}
.browser .url .dots{display:flex;gap:6px}
.browser .url .dots i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.browser .url .addr{flex:1;min-width:0;height:28px;border-radius:8px;background:var(--white);display:flex;align-items:center;gap:8px;padding:0 10px;font-size:12px;color:var(--ink-2);box-shadow:0 0 0 1px var(--line);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.browser .url .addr svg{width:12px;height:12px;flex:none}
.wl-app{display:grid;grid-template-columns:200px minmax(0,1fr);min-height:360px}
.wl-side{background:var(--paper);border-right:1px solid var(--line);padding:18px 14px;display:flex;flex-direction:column;gap:18px}
.wl-logo{height:44px;display:flex;align-items:center;gap:10px;position:relative}
.office-mark{display:flex;align-items:center;gap:10px;position:absolute;inset:0;opacity:0;transition:opacity .45s}
.office-mark i{width:34px;height:34px;border-radius:10px;background:var(--acc);display:grid;place-items:center}
.office-mark i svg{width:18px;height:18px}
.office-mark b{font-family:var(--f-ui);font-weight:600;font-size:13px;line-height:1.15;color:var(--ink)}
.wl-demo[data-brand="office"] .office-mark{opacity:1}
.wl-nav{display:flex;flex-direction:column;gap:2px;font-family:var(--f-ui);font-size:12.6px}
.wl-nav span{height:32px;display:flex;align-items:center;padding:0 10px;border-radius:9px;color:var(--ink-2)}
.wl-nav span.on{background:var(--acc);color:var(--acc-ink);font-weight:500;transition:background .45s}
.wl-main{padding:22px;display:flex;flex-direction:column;gap:14px;font-family:var(--f-ui);min-width:0}
.wl-main .hello{font-size:16px;font-weight:600;letter-spacing:-.012em}
.wl-main .p-item .k{color:var(--acc-text);transition:color .45s}
.wl-main .ui-btn.primary{background:var(--acc);transition:background .45s}
.wl-toggle{display:flex;align-items:center;gap:14px;margin-top:18px;flex-wrap:wrap}
.wl-toggle .seg button{height:32px;padding:0 14px;font-size:12.5px}
.wl-toggle small{color:var(--ink-3);font-size:12px}
@media (max-width:640px){.wl-app{grid-template-columns:minmax(0,1fr);min-height:0}.wl-side{border-right:0;border-bottom:1px solid var(--line);flex-direction:row;align-items:center;justify-content:space-between}.wl-nav{display:none}}
.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:var(--space-head);border-top:1px solid var(--line-2)}
.way{display:flex;flex-direction:column;gap:18px;padding:32px clamp(20px,3vw,40px) 8px 0}
.way + .way{padding-left:clamp(20px,3vw,40px);border-left:1px solid var(--line)}
.way h3{font-size:clamp(1.6rem,1.3rem + 1vw,2.2rem);letter-spacing:-.025em;line-height:1.1}
.way .sub{font-size:var(--fs-label);letter-spacing:.09em;text-transform:uppercase;color:var(--blue);font-weight:500;margin-top:-8px}
.way p{color:var(--ink-2);max-width:34ch;flex:1}
.way .link{align-self:flex-start;margin-top:6px}
@media (max-width:900px){.ways{grid-template-columns:minmax(0,1fr)}.way,.way + .way{padding:28px 0;border-left:0}.way + .way{border-top:1px solid var(--line)}}
.human{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:end}
@media (max-width:900px){.human{grid-template-columns:minmax(0,1fr)}}
.final{padding-block:clamp(96px,10vw,176px)}
.final-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:end}
@media (max-width:900px){.final-grid{grid-template-columns:minmax(0,1fr)}}
.signature{display:flex;align-items:center;gap:18px;margin-top:var(--space-inner);padding-top:28px;border-top:1px solid var(--line-2)}
.signature span{font-size:1.1rem;letter-spacing:-.01em}
#marca-propria .wl-name b{color:var(--paper)}
#marca-propria .seg{background:rgba(245,245,247,.08)}
#marca-propria .seg button{color:var(--paper-2)}
#marca-propria .seg button[aria-pressed="true"]{background:var(--paper);color:var(--ink);box-shadow:none}
#marca-propria .wl-toggle small{color:var(--paper-3)}
#marca-propria .ui{box-shadow:0 40px 90px -40px rgba(0,0,0,.7)}
.ui-btn,.ui .chip,.client-card .ui-btn,.preview .ui-btn{pointer-events:none;user-select:none;cursor:default}
.wl-toggle .explore{margin:0}
.demo-tag + .flow{margin-top:18px}
#marca-propria .seg button[aria-pressed="false"]:hover{color:var(--paper);background:rgba(245,245,247,.1)}
.replay{border:0;background:rgba(245,245,247,.08);color:var(--paper);padding:0 14px;height:34px;border-radius:999px;font-size:12.5px;transition:background .2s}
.replay:hover{background:rgba(245,245,247,.16);color:#fff}
.wl-demo.is-morphing .browser{animation:morph .7s var(--ease)}
@keyframes morph{0%{transform:scale(1)}40%{transform:scale(.985)}100%{transform:scale(1)}}
@media (max-width:760px){.c360 .tab,.portal-nav .tab{height:40px}.erp-tabs .tab{height:38px}}
.kyra .replay{align-self:flex-start}
.photo .ph-grain{position:absolute;inset:0;background:
  radial-gradient(120% 80% at 30% 20%, rgba(255,255,255,.55), transparent 60%),
  radial-gradient(90% 70% at 85% 90%, rgba(29,29,31,.10), transparent 60%)}
.photo .ph-tag svg{width:13px;height:13px}
.auto .demo-tag{margin:var(--space-head) 0 0}
@media (min-width:901px) and (max-width:1180px){.phone{width:min(48%,268px)}}

/* ================= MOBILE editorial (≤720) — composição de smartphone. Desktop/tablet (≥721) intocados. =================
   Padrão: wrappers viram display:contents e cada peça ganha `order` + margem própria → copy essencial → visual → apoio. */
@media (max-width:720px){
  /* Hero: H1 + lead + CTAs → produto → frase de apoio */
  .hero-grid{display:flex;flex-direction:column;gap:0;align-items:stretch}
  .hero-copy{display:contents}
  .hero-copy > *{margin:0}
  .hero .for-who{order:1;align-self:flex-start}
  .hero .h1{order:2;margin-top:20px}
  .hero-copy .lead{order:3;margin-top:20px}
  .hero .btn-row{order:4;margin-top:28px}
  .hero-stage{order:5;margin-top:44px;max-width:none}
  .hero-copy .sub{order:6;margin-top:32px}
  .phone{width:90%}

  /* Rotina: palavras soltas → informação conectada (motion) → explicação */
  #plataforma .split{display:flex;flex-direction:column;gap:0;align-items:stretch}
  #plataforma .split > .stack-l,#plataforma .split > .stack-l > div{display:contents}
  #h-rotina{order:1}
  #plataforma .scattered-words{order:2;margin-top:24px}
  #plataforma .scatter{order:3;margin-top:36px}
  #plataforma .split .body{order:4}
  #plataforma .split .body:first-child{margin-top:20px}

  /* Operação: 1º parágrafo → Cliente 360 → complemento */
  #operacao .wrap{display:flex;flex-direction:column}
  #operacao .op-head,#operacao .op-head > div:last-child{display:contents}
  #operacao .op-head .stack-m{order:1}
  #operacao .op-head .body:nth-child(1){order:2;margin-top:20px}
  #operacao .explore{order:3;margin-top:28px;align-self:flex-start}
  #operacao .c360{order:4}
  #operacao .op-head .body:nth-child(n+2){order:5}
  #operacao .op-head .body:nth-child(2){margin-top:28px}
  #operacao .op-foot{order:6}

  /* Atendimento: as duas situações → conversa (uma coluna, contexto abaixo) → o que a AGGU conecta */
  #atendimento .att-grid{display:flex;flex-direction:column;gap:0;align-items:stretch}
  #atendimento .att-grid > .stack-l,#atendimento .att-grid > .stack-l > div:nth-child(2){display:contents}
  #atendimento .att-grid .stack-m{order:1}
  #atendimento .att-grid .body:nth-child(1){order:2;margin-top:24px}
  #atendimento .att-grid .body:nth-child(2){order:3}
  #atendimento .att-grid > .stack-s{order:4;margin-top:32px}
  #atendimento .att-grid .body:nth-child(3){order:5;margin-top:32px}
  #atendimento .inline-points{order:6;margin-top:24px}
  .msg{max-width:90%}
  .seg-att{align-self:stretch;width:100%}
  .seg-att button{flex:1;height:44px}

  /* Kyra: frase central → demonstração → capacidades, impacto e governança */
  #ia .ia-grid{display:flex;flex-direction:column;gap:0;align-items:stretch}
  #ia .ia-grid > .stack-l,#ia .ia-grid > .stack-l > div:nth-child(2){display:contents}
  #ia .ia-grid .stack-m{order:1}
  #ia .ia-grid .body:nth-child(1){order:2;margin-top:24px}
  #ia .ia-grid .body:nth-child(3){order:3}
  #ia .kyra{order:4;margin-top:32px}
  #ia .ia-grid .body:nth-child(2){order:5;margin-top:32px}
  #ia .micro-3{order:6;margin-top:28px}
  #ia .guard{order:7;margin-top:24px}
  .k-user{max-width:90%}
  .kyra-head{padding:12px 16px}
  .kyra-body{padding:16px}

  /* Automação: gatilhos → fluxo vertical → o que a AGGU executa */
  .auto{display:flex;flex-direction:column}
  .auto-head,.auto-head > .stack-m{display:contents}
  #h-auto{order:1}
  .auto-head .stack-m > .body:first-child{order:2;margin-top:20px}
  .auto .events{order:3;margin-top:16px}
  .auto .demo-tag{order:4;margin-top:32px;align-self:flex-start}
  .auto .flow{order:5}
  .auto .flow-log{order:6;margin-top:20px}
  .auto-head .stack-m > .body:last-child{order:7;margin-top:28px}
  .auto .flow-foot{order:8}

  /* Ponte escritório → cliente: totalmente vertical (processa ↓ publica), telefone ~90% */
  .bridge .pass{flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18px 0}
  .bridge .pass .line{width:1px;height:36px}
  .bridge .pass .line::after{transform:scaleY(0);transform-origin:top}
  [data-bridge][data-step="2"] .pass .line::after,[data-bridge][data-step="3"] .pass .line::after{transform:none}
  .client-card{max-width:none;width:90%;margin-inline:auto}

  /* Minha Contabilidade: "Precisa de você" antes da lista de situações */
  #minha-contabilidade .mc-wrap{display:flex;flex-direction:column;gap:0;align-items:stretch}
  #minha-contabilidade .mc-wrap > .stack-l,#minha-contabilidade .mc-wrap > div:last-child{display:contents}
  #minha-contabilidade .mc-wrap .stack-m{order:1}
  #minha-contabilidade .mc-wrap > .stack-l > .body{order:2;margin-top:20px}
  #minha-contabilidade .explore{order:3;margin-top:28px;align-self:flex-start}
  #minha-contabilidade .portal{order:4}
  #minha-contabilidade .ifs{order:5;margin-top:36px}
  #minha-contabilidade .portal-note{order:6;margin-top:20px}

  /* Marca Própria: 1 parágrafo → troca de marca → complemento → CTA */
  #marca-propria .wl{display:flex;flex-direction:column;gap:0;align-items:stretch}
  #marca-propria .wl > .stack-l,#marca-propria .wl > .stack-l > div:nth-child(2){display:contents}
  #marca-propria .wl .stack-m{order:1}
  #marca-propria .wl .body:first-child{order:2;margin-top:20px}
  #marca-propria .wl-demo{order:3;margin-top:32px}
  #marca-propria .wl .body:last-child{order:4;margin-top:32px}
  #marca-propria .wl .btn-row{order:5;margin-top:24px}
  .wl-toggle{margin-top:16px;gap:10px 14px}
  .wl-toggle .seg button{height:44px;padding:0 18px}

  /* Toque: abas dos mockups e replay ≥ 44px (a regra .replay desta página vem depois do mobile.css global) */
  .c360 .tab,.portal-nav .tab,.erp-tabs .tab{height:44px}
  .replay{height:44px;padding:0 16px;font-size:13px}
}