/* ========================================================================= AKROS — A JORNADA (secao 6 · Implantacao) A peca nasceu como pagina solta (akros-jornada.html) e foi trazida para dentro da secao. Nada do desenho dela mudou de lugar; o que mudou foi o ENDERECO: todo seletor daqui esta preso a #journey, que e' a raiz da peca. Sem isso, os `.card` e `.avatar` dela pintariam o site inteiro. `:root` e `body` da pagina solta viraram #journey: e' nele que moram as variaveis e o fundo. ========================================================================= */ /* ========================================================================= O FIREWALL Quatorze nomes de classe existem dos dois lados: .card, .avatar, .field, .phone, .stage, .visual, .hero, .kpi, .live, .brand, .thread, .typing, .wordmark e .instant. Todo o CSS abaixo esta sob #journey e por isso ganha do site por especificidade — mas so nas propriedades que ele DECLARA. Uma sombra ou um raio que o site declare e a jornada nao, vazaria. `all:revert` fecha essa fresta: nestes elementos, tudo o que veio de folha de autor volta ao valor do navegador. As regras da jornada vem depois, com a mesma especificidade, e tornam a valer. ========================================================================= */ #journey .avatar,#journey .brand,#journey .card,#journey .field,#journey .hero,#journey .instant,#journey .kpi,#journey .live,#journey .phone,#journey .stage,#journey .thread,#journey .typing,#journey .visual,#journey .wordmark{all:revert} #journey{--stage-bg:#0B3B2E;--cream:#F5F3E8;--mint:#A7EBB0;--ruby:#DC2626;--app:#E8EBF0;--bar:#F0F2F5;--card:#FFF;--well:#F4F6F9;--deep:#F1F3F6;--border:#CDD3DB;--border-2:#DDE2E8;--border-3:#E6EAEF;--ink:#54565E;--body:#5F616A;--muted:#6B6D77;--label:#737581;--faint:#A9ABB3;--green:#059669;--amber:#D97706;--blue:#2563EB;--ease:cubic-bezier(.22,.61,.36,1)}#journey,#journey *{box-sizing:border-box}#journey{margin:0;background:var(--stage-bg);color:var(--cream);font-family:"Segoe UI",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}#journey button{font:inherit}#journey button:focus-visible{outline:2px solid var(--mint);outline-offset:6px}#journey button{touch-action:manipulation}#journey svg{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:middle}#journey button svg{pointer-events:none}#journey p,#journey .titulo-jornada,#journey h2,#journey h3{margin:0}#journey{width:100%;max-width:1920px;min-height:100svh;margin:auto;padding:30px clamp(24px,3.5vw,68px) 24px;overflow:hidden}#journey .masthead{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff24;padding-bottom:23px}#journey .brand{display:flex;align-items:center;gap:10px}#journey .brand-symbol{width:30px;height:34px;stroke-width:1.3}#journey .wordmark{font-family:Georgia,serif;font-size:25px;letter-spacing:.035em}#journey .byline{font-size:8px;letter-spacing:.19em;color:#ffffff88;margin-top:3px}#journey .edition{font-size:11px;letter-spacing:.16em;color:#c4d8cc;text-transform:uppercase}#journey .edition i{display:inline-block;width:6px;height:6px;background:var(--mint);border-radius:50%;margin-right:10px}#journey .hero{display:grid;grid-template-columns:minmax(245px,.29fr) minmax(0,1fr);gap:clamp(26px,3vw,62px);align-items:center;min-height:min(760px,calc(100svh - 140px));padding:48px 0 34px}#journey .intro{align-self:center;padding-bottom:8px}#journey .eyebrow{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mint);margin-bottom:18px}#journey .titulo-jornada{font-size:clamp(36px,3.05vw,58px);letter-spacing:-.05em;line-height:1.04;font-weight:500}#journey .titulo-jornada span{display:block}#journey .subhead{font-family:Georgia,serif;font-style:italic;font-size:clamp(16px,1.35vw,24px);color:#d1ded1;margin-top:16px;line-height:1.3}#journey .steps{list-style:none;margin:34px 0 0;padding:0 0 0 20px;position:relative}#journey .steps:before,#journey .route-fill{position:absolute;left:0;top:4px;bottom:8px;width:2px;background:#ffffff24;content:""}#journey .route-fill{background:linear-gradient(var(--mint),#53bf82);transform-origin:top;transform:scaleY(0)}#journey .step{display:grid;grid-template-columns:28px 1fr;gap:9px;width:100%;text-align:left;border:0;background:none;padding:11px 0;color:#b7c9bd;cursor:pointer}#journey .step:hover{color:#fff}#journey .step-number{font-size:11px;letter-spacing:.1em;font-variant-numeric:tabular-nums;color:#ffffff57;padding-top:4px}#journey .step-title{font-size:clamp(18px,1.42vw,26px);font-weight:500;letter-spacing:-.025em}#journey .step-description{display:block;font-size:13px;line-height:1.65;font-weight:400;color:#c5d6c9;height:0;overflow:hidden;opacity:0}#journey .step-description .description-content{display:block;padding-top:9px;padding-bottom:3px}#journey .step[aria-current="step"] .step-title{color:var(--cream)}#journey .step[aria-current="step"] .step-number{color:var(--mint)}#journey .step[aria-current="step"] .step-description{height:var(--description-height);opacity:1}#journey .keyword{font-style:normal;font-weight:500;position:relative;white-space:nowrap}#journey .keyword:after{content:attr(data-word);position:absolute;inset:0;color:var(--mint);font:inherit;white-space:nowrap;clip-path:inset(0 100% 0 0)}#journey .step[aria-current="step"] .keyword:after{animation:reveal-word .55s .34s both}@keyframes reveal-word{to{clip-path:inset(0 0 0 0)}}#journey .controls{display:flex;align-items:center;gap:14px;margin-top:28px;color:#c7d9ce}#journey .control{border:1px solid #ffffff38;background:none;color:var(--cream);border-radius:50%;width:38px;height:38px;display:grid;place-items:center;cursor:pointer}#journey .control:hover{background:#ffffff0c}#journey .control[disabled]{opacity:.4;cursor:default}#journey .time{font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:.04em}#journey .time span{color:#ffffff61}#journey .controls-note{font-size:10px;color:#b7ccbf;margin-top:9px}#journey .visual{min-width:0}#journey .scene-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 6px 12px;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#b4cabe}#journey .scene-heading b{color:var(--mint);font-weight:500}#journey .scene-heading .live{display:flex;align-items:center;gap:7px}#journey .live:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--mint)} /* A perspectiva pertence ao invólucro. O palco interno preserva a profundidade; contenção de tamanho no mesmo nó destruiria esse espaço. Não usamos cqw/cqh: as interfaces têm dimensões de projeto fixas e escalam como um único objeto. */#journey .stage-box{position:relative;aspect-ratio:1.65;perspective:1750px;perspective-origin:50% 44%;isolation:isolate}#journey .stage{position:absolute;inset:0;display:flex;align-items:flex-end;gap:2%;transform-style:preserve-3d;padding:3% 0 4%;transform-origin:50% 70%}#journey .phone{position:relative;flex:0 0 23%;aspect-ratio:300/606;transform:rotateY(8deg);transform-origin:50% 100%;border-radius:13% / 6.5%;background:linear-gradient(110deg,#9da49f,#25332c 18%,#172b23 80%,#acb8ae);padding:5px;box-shadow:0 28px 26px -22px #001d19c9,0 0 0 1px #95a99d66;will-change:transform}#journey .phone:before{content:"";position:absolute;width:3px;height:11%;background:#7a8f82;left:-2px;top:25%;border-radius:3px}#journey .phone-screen{position:absolute;inset:6px;overflow:hidden;border-radius:11.5% / 5.6%;background:#f9faf6}#journey .phone-ui{position:absolute;left:0;top:0;width:300px;height:606px;transform:scale(var(--phone-scale,1));transform-origin:0 0;color:var(--ink);font-size:14px}#journey .statusbar{height:37px;padding:12px 20px 0;display:flex;justify-content:space-between;font-size:10px;font-weight:650;background:#fafbf6}#journey .statusbar .island{position:absolute;width:76px;height:19px;top:8px;left:112px;border-radius:12px;background:#15251d}#journey .statusbar .phone-status{display:flex;gap:5px;align-items:center}#journey .phone-status svg{width:13px;height:13px}#journey .gesture{position:absolute;bottom:7px;left:113px;width:74px;height:4px;border-radius:9px;background:#1e30255c;z-index:8}#journey .phone-pages{position:absolute;top:37px;bottom:0;left:0;right:0;overflow:hidden}#journey .pane{position:absolute;inset:0;visibility:hidden;background:var(--app)}#journey .pane.active{visibility:visible}#journey .phone-pane{background:#fafbf6}#journey .mini-head{height:53px;display:flex;align-items:center;gap:9px;padding:0 21px;border-bottom:1px solid #e3e9df;font-size:13px;background:#f7f9f2}#journey .mini-head strong{font-weight:600}#journey .mini-head .small-mark{color:var(--ruby);font-size:23px;font-family:Georgia,serif}#journey .phone-content{padding:28px 23px}#journey .phone-eyebrow{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#788576}#journey .phone-content h2{font-size:25px;line-height:1.15;font-weight:550;letter-spacing:-.035em;margin:11px 0 22px;color:#334f3d}#journey .shield{width:64px;height:70px;border:1px solid #dce4d7;border-radius:19px;display:grid;place-items:center;color:#9ca699;background:#f0f3e9;margin:0 0 20px}#journey .shield svg{width:35px;height:35px}#journey .shield .tick{stroke-dasharray:14;stroke-dashoffset:14}#journey .shield.connected{color:var(--green);background:#e5f4e3;border-color:#badfbc}#journey .phone-number{font-size:17px;font-weight:650;letter-spacing:-.02em}#journey .progress-track{height:4px;background:#dce5d5;border-radius:8px;overflow:hidden;margin:20px 0 13px}#journey .progress-track i{display:block;width:100%;height:100%;background:#36aa62;transform:scaleX(0);transform-origin:left}#journey .phone-state{font-size:11px;line-height:1.6;min-height:35px;color:#697c63}#journey .spinner{display:inline-block;width:8px;height:8px;flex:none;border:1.5px solid rgba(18,46,76,.16);border-top-color:var(--ruby);border-radius:50%;animation:spin .72s linear infinite;margin-right:5px}@keyframes spin{to{transform:rotate(360deg)}}#journey .phone-checks{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:14px;font-size:11px}#journey .phone-checks li{display:flex;align-items:center;gap:8px;opacity:.34}#journey .phone-checks svg{color:var(--green);width:14px}#journey .lit{opacity:1!important}#journey .training-list{display:grid;gap:10px;margin-top:2px}#journey .training-item{display:flex;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid #e0e6da;opacity:.34}#journey .training-item>svg{color:var(--green);width:20px;height:20px}#journey .training-item b{display:block;font-size:12px;font-weight:600;margin-bottom:4px}#journey .training-item small{display:block;font-size:10px;color:#76856c}#journey .training-ready{font-size:11px;line-height:1.5;color:#59774d;margin-top:11px}#journey .chat-header{height:61px;background:#075e54;color:#fff;padding:12px 14px;display:flex;align-items:center;gap:8px}#journey .chat-avatar{width:33px;height:33px;border-radius:50%;display:grid;place-items:center;background:#d3e6d6;color:#20543f;font-size:12px;font-weight:650}#journey .chat-name{font-size:12px;font-weight:600;flex:1}#journey .chat-name small{display:block;font-size:9px;color:#c8e3d2;margin-top:3px;font-weight:400}#journey .wa-seal{color:#25D366;font-size:12px}#journey .chat-pane{background:#eee9df}#journey .chat-viewport{position:absolute;top:61px;bottom:50px;left:0;right:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:12px}#journey .thread{display:flex;flex-direction:column;gap:8px;flex:none}#journey .day{align-self:center;border-radius:5px;background:#e1e9e1;color:#6c8077;font-size:9px;padding:4px 9px}#journey .chat-context{align-self:center;text-align:center;color:#7b8277;font-size:9px;line-height:1.5;max-width:205px;margin:3px 0 8px}#journey .bubble{position:relative;max-width:91%;padding:9px 10px 6px;border-radius:9px 9px 9px 0;background:#fff;color:#344838;font-size:12px;line-height:1.45;align-self:flex-start;box-shadow:0 1px 1px #18302716;overflow-wrap:break-word}#journey .bubble.out{background:#DCF8C6;border-radius:9px 9px 0 9px;align-self:flex-end}#journey .bubble .agent-stamp{display:block;font-size:8px;letter-spacing:.06em;font-weight:700;color:#527b41;margin-bottom:3px}#journey .message-time{display:flex;justify-content:flex-end;font-size:8px;color:#849281;gap:4px;margin-top:3px}#journey .receipts{color:#0A80E2;letter-spacing:-3px;margin-right:2px}#journey .typing{align-self:flex-end;background:#DCF8C6;border-radius:12px 12px 0 12px;padding:13px 15px;display:flex;gap:4px}#journey .typing[hidden]{display:none}#journey .typing i{width:4px;height:4px;border-radius:50%;background:#74986b;animation:dots .8s ease-in-out infinite}#journey .typing i:nth-child(2){animation-delay:.12s}#journey .typing i:nth-child(3){animation-delay:.24s}@keyframes dots{50%{transform:translateY(-4px)}}#journey .type-cursor{display:inline-block;width:1.4px;height:12px;background:#487943;margin-left:2px;vertical-align:-2px;animation:jr-cursor .9s steps(1) infinite}@keyframes jr-cursor{50%{opacity:0}}#journey .composer{position:absolute;bottom:0;left:0;right:0;height:50px;display:flex;gap:7px;align-items:center;padding:6px 10px 15px;background:#eee9df}#journey .composer span{background:white;border-radius:20px;flex:1;padding:8px 12px;font-size:10px;color:#87917f}#journey .composer>svg{background:#218d65;color:white;border-radius:50%;width:27px;height:27px;padding:7px}#journey .attachment{display:flex;gap:8px;align-items:center;font-size:10px}#journey .attachment svg{color:#cb514d;width:24px;height:27px}#journey .attachment strong{font-size:10px;display:block}#journey .attachment small{font-size:8px;color:#798a71;display:block;margin-top:4px}#journey .notification{position:absolute;top:12px;left:10px;right:10px;padding:14px;background:#fffffff2;border:1px solid #cddacf;border-radius:16px;box-shadow:0 10px 26px #14332735;color:#3b5044;z-index:12;transform:translateY(-155%)}#journey .notification small{display:block;font-size:8px;text-transform:uppercase;letter-spacing:.06em;color:#728675;margin-bottom:6px}#journey .notification b{display:block;font-size:12px;margin-bottom:4px}#journey .notification p{font-size:11px;line-height:1.5}#journey .phone-owner-card{margin:12px;padding:15px;border:1px solid #d3ded0;border-radius:12px;background:#f4f8ee;font-size:12px;line-height:1.6}#journey .phone-owner-card b{display:block;color:var(--green);font-size:22px;letter-spacing:-.04em;margin:8px 0}#journey .phone-owner-card small{font-size:10px;color:#6f8168}#journey .laptop{position:relative;flex:0 0 75%;transform:rotateY(-6deg);transform-origin:50% 100%;padding-bottom:3.9%;will-change:transform}#journey .laptop-lid{position:relative;width:100%;aspect-ratio:1060/690;border-radius:13px 13px 5px 5px;background:linear-gradient(125deg,#a8b2aa,#344a3b 25%,#263f32 75%,#a5b0a6);padding:7px;box-shadow:0 25px 28px -23px #001d19d9,0 0 0 1px #9bb3a480}#journey .camera{position:absolute;top:2px;left:50%;width:3px;height:3px;background:#122920;border-radius:50%}#journey .laptop-screen{position:absolute;inset:9px 7px 7px;overflow:hidden;border-radius:5px;background:var(--app)}#journey .platform{position:absolute;left:0;top:0;width:1060px;height:660px;transform:scale(var(--laptop-scale,1));transform-origin:0 0;color:var(--body);font-size:13px;background:var(--app);font-family:"Segoe UI",system-ui,sans-serif}#journey .laptop-base{position:absolute;bottom:0;left:-4%;width:108%;height:8%;background:linear-gradient(#bac6bc,#cfd7cf 30%,#7c9284 68%,#304d3b);border-radius:2px 2px 45% 45% / 2px 2px 40% 40%;box-shadow:0 24px 18px -19px #001e17cf}#journey .laptop-base:before{content:"";display:block;width:17%;height:23%;background:#81988a;box-shadow:inset 0 1px 2px #3c554488;margin:auto;border-radius:0 0 5px 5px}#journey .topbar{height:48px;background:linear-gradient(#F4F6F9,#E8EBF0);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:18px;padding:0 17px}#journey .app-brand{display:flex;align-items:center;gap:8px;width:182px;flex:none;color:var(--ruby)}#journey .app-brand>svg{width:30px;height:31px}#journey .app-brand strong{font-family:Georgia,serif;font-size:20px;font-weight:400;letter-spacing:.04em;color:var(--ink)}#journey .app-brand small{display:block;font-size:8px;letter-spacing:.1em;color:var(--label);margin-top:1px}#journey .breadcrumb{font-size:13.5px;font-weight:600;color:var(--ink);flex:1}#journey .topbar-actions{display:flex;align-items:center;gap:18px;font-size:12px}#journey .aria-badge{color:var(--ruby);display:flex;gap:5px;align-items:center}#journey .avatar{display:grid;place-items:center;border-radius:50%;background:var(--deep);border:1px solid var(--border-2);color:var(--muted);font-weight:700;flex:none;width:35px;height:35px;font-size:12px}#journey .avatar.ma{width:28px;height:28px;background:#DBEAFE;color:#2563EB;border-color:#BFDBFE;font-size:10px}#journey .rail{position:absolute;top:48px;bottom:0;left:0;width:60px;background:var(--bar);border-right:1px solid var(--border-2);padding:18px 9px;display:flex;flex-direction:column;gap:8px}#journey .rail-item{position:relative;display:grid;place-items:center;height:34px;flex:none;color:var(--muted);border-radius:4px}#journey .rail-item svg{width:18px;height:18px}#journey .rail-item.active{background:#DC26261a;color:var(--ruby)}#journey .rail-item.active:before{content:"";position:absolute;left:-9px;width:2px;height:56%;background:var(--ruby)}#journey .rail-footer{margin-top:auto;border-top:1px solid var(--border-2);padding-top:13px;color:var(--ruby);text-align:center}#journey .app-pages{position:absolute;left:60px;right:0;top:48px;bottom:0;overflow:hidden}#journey .app-pane{padding:25px 27px 18px}#journey .app-heading{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:19px;gap:18px}#journey .app-heading h2{font-size:23px;font-weight:600;letter-spacing:-.035em;color:var(--ink)}#journey .app-heading p{font-size:12px;color:var(--label);margin-top:5px}#journey .ui-btn{padding:8px 12px;border:1px solid var(--border);border-radius:5px;background:#fff;color:var(--label);font-size:11px;display:inline-flex;align-items:center;gap:6px}#journey .ui-btn.primary{background:var(--ruby);border-color:var(--ruby);color:white}#journey .tabs{display:flex;gap:25px;border-bottom:1px solid var(--border);margin:0 0 20px;font-size:12px;color:var(--label)}#journey .tabs span{padding:0 2px 12px}#journey .tabs .selected{color:var(--ruby);border-bottom:2px solid var(--ruby)}#journey .card{background:white;border:1px solid var(--border);border-radius:9px;color:var(--body)}#journey .card-pad{padding:20px}#journey .row{display:flex;align-items:center;gap:12px}#journey .between{justify-content:space-between}#journey .minor{font-size:11px;color:var(--label)}#journey .card h3{font-size:14px;font-weight:600;color:var(--ink)}#journey .channel-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:17px}#journey .channel-card{padding:22px;min-height:266px}#journey .channel-icon{width:42px;height:42px;display:grid;place-items:center;background:#25D36612;border:1px solid #25D36628;border-radius:10px;color:#20b559}#journey .channel-icon svg{width:23px;height:23px}#journey .channel-number{font-size:20px;font-weight:650;color:var(--ink);margin:23px 0 7px;letter-spacing:-.025em}#journey .chip{display:inline-flex;align-items:center;gap:4px;border-radius:5px;font-size:10px;padding:4px 7px;white-space:nowrap;font-weight:500;background:var(--deep);border:1px solid var(--border-2);color:var(--label)}#journey .chip.green{color:var(--green);background:#05966912;border-color:#05966928}#journey .chip.ruby{color:var(--ruby);background:#DC262612;border-color:#DC262628}#journey .chip.wa{color:#25b55a;background:#25D36612;border-color:#25D36628}#journey .checks{list-style:none;margin:17px 0 0;padding:0;display:grid;gap:14px;font-size:12px}#journey .checks li{display:flex;align-items:center;gap:9px;opacity:.34}#journey .checks svg{color:var(--green);width:15px;height:15px}#journey .context-cards{display:grid;gap:13px}#journey .context-card{padding:16px 18px}#journey .context-card .row{margin-bottom:8px}#journey .context-card p{font-size:12px;line-height:1.6;color:var(--label)}#journey .context-card small{font-size:11px}#journey .connection-bottom{display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px;margin-top:18px}#journey .connection-bottom .card{padding:18px}#journey .connection-bottom .metric{font-size:17px;font-weight:600;margin-top:9px}#journey .knowledge-layout{display:grid;grid-template-columns:1.4fr .85fr;gap:18px}#journey .catalog-head,#journey .catalog-row{display:grid;grid-template-columns:1fr 73px 70px;gap:10px;align-items:center}#journey .catalog-head{padding:13px 16px;background:var(--well);border-bottom:1px solid var(--border-2);font-size:10px;color:var(--label)}#journey .catalog-row{padding:13px 16px;border-bottom:1px solid var(--border-3);font-size:11px;opacity:.34}#journey .catalog-row:last-child{border-bottom:0}#journey .catalog-row b{font-size:12px;font-weight:600;display:block;margin-bottom:3px}#journey .catalog-row small{font-size:10px;color:var(--label)}#journey .knowledge-side{display:grid;align-content:start;gap:14px}#journey .knowledge-counter{font-size:32px;font-variant-numeric:tabular-nums;color:var(--green);letter-spacing:-.04em}#journey .policy{padding:17px;background:#fff;border:1px solid var(--border);border-radius:9px;opacity:.34}#journey .policy strong{font-size:31px;color:var(--ruby);display:block;letter-spacing:-.04em;margin:9px 0 4px}#journey .policy p{font-size:11px;line-height:1.5}#journey .knowledge-foot{display:flex;gap:10px;margin-top:18px}#journey .knowledge-foot .card{flex:1;padding:15px;font-size:11px;display:flex;gap:8px;align-items:center}#journey .knowledge-foot svg{color:var(--ruby)}#journey .lead-layout{display:grid;grid-template-columns:270px 1fr;gap:17px}#journey .lead-list{overflow:hidden}#journey .lead-list-head{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid var(--border-2)}#journey .lead-list-head b{font-weight:650;font-size:15px}#journey .lead-search{margin:12px;background:var(--well);border:1px solid var(--border-2);border-radius:5px;padding:9px;color:var(--label);font-size:11px;display:flex;align-items:center;gap:7px}#journey .lead-row{display:flex;gap:10px;align-items:center;padding:16px 12px;border-top:1px solid var(--border-3);position:relative}#journey .lead-row.open{background:#FEF4F4}#journey .lead-row.open:before{content:"";position:absolute;inset:0 auto 0 0;width:2px;background:var(--ruby)}#journey .lead-row .avatar{width:31px;height:31px;font-size:10px}#journey .lead-person{flex:1;min-width:0}#journey .lead-person b{font-size:12px;font-weight:600;display:block;color:var(--ink)}#journey .lead-person small{display:block;font-size:10px;margin-top:4px;color:var(--label)}#journey .lead-row-score{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}#journey .high{color:var(--green)}#journey .lead-detail{min-width:0}#journey .lead-header{padding:15px 17px;display:flex;gap:12px;align-items:center}#journey .lead-header .avatar{width:42px;height:42px;font-size:14px}#journey .lead-identity{flex:1}#journey .lead-identity h3{font-size:17px;font-weight:650;margin-bottom:5px}#journey .lead-identity p{font-size:11px;line-height:1.65;color:var(--label)}#journey .score-badge{padding:9px 19px;text-align:center;border:1px solid var(--border-2);border-radius:8px;background:#fff;min-width:86px}#journey .score-badge b{display:block;font-size:30px;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}#journey .score-badge small{font-size:9px;color:var(--label)}#journey .score-badge.high{border-color:#05966928;background:#f2faf5}#journey .score-badge.high b{color:var(--green)}#journey .stages{display:flex;gap:5px;padding:0 16px 14px;border-bottom:1px solid var(--border-3)}#journey .stage-chip{font-size:9px;padding:5px 6px;border-radius:4px;background:var(--tint);border:1px solid var(--edge);color:var(--stage-color);white-space:nowrap}#journey .stage-chip.current{background:var(--stage-color);color:white}#journey .stage-chip.done{background:#FEF4F4;border-color:#FECACA;color:var(--ruby)}#journey .lead-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 8px;padding:13px 16px;border-bottom:1px solid var(--border-3)}#journey .field small{display:block;font-size:9px;color:var(--label);margin-bottom:4px}#journey .field span{font-size:11px;color:var(--body)}#journey .field .ruby{color:var(--ruby)}#journey .field .blue{color:#4DA3FF}#journey .intention{margin:11px 16px;font-size:10px;background:var(--well);border:1px solid var(--border-2);padding:8px 10px;border-radius:5px;display:flex;align-items:center;gap:7px}#journey .intention svg{color:var(--ruby)}#journey .intention b{font-weight:600}#journey .lead-bottom{display:grid;grid-template-columns:1fr 190px;gap:13px;padding:0 16px 13px}#journey .history-title{font-size:10px;color:var(--label);margin:0 0 7px}#journey .history{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;min-height:121px}#journey .history li{display:flex;gap:7px;font-size:10px;line-height:1.35;align-items:flex-start}#journey .history li:before{content:"";width:4px;height:4px;margin-top:4px;background:var(--green);border-radius:50%;flex:none}#journey .history time{color:var(--faint);font-size:9px;flex:none}#journey .proposal{padding:12px;background:white;border:1px solid var(--border-2);border-radius:7px;align-self:start;opacity:.34}#journey .proposal>svg{width:20px;height:20px;color:var(--ruby);margin-bottom:8px}#journey .proposal h3{font-size:12px;margin-bottom:5px}#journey .proposal p{font-size:10px;line-height:1.4;color:var(--label);min-height:27px}#journey .proposal .value{font-size:25px;font-weight:650;letter-spacing:-.04em;color:var(--ink);margin:5px 0}#journey .proposal.accepted{border-color:#05966945;background:#f7fcf8}#journey .proposal.accepted .value{color:var(--green)}#journey .agenda-mini{display:flex;gap:6px;align-items:center;padding:9px 16px;border-top:1px solid var(--border-3);font-size:10px;opacity:.34;color:var(--green)}#journey .dashboard-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:18px}#journey .kpi{padding:18px 15px}#journey .kpi small{display:block;font-size:11px;color:var(--label)}#journey .kpi strong{display:block;font-size:29px;letter-spacing:-.05em;font-variant-numeric:tabular-nums;margin:11px 0 7px;color:var(--ink);white-space:nowrap}#journey .kpi:last-child strong{color:var(--green)}#journey .kpi p{font-size:10px;color:var(--green)}#journey .dashboard-main{display:grid;grid-template-columns:1.3fr 1fr;gap:17px}#journey .chart-card{padding:20px}#journey .chart{display:flex;align-items:flex-end;gap:17px;height:205px;margin-top:22px;border-bottom:1px solid var(--border-2);padding:0 8px;position:relative}#journey .chart:before{content:"";position:absolute;inset:0;border-top:1px solid var(--border-3);background:repeating-linear-gradient(0deg,transparent 0 50px,var(--border-3) 50px 51px)}#journey .bar-column{flex:1;position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end}#journey .bar-column i{display:block;width:100%;background:var(--stage-color);height:var(--bar-height);transform:scaleY(.08);transform-origin:bottom;border-radius:4px 4px 0 0}#journey .bar-column small{font-size:8px;color:var(--label);position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:8px}#journey .chart-caption{margin-top:33px;font-size:10px;color:var(--label)}#journey .dashboard-side{display:grid;gap:13px;align-content:start}#journey .hot-lead{padding:18px;opacity:.34}#journey .hot-lead .chip{margin-bottom:13px}#journey .hot-lead h3{font-size:16px;margin-bottom:7px}#journey .hot-lead p{font-size:12px;line-height:1.6}#journey .handoff{padding:16px;font-size:11px;line-height:1.7}#journey .handoff h3{margin-bottom:8px}#journey .handoff .ui-btn{margin-top:11px}#journey .dashboard-footer{margin-top:17px;display:flex;justify-content:space-between;font-size:10px;color:var(--label)} /* Filtro só nos aparelhos: filtrá-lo no palco achataria preserve-3d. Objetos em trânsito ficam em uma camada 2D irmã. Z-index dentro do palco não vence a profundidade dos aparelhos. */#journey .stage-box.spotlight .phone,#journey .stage-box.spotlight .laptop{filter:grayscale(.74) saturate(.28)}#journey .effects{position:absolute;inset:0;z-index:20;pointer-events:none;color:var(--body)}#journey .float-card{position:absolute;transform-origin:0 0;box-shadow:0 34px 60px -28px rgba(12,28,48,.55);border-radius:9px;background:white}#journey .float-card>div{width:100%;height:100%}#journey .travel-bubble{position:absolute;left:0;top:0;max-width:none;transform-origin:50% 50%;box-shadow:0 10px 27px #0524182b;font-size:12px;border:1px solid #cfded1;padding:10px 14px;white-space:normal;line-height:1.4}#journey .travel-bubble.system{font-size:11px;border-radius:8px;background:#fff;color:#395b43;white-space:nowrap}#journey .tap{position:absolute;width:66px;height:66px;background:radial-gradient(circle,rgba(37,193,104,.52),transparent 72%);border-radius:50%;transform-origin:center}#journey .confetti{position:absolute;width:7px;height:5px;border-radius:1px;will-change:transform}#journey .visual-footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #ffffff26;padding-top:16px;margin-top:17px}#journey .scene-caption{font-size:clamp(14px,1.22vw,22px);letter-spacing:-.025em;font-weight:400;color:#e0eadd}#journey .scene-caption em{font-family:Georgia,serif;font-style:italic;color:var(--mint)}#journey .cycle-note{font-size:9px;text-transform:uppercase;letter-spacing:.14em;color:#b0c5b7;white-space:nowrap;padding-top:4px}#journey .page-footer{display:flex;justify-content:space-between;gap:18px;color:#a6bfae;font-size:10px;padding-top:8px}#journey .page-footer span:last-child{color:#83a791}#journey .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}#journey.instant *,#journey.instant *:before,#journey.instant *:after{transition:none!important;animation:none!important}#journey.is-paused *,#journey.is-paused *:before,#journey.is-paused *:after{animation-play-state:paused!important}#journey.reduced .step-description{height:var(--description-height);opacity:1}#journey.reduced .step-title{color:var(--cream)}#journey.reduced .keyword:after{clip-path:none;animation:none!important}#journey.reduced .controls-note{max-width:250px}#journey.reduced .effects{display:none} /* O inline-block compartilha a mesma caixa de linha com a cópia iluminada; posicioná-la sobre um inline comum deslocaria a linha de base do texto. */#journey .keyword{display:inline-block}#journey .knowledge-foot{margin-top:12px}#journey .catalog-row{padding-block:12px}#journey .chip.wa{color:#25D366} @media(min-width:1600px){#journey .hero{gap:60px;min-height:calc(100svh - 145px)}#journey .step-description{font-size:15px}#journey .steps{margin-top:40px}#journey .step{padding:14px 0}#journey .controls{margin-top:36px}} @media(max-width:1150px) and (min-width:1025px){#journey .hero{grid-template-columns:235px 1fr;gap:22px}#journey{padding-left:25px;padding-right:25px}#journey .step-description{font-size:12px}#journey .scene-heading{font-size:8px}#journey .scene-caption{font-size:13px}#journey .cycle-note{font-size:8px}} @media(max-width:1024px){#journey{padding:22px 24px}#journey .hero{grid-template-columns:1fr;padding-top:37px;gap:30px;min-height:0}#journey .intro{max-width:650px;width:100%;margin:auto}#journey .titulo-jornada{font-size:clamp(38px,6vw,62px)}#journey .titulo-jornada span{display:inline}#journey .titulo-jornada span+span:before{content:" "}#journey .subhead{font-size:20px}#journey .steps{margin-top:24px}#journey .step-title{font-size:22px}#journey .step-description{font-size:14px}#journey .controls{margin-top:20px}#journey .visual{width:min(100%,740px);margin:auto}#journey .stage-box{aspect-ratio:auto;height:calc(var(--phone-height, 450px) + var(--laptop-height, 420px) + 70px)}#journey .stage{flex-direction:column;align-items:center;justify-content:flex-end;gap:28px;padding:18px 3% 12px}#journey .phone{width:clamp(220px,36vw,275px);flex:none;transform:rotateY(4deg)}#journey .laptop{width:100%;flex:none;padding-bottom:4%;transform:rotateY(-3deg)}#journey .visual-footer{margin-top:10px}#journey .page-footer{margin-top:12px;line-height:1.6}#journey .edition{font-size:9px}#journey .scene-caption{font-size:17px}} @media(max-width:480px){#journey{padding:20px 18px}#journey .masthead{padding-bottom:18px}#journey .brand-symbol{width:25px;height:29px}#journey .wordmark{font-size:22px}#journey .edition{font-size:8px;letter-spacing:.06em}#journey .edition i{margin-right:5px}#journey .hero{padding-top:32px}#journey .subhead{font-size:18px}#journey .step-title{font-size:21px}#journey .phone{width:230px}#journey .scene-heading{font-size:8px;gap:6px;margin-left:2px;margin-right:2px}#journey .visual-footer{gap:7px}#journey .scene-caption{font-size:15px;max-width:225px}#journey .cycle-note{font-size:8px}#journey .page-footer{font-size:9px;gap:12px}#journey .page-footer span:last-child{text-align:right;max-width:115px}} /* Direção de cena: espaço para o objeto avançar sem invadir a coluna de texto. Cada aparelho tem um único dono de transform (renderDirection), inclusive durante os voos. Animações concorrentes nesse nó faziam o foco saltar. */#journey .stage{padding:4% 2.5% 7%;gap:3%;z-index:2}#journey .phone{flex-basis:22.5%;transform-origin:50% 50%}#journey .laptop{flex-basis:70%;transform-origin:50% 50%} /* Só o palco precisa de preserve-3d. O vidro e a interface de cada aparelho são uma superfície plana que o compositor pode mover como uma textura. */#journey .lighting{position:absolute;inset:0;pointer-events:none;z-index:0}#journey .ground-shadow{position:absolute;bottom:4%;height:4.5%;background:#001c16;border-radius:50%;filter:blur(13px);opacity:.65;transform-origin:center;will-change:transform,opacity}#journey .shadow-phone{left:4%;width:21%}#journey .shadow-laptop{left:30%;width:65%}#journey .device-rim{position:absolute;inset:-1px;border-radius:inherit;border:1px solid #ddffe3;box-shadow:0 0 0 1px #deffe329,0 0 21px #b8f7ca18;opacity:0;pointer-events:none;will-change:opacity;transform:translateZ(1px)}#journey .device-shade,#journey .device-sheen{position:absolute;inset:0;pointer-events:none;z-index:15;will-change:transform,opacity}#journey .device-shade{background:#102b21;opacity:0}#journey .device-sheen{inset:-20%;opacity:0;background:linear-gradient(112deg,transparent 25%,#ffffff04 38%,#ffffff65 49%,#ffffff08 61%,transparent 73%);transform:translateX(-110%)}#journey .focus-matte{position:absolute;inset:0;background:#082d2370;opacity:0;pointer-events:none;z-index:3;border-radius:20px;will-change:opacity}#journey .scene-heading .live{color:#d9efdc;min-height:16px}#journey .scene-heading .live:before{width:6px;height:6px;box-shadow:0 0 0 4px #c7ffd511}#journey .stage-box[data-focus="phone"]~.visual-footer .scene-caption em{color:#c5f6cb}#journey .float-card{box-shadow:0 42px 66px -22px #001b18a8,0 12px 24px -10px #001b184d;backface-visibility:hidden}#journey .impact-ring{position:absolute;width:40px;height:40px;margin:-20px;border:1.5px solid #b8f9c8;border-radius:50%;pointer-events:none;will-change:transform,opacity}#journey .travel-bubble{box-shadow:0 20px 38px -13px #001e19a1,0 2px 7px #001e191f}#journey .phone{background:linear-gradient(112deg,#d0d7d4 0%,#778580 6%,#202c28 18%,#17241f 78%,#899b91 96%,#dce3dd 100%);box-shadow:0 24px 42px -24px #001813b3,inset 0 0 0 1px #e2eae277}#journey .laptop-lid{background:linear-gradient(124deg,#d6ddd9,#809087 10%,#35463c 43%,#26382d 77%,#adbbb0);box-shadow:0 27px 40px -29px #00181399,inset 0 0 0 1px #e1e9df99}#journey .laptop-base{background:linear-gradient(#d5dcd5 0%,#eef0e9 13%,#bec8bc 43%,#718273 83%,#40584a);box-shadow:0 22px 25px -19px #001b13aa}#journey .chat-viewport{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='240' viewBox='0 0 180 240'%3E%3Cg fill='none' stroke='%23939e8a' stroke-width='1' opacity='.12' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 27h22a4 4 0 0 1 4 4v13a4 4 0 0 1-4 4H28l-7 6v-6h-3a4 4 0 0 1-4-4V31a4 4 0 0 1 4-4Zm7 9h10m-10 5h6M129 15l3 7 7 3-7 3-3 7-3-7-7-3 7-3ZM73 103l5 5 12-15m-5 15 12-15M24 166l19 8-8 20-19-8ZM129 148h19v26h-19zm4 7h11m-11 5h8M87 203c-9-15-22-3-12 6l12 11 12-11c10-9-3-21-12-6Z'/%3E%3Ccircle cx='155' cy='89' r='8'/%3E%3Ccircle cx='58' cy='69' r='2'/%3E%3Ccircle cx='66' cy='157' r='2'/%3E%3C/g%3E%3C/svg%3E");background-size:180px 240px} @media(max-width:1024px){#journey .stage-box{margin-top:clamp(28px,8vw,64px)}#journey .stage{padding:18px 3% 12px;gap:28px}#journey .phone,#journey .laptop{flex-basis:auto}#journey .ground-shadow{height:2.5%;filter:blur(10px)}#journey .shadow-phone{left:27%;width:46%;bottom:auto;top:calc(var(--phone-height,450px) + 10px)}#journey .shadow-laptop{left:5%;width:90%;bottom:0}#journey .scene-heading .live{font-size:8px;letter-spacing:.065em;max-width:64%;text-align:right} } @media(prefers-reduced-motion:reduce){#journey,#journey *,#journey *:before,#journey *:after{animation:none!important;transition:none!important}#journey .effects,#journey .device-sheen,#journey .device-shade,#journey .device-rim,#journey .focus-matte{display:none}#journey .stage,#journey .phone,#journey .laptop{transform:none!important}} /* Camada de leitura: a informação essencial não depende de decifrar uma miniatura de CRM. A mesma história permanece legível fora dos aparelhos. */#journey .eyebrow{font-size:12px;letter-spacing:.13em}#journey .step-description{font-size:15px;line-height:1.65;color:#d3e2d6}#journey .step-title{font-size:22px}#journey .step-number{font-size:12px;color:#b6cbbd}#journey .controls{flex-wrap:wrap;gap:10px}#journey .control{width:44px;height:44px}#journey .controls-note{font-size:12px;line-height:1.5;color:#c6d9cc}#journey .time{font-size:12px}#journey .edition{font-size:11px}#journey .byline{font-size:9px}#journey .read-button,#journey .speed-button{border:1px solid #ffffff45;border-radius:24px;color:#e8f4e9;background:transparent;padding:10px 14px;min-height:44px;font:500 12px "Segoe UI",system-ui;cursor:pointer;text-decoration:none}#journey .read-button:hover,#journey .speed-button:hover{background:#ffffff0d}#journey .speed-button[aria-pressed="true"]{background:#d7f6d7;color:#163d28;border-color:#d7f6d7}#journey .story-example{font-size:13px;line-height:1.6;color:#c5dbcb;margin-top:15px;max-width:30ch}#journey .story-example b{font-weight:550;color:#eff4e9}#journey .scene-heading{font-size:11px;letter-spacing:.08em;margin-bottom:14px}#journey .scene-heading .live{font-size:10px;letter-spacing:.04em}#journey .reading-bridge{position:relative;z-index:25;display:grid;grid-template-columns:1.15fr 1fr;gap:26px;border-top:1px solid #ffffff30;border-bottom:1px solid #ffffff30;padding:20px 0;margin:0 0 28px;min-height:168px;background:var(--stage-bg)}#journey .reading-rows{display:contents}#journey .reading-part{min-width:0}#journey .reading-part+.reading-part{padding-left:26px;border-left:1px solid #ffffff26}#journey .reading-label{font-size:11px;line-height:1.4;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#b3d5bd;display:flex;align-items:center;gap:8px;margin-bottom:10px}#journey .reading-label svg{width:16px;height:16px}#journey .reading-quote{font-size:clamp(19px,1.6vw,27px);line-height:1.35;letter-spacing:-.025em;color:#fffdf3;max-width:40ch}#journey .reading-result{font-size:clamp(18px,1.45vw,24px);line-height:1.4;font-weight:500;letter-spacing:-.02em;color:#c2f5c8}#journey .reading-detail{font-size:13px;line-height:1.5;color:#c6dbcc;margin-top:8px}#journey .reading-progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;transform:scaleX(0);transform-origin:left;background:#b6f3bf}#journey .stage-box{aspect-ratio:1.74}#journey .stage{padding-top:5%;padding-bottom:9%}#journey .visual-footer{margin-top:18px}#journey .cycle-note{font-size:10px}#journey .page-footer{font-size:12px;line-height:1.5}#journey .hero{align-items:start;padding-top:35px}#journey .intro{align-self:center}#journey .platform{width:1060px}#journey .topbar-actions{gap:12px}#journey .app-brand{width:170px}#journey .app-heading{margin-bottom:17px}#journey .app-heading h2{font-size:26px}#journey .app-heading p{font-size:15px}#journey .app-pane{padding:20px}#journey .card h3{font-size:18px}#journey .minor{font-size:14px}#journey .ui-btn{font-size:13px}#journey .tabs{font-size:14px;gap:18px}#journey .channel-card{padding:20px}#journey .channel-number{font-size:23px;margin-top:20px}#journey .channel-grid{grid-template-columns:1.08fr 1fr}#journey .checks{font-size:15px;gap:13px}#journey .chip{font-size:12px;padding:5px 8px}#journey .context-card p,#journey .context-card small{font-size:14px}#journey .context-card h3{font-size:16px}#journey .connection-bottom{margin-top:14px;gap:12px}#journey .connection-bottom .card{padding:14px}#journey .connection-bottom .metric{font-size:18px}#journey .catalog-head{font-size:13px}#journey .catalog-row{font-size:14px;padding:16px}#journey .catalog-row b{font-size:17px}#journey .catalog-row small{font-size:13px}#journey .knowledge-layout{grid-template-columns:1.25fr 1fr}#journey .knowledge-counter{font-size:33px}#journey .policy{padding:17px}#journey .policy strong{font-size:33px}#journey .policy p{font-size:15px}#journey .knowledge-foot .card{font-size:14px;padding:13px}#journey .phone-content{padding:21px}#journey .phone-content h2{font-size:27px;margin-bottom:19px}#journey .phone-eyebrow{font-size:11px}#journey .phone-state{font-size:14px;line-height:1.5}#journey .phone-checks{font-size:14px;gap:13px}#journey .phone-number{font-size:19px}#journey .mini-head{font-size:15px}#journey .training-item{padding:11px 0}#journey .training-item b{font-size:15px}#journey .training-item small{font-size:12px}#journey .training-ready{font-size:14px}#journey .chat-name{font-size:15px}#journey .chat-name small{font-size:11px}#journey .bubble{font-size:16px;line-height:1.4;padding:11px 12px 7px;max-width:95%}#journey .bubble .agent-stamp{font-size:10px}#journey .message-time{font-size:10px}#journey .day{font-size:11px}#journey .chat-context{font-size:12px;max-width:240px}#journey .chat-viewport{justify-content:flex-end}#journey .thread{gap:10px}#journey .attachment{font-size:13px}#journey .attachment strong{font-size:13px}#journey .attachment small{font-size:11px}#journey .notification small{font-size:10px}#journey .notification b{font-size:15px}#journey .notification p{font-size:14px}#journey .phone-owner-card{font-size:15px}#journey .phone-owner-card small{font-size:12px}#journey .lead-layout{grid-template-columns:200px 1fr;gap:13px}#journey .lead-list-head b{font-size:18px}#journey .lead-search{font-size:13px}#journey .lead-row{padding:18px 12px}#journey .lead-person b{font-size:14px}#journey .lead-person small{font-size:12px}#journey .lead-row-score{font-size:15px}#journey .lead-header{padding:16px}#journey .lead-identity h3{font-size:21px}#journey .lead-identity p{font-size:13px}#journey .score-badge{min-width:78px;padding:10px 13px}#journey .score-badge small{font-size:11px}#journey .stages{flex-wrap:wrap;gap:6px}#journey .stage-chip{font-size:12px;padding:5px 8px}#journey .lead-fields{grid-template-columns:1fr 1fr;padding:12px 16px}#journey .field small{font-size:12px}#journey .field span{font-size:14px}#journey .intention{font-size:14px;padding:10px}#journey .lead-bottom{grid-template-columns:1fr 182px;gap:12px}#journey .history-title{font-size:13px}#journey .history{min-height:104px;gap:9px}#journey .history li{font-size:13px}#journey .history time{display:none}#journey .proposal{padding:13px}#journey .proposal h3{font-size:16px}#journey .proposal p{font-size:13px;min-height:32px}#journey .proposal .value{font-size:32px}#journey .proposal .minor{font-size:12px}#journey .agenda-mini{font-size:13px;padding:12px 16px;line-height:1.4}#journey .lead-detail{align-self:start}#journey .dashboard-kpis{gap:10px}#journey .kpi{padding:15px 12px}#journey .kpi small{font-size:14px}#journey .kpi strong{font-size:29px}#journey .kpi p{font-size:12px}#journey .dashboard-main{grid-template-columns:1fr 1fr}#journey .chart{height:153px;gap:13px}#journey .bar-column small{font-size:10px}#journey .chart-caption{font-size:13px}#journey .hot-lead h3{font-size:20px}#journey .hot-lead p{font-size:15px}#journey .handoff{font-size:14px}#journey .dashboard-footer{font-size:12px}#journey .chart-card{padding:17px}#journey .chip.wa{color:#138044}#journey .field .blue{color:#2563EB}#journey .lead-identity p,#journey .minor,#journey .catalog-row small{color:#686b74}#journey .story-transcript{max-width:1100px;margin:35px auto 20px;border-top:1px solid #ffffff30;padding-top:20px;color:#deebe0}#journey .story-transcript>summary{cursor:pointer;font-size:16px;min-height:44px;padding:10px 0;list-style-position:inside}#journey .transcript-body{padding:22px 0;font-size:16px;line-height:1.75}#journey .transcript-body h2{font-size:24px;font-weight:500;margin-bottom:18px}#journey .transcript-body ol{padding-left:24px}#journey .transcript-body li{margin-bottom:16px}#journey .transcript-body p{margin:12px 0}#journey .transcript-body strong{color:#c2f5c8}#journey .transcript-body dl{margin:20px 0}#journey .transcript-body dt{font-weight:600;color:#c2f5c8;margin-top:17px}#journey .transcript-body dd{margin:4px 0 0}#journey .story-transcript:focus-visible{outline:2px solid var(--mint);outline-offset:6px}#journey .inspection-note{font-size:13px;color:#c6dbcc} @media(min-width:1600px){#journey .hero{min-height:0}#journey .step-description{font-size:16px}#journey .reading-bridge{min-height:177px}#journey .story-example{font-size:14px}} @media(max-width:1150px) and (min-width:1025px){#journey .hero{grid-template-columns:215px 1fr}#journey .step-description{font-size:14px}#journey .step-title{font-size:21px}#journey .reading-bridge{gap:16px;min-height:188px}#journey .reading-part+.reading-part{padding-left:16px}#journey .reading-quote{font-size:19px}#journey .reading-result{font-size:18px}} @media(max-width:1024px){#journey .hero{gap:25px}#journey .reading-bridge{position:sticky;top:0;padding:15px 0;gap:14px;margin-bottom:28px;min-height:0;box-shadow:0 10px 14px -14px #001c16;z-index:30}#journey .reading-quote{font-size:18px}#journey .reading-result{font-size:17px}#journey .reading-detail{font-size:12px}#journey .reading-label{font-size:10px;margin-bottom:7px;letter-spacing:.06em}#journey .reading-part+.reading-part{padding-left:14px}#journey .stage-box{aspect-ratio:auto;margin-top:58px}#journey .stage{padding:18px 3% 12px}#journey .scene-heading{font-size:11px}#journey .scene-heading .live{font-size:10px;max-width:58%}#journey .page-footer{font-size:11px}#journey .step-description{font-size:15px}#journey .story-example{max-width:none}#journey .visual-footer{margin-top:24px}} @media(max-width:480px){#journey .reading-bridge{grid-template-columns:1fr;gap:12px;padding:14px 0}#journey .reading-part+.reading-part{border-left:0;border-top:1px solid #ffffff20;padding:12px 0 0}#journey .reading-quote{font-size:19px}#journey .reading-result{font-size:18px}#journey .reading-label{font-size:11px}#journey .reading-detail{font-size:13px}#journey .reading-progress{bottom:0}#journey .scene-heading .live{display:none}#journey .stage-box{margin-top:48px}#journey .phone{width:250px}#journey .page-footer{flex-direction:column;gap:8px}#journey .page-footer span:last-child{max-width:none;text-align:left}#journey .scene-caption{font-size:16px}#journey .cycle-note{display:none}} @media(prefers-reduced-motion:reduce){#journey .reading-bridge{position:relative}#journey .reading-progress{display:none}}#journey .stage-box{aspect-ratio:1.58}#journey .laptop-lid{aspect-ratio:900/670}#journey .lead-header{padding:12px 16px}#journey .lead-identity h3{font-size:20px}#journey .lead-identity p{font-size:12px}#journey .lead-fields{grid-template-columns:.8fr .8fr .85fr 1.4fr;gap:8px;padding:11px 16px}#journey .field small{font-size:11px}#journey .field span{font-size:13px}#journey .lead-bottom{padding-bottom:11px}#journey .proposal h3{font-size:14px}#journey .proposal>svg{margin-bottom:4px}#journey .proposal p{font-size:12px;min-height:28px}#journey .proposal .value{margin:3px 0;font-size:30px}#journey .history-title{margin-bottom:9px}#journey .context-cards .context-card:last-child{display:none}#journey .context-cards{align-content:start}#journey .channel-card{min-height:300px}#journey .handoff .ui-btn{display:none}#journey .handoff{line-height:1.45;padding:14px}#journey .hot-lead{padding:15px}#journey .hot-lead .chip{margin-bottom:10px}#journey .hot-lead p{font-size:14px}#journey .dashboard-main{gap:13px}#journey .dashboard-side{gap:11px}#journey .dashboard-footer{margin-top:13px}#journey .brand{flex-shrink:0}#journey .edition{text-align:right}#journey .reading-actions{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:0}#journey .reading-actions small{font-size:11px;color:#c6dbcc}#journey .reading-pause{display:inline-flex;align-items:center;gap:7px;min-height:36px;border:1px solid #ffffff45;border-radius:20px;padding:5px 12px;background:transparent;color:#eef7ed;font-size:12px;cursor:pointer}#journey .reading-bridge{row-gap:12px;min-height:195px}#journey .reading-actions .reading-pause svg{width:12px;height:12px}#journey .reading-actions button:disabled{opacity:.45}#journey .reading-progress{background:#bbf0c2} @media(max-width:1024px){#journey .stage-box{aspect-ratio:auto}#journey .reading-bridge{min-height:0}#journey .reading-actions{margin-top:0}#journey .reading-bridge{padding-bottom:10px}#journey .reading-actions small{font-size:10px}#journey .stage-box{margin-top:75px}#journey .reading-actions .reading-pause{min-height:40px}} @media(max-width:480px){#journey .edition{font-size:9px;max-width:45%;letter-spacing:.04em}#journey .byline{font-size:8px;white-space:nowrap}#journey .stage-box{margin-top:65px}#journey .reading-bridge{row-gap:10px}#journey .reading-actions small{max-width:65%;font-size:11px}#journey .reading-pause{font-size:13px}#journey .reading-quote{font-size:18px}#journey .reading-result{font-size:17px}}#journey .reading-bridge{min-height:var(--reading-height,195px);align-content:space-between}#journey .speed-button:disabled{opacity:.45;cursor:default} /* ========================================================================= ESCALA — a peça em proporções menores, e os aparelhos do site Duas correções, nesta ordem. 1 · TAMANHO. A composição pedia 1.364 px de altura numa janela de 900: o notebook saía pela borda de baixo e nunca era visto inteiro, e a legenda gritava mais alto que o título. Tudo desce um degrau — texto, camada de leitura e palco — até o cabeçalho e a cena inteira caberem na primeira tela. A grade não mudou: os mesmos blocos, nos mesmos lugares, em escala menor. 2 · OS APARELHOS. O celular e o notebook passam a usar o desenho do próprio site (css/implanta.css): titânio azul-noite no lugar do verde, moldura fina e uniforme nos quatro lados, raio da tela concêntrico ao do corpo, notch em pílula, barra de gesto e a base do notebook fechando para dentro no pé. A cena é a mesma; o hardware é o nosso. Esta camada carrega por último e governa só medida e acabamento — nenhum bloco novo, nenhuma cor de interface. ========================================================================= */ /* ------------------------------------------------------------------------- 1 · A ESCALA (só do layout de duas colunas para cima; o empilhado do celular já nasce na medida dele) ------------------------------------------------------------------------- */@media(min-width:1025px){#journey{padding:18px clamp(20px,3vw,52px) 14px}#journey .masthead{padding-bottom:13px}#journey .wordmark{font-size:21px}#journey .brand-symbol{width:26px;height:29px}#journey .byline{font-size:7.5px}#journey .edition{font-size:10px} /* a coluna de texto */ /* A coluna de texto ganha largura. Com .29fr ela media 320 px contra 1.134 do palco: o titulo virava legenda de uma fotografia. A 0,38 a proporcao entre o que se le e o que se ve fica perto de 1 para 2,6 — e cada ponto que a coluna toma do palco encolhe os aparelhos junto. */#journey .hero{min-height:0;padding:20px 0 16px;gap:clamp(24px,2.4vw,46px);grid-template-columns:minmax(280px,.38fr) minmax(0,1fr)}#journey .eyebrow{font-size:10.5px;margin-bottom:13px}#journey .titulo-jornada{font-size:clamp(31px,2.4vw,45px)}#journey .subhead{font-size:clamp(15px,1.05vw,19px);margin-top:12px}#journey .steps{margin-top:24px}#journey .step{padding:8px 0}#journey .step-title{font-size:18px}#journey .step-number{font-size:10.5px}#journey .step-description{font-size:13px;line-height:1.6}#journey .story-example{font-size:12px;margin-top:13px}#journey .read-button{padding:8px 13px;min-height:0;font-size:11.5px} /* a camada de leitura: continua sendo a voz da peça, um tom abaixo */#journey .scene-heading{font-size:10px;margin-bottom:10px}#journey .reading-bridge{gap:22px;padding:14px 0;margin-bottom:16px}#journey .reading-label{font-size:10px;margin-bottom:8px}#journey .reading-label svg{width:14px;height:14px}#journey .reading-quote{font-size:clamp(16px,1.16vw,21px)}#journey .reading-result{font-size:clamp(15px,1.06vw,19px)}#journey .reading-detail{font-size:12px;margin-top:6px} /* O PALCO. A caixa continua ocupando a coluna inteira — é ela que alinha a legenda em cima e o rodapé embaixo. O que encolhe são os aparelhos dentro dela, e por isso eles passam a ser centrados: sem isso sobrariam 22% de palco vazio à direita. */#journey .stage-box{aspect-ratio:1.95} /* O VAO entre os dois. A camera empurra o aparelho em foco para a frente e um pouco para o lado, e esse empurrao e medido em fracao da LARGURA DO PALCO — nao do aparelho. Com aparelhos menores e o mesmo palco, o mesmo empurrao passou a cobrir um terco do celular. 6,5% devolve a folga. */ /* O pe do palco tambem cresce. Quando um aparelho vem para a frente, o z dentro da perspectiva amplia em torno do centro OTICO da caixa, que esta acima dele: o aparelho cresce e desce. Sem essa folga o celular do terceiro passo terminava em cima da legenda de baixo. */#journey .stage{justify-content:center;gap:9%;padding:6% 0 6%} /* Altura manda nos dois, como em `css/implanta.css`: a largura de cada um e' consequencia da propria proporcao. */#journey .phone,#journey .laptop{flex:none;height:100%;width:auto} /* as sombras de chão seguem os aparelhos para o centro */#journey .shadow-phone{left:13%;width:16%}#journey .shadow-laptop{left:35%;width:50%}#journey .visual-footer{margin-top:13px;padding-top:13px}#journey .scene-caption{font-size:clamp(14px,1.02vw,18px)}#journey .cycle-note{font-size:9px}#journey .story-transcript{margin-top:16px;padding-top:12px}#journey .story-transcript>summary{font-size:14px;min-height:0;padding:7px 0}#journey .transcript-body{font-size:15px;padding:18px 0}#journey .page-footer{font-size:10px} } /* Abaixo de 1.600 px a coluna do palco ja nasce estreita, e manter os mesmos 52% deixaria a plataforma em menos da metade do tamanho de projeto — um CRM nesse tamanho vira textura, nao tela. Os aparelhos retomam parte do palco e a caixa fica um pouco mais alta: aqui a peca rola alguns pixels, e rolar custa menos do que uma tela ilegivel. */@media(min-width:1025px) and (max-width:1599px){#journey .hero{grid-template-columns:minmax(250px,.34fr) minmax(0,1fr)}#journey .stage-box{aspect-ratio:1.8}#journey .stage{gap:8%}#journey .shadow-phone{left:11%;width:18%}#journey .shadow-laptop{left:33%;width:55%} } /* ------------------------------------------------------------------------- 2 · OS APARELHOS DO SITE As medidas vêm de css/implanta.css, onde o corpo é desenhado a partir da ALTURA do aparelho (raio = 0,074·H, moldura = 0,0135·H). Aqui a altura é consequência da largura, então os mesmos números aparecem como porcentagem de largura / porcentagem de altura no mesmo par de raios. ------------------------------------------------------------------------- */#journey .phone{ /* 1,86 de altura por largura — o ponto da familia que o site escolheu. Nao e' o 15 Pro (2,167) nem o SE (1,78): aqui o aparelho divide a cena com um computador e precisa de largura para o texto. Estava em 2,02. */ aspect-ratio:1 / 1.86; background:linear-gradient(158deg,#2A3D54 0%,#182740 62%,#101D33 100%); /* raio = 0,074 da ALTURA, escrito nos dois eixos para sair circular */ border-radius:13.76% / 7.4%; box-shadow: 0 46px 74px -26px rgba(12,28,48,.58), 0 10px 22px -10px rgba(12,28,48,.38), inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.09); } /* o nosso não tem tecla lateral: a moldura é lisa nos quatro lados */#journey .phone:before{display:none} /* raio concêntrico — o da tela é o do corpo MENOS a moldura, senão o vão engorda nos cantos e o aparelho parece um estojo */#journey .phone-screen{border-radius:11.4% / 6.15%;background:#F1F6FA}#journey .statusbar .island{width:60px;height:16px;top:15px;left:120px;border-radius:99px;background:#0A1421;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}#journey .gesture{left:104px;width:93px;height:5px;bottom:12px;background:rgba(10,31,69,.25)} /* O COMPUTADOR. A tampa do site e' 16:10 — a mesma proporcao do desenho da plataforma, e por isso a tela cabe inteira nela. A daqui estava em 4:3 e lia como monitor antigo. A altura total se divide como la: 92,8% de tampa e 7,2% de base, e a largura total sai de 1,4848 x a altura. */#journey .laptop{aspect-ratio:1.4848;padding-bottom:0;display:flex;flex-direction:column;align-items:center}#journey .laptop-lid{ /* 16:10. Escrito como proporcao, e nao como 92,8% da altura, porque no empilhado do celular o computador nao tem altura definida para herdar. */ width:100%;aspect-ratio:1.6;height:auto; background:linear-gradient(158deg,#2A3D54 0%,#182740 62%,#101D33 100%); border-radius:1.48% / 2.37%; box-shadow: 0 46px 74px -26px rgba(12,28,48,.55), 0 10px 22px -10px rgba(12,28,48,.36), inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.09); }#journey .camera{background:#41566F;box-shadow:0 0 0 1.5px rgba(10,20,33,.9)}#journey .laptop-screen{inset:6px;border-radius:.7% / 1.1%;background:#F4F8FC} /* Vista de frente, a base de um notebook não é um retângulo: ela fecha para dentro no pé. O recorte é o que a faz parecer corpo em vez de prateleira. */#journey .laptop-base{ position:static;flex:none;left:auto;bottom:auto; /* 4,5% mais larga que a tampa e 7,2% da altura do aparelho — os dois numeros do site. Como proporcao: 1,045 / 0,0485. */ width:104.5%;aspect-ratio:21.55;height:auto; background:linear-gradient(180deg,#384C65 0%,#22344B 46%,#15243A 100%); border-radius:0 0 4px 4px; clip-path:polygon(0 0,100% 0,98.6% 100%,1.4% 100%); box-shadow:0 20px 28px -18px rgba(12,28,48,.65),inset 0 1px 0 rgba(255,255,255,.17); }#journey .laptop-base:before{width:12%;height:42%;border-radius:0 0 99px 99px;background:rgba(6,14,26,.5);box-shadow:none} /* a sombra de leitura dos aparelhos acompanha o titânio */#journey .device-shade{background:#0B1A2E} /* ========================================================================= O ENCAIXE NA SEÇÃO A peça fica EXATAMENTE como o Atlas a desenhou: verde-escura, creme, menta, Georgia. Esta camada não troca uma cor sequer — ela só resolve o que muda quando a peça deixa de ser uma página e passa a ser uma seção. As seções do site são travadas em `height:100svh`. A peça pedia outros 100svh só para ela e o computador saía cortado pela borda de baixo. Aqui ela deixa de PEDIR altura e passa a aceitar a que a seção tem: o palco é o que sobra depois da legenda, e o tamanho dos dois aparelhos sai dessa sobra. É o mesmo contrato das outras seções do site. O chão verde não mora aqui: quem pinta o fundo de toda seção é `bandas.css`, e é lá que a 6 deixou de ser branca. ========================================================================= */ /* O corpo do site anda com `line-height:1.55`; a página do Atlas não declarava nenhum, então tudo o que não tem entrelinha própria era desenhado em `normal`. Herdar 1,55 aqui esticava o título dos passos e a legenda da cena. A peça volta a ser desenhada como foi medida. */ #journey{line-height:normal} /* Deixa de pedir a própria tela e passa a ocupar a da seção. Sem paddings próprios: o recuo lateral é o `--gutter` do site, o mesmo das outras. */ #journey{ min-height:0;flex:1;width:100%;max-width:none;margin:0;padding:0; display:flex;flex-direction:column; } #journey .visual{display:flex;flex-direction:column;min-height:0} /* O ENCAIXE POR ALTURA vale só no layout de duas colunas. No empilhado do celular a seção volta a rolar, e quem manda na altura é o conteúdo — se estas regras vazassem para lá, a coluna de texto ficaria com a largura de uma palavra ao lado de um palco vazio. */ @media(min-width:1025px){ #journey .hero{ flex:1;min-height:0; padding-top:clamp(8px,1.4vh,18px); gap:clamp(24px,2.6vw,54px); grid-template-columns:minmax(280px,.36fr) minmax(0,1fr); /* ESTICADO, não centrado: a coluna da direita precisa herdar a altura da linha para o palco ter contra o que crescer. Com `center` ela ficava do tamanho do conteúdo e o palco nascia com zero de altura. O texto da esquerda continua centrado pelo próprio `align-self`. */ align-items:stretch; } /* O PALCO ABRACA O PAR — a mesma razao da pagina solta, que e' a referencia do dono. Era esta a origem de TUDO: com o palco valendo a coluna inteira (1.296 x 575, razao 2,25) o par ocupava 73,7% dele, contra 86,5% na pagina. Sobrava verde dos dois lados, e tudo o que se mede em fracao do palco saia do lugar: o empurrao lateral da camera, as duas sombras de chao, o veu do foco e o cartao que voa para a frente. Com `aspect-ratio` a largura passa a sair da ALTURA que a coluna deixou, e o par volta a ocupar 86% dela. `max-height` em `cqw` da coluna (`.visual` e' container de largura) impede o unico caso ruim: coluna estreita demais para a razao, que quebraria o encaixe e derramaria os aparelhos para fora. */ #journey .visual{container-type:inline-size} #journey .stage-box{ flex:1;min-height:0;height:auto;width:auto; aspect-ratio:1.78;max-height:56.2cqw; align-self:center;margin-block:auto; container-type:size; } /* UMA MEDIDA SO, e tudo deriva dela: a altura dos dois aparelhos. Teto duplo — o que a altura do palco permite e o que a largura dele permite, porque numa janela alta e estreita o par cresceria para fora da coluna. */ #journey .stage-box>*{ /* Agora que o palco abraca o par, a altura dos aparelhos e' simplesmente o que sobra do palco depois dos recuos — sem teto de largura, porque a razao do palco ja garante que o par cabe. */ --dh:calc(100cqh - 18.2cqw); /* O VAO e o PE nao sao enfeite: sao a folga que a camera consome. Quando um aparelho assume o foco ele vem para a frente (z) e escorrega para o lado, e os dois empurroes sao medidos em fracao do PALCO. Com o vao em 5% e o pe em 8% o celular em foco encostava no notebook (vao negativo, medido: -13 px a 1920x1080) e parava a 5 px do fim da secao. A pagina do Atlas ja dizia isso, com outras palavras, e com `gap:9%` e `padding:6% 0 6%`; o encaixe apertou os dois e o defeito voltou. O pe foi de 13 para 21cqh depois: com 13 sobravam 35 px de chao no pior instante, e 35 px so' bastam se o leitor estiver EXATAMENTE no topo da secao. Basta rolar um pouco menos e o pe do aparelho fica abaixo da dobra. */ --vao:9cqw; --pe:11.7cqw; /* Largura do par, medida e nao suposta: celular 0,561 x altura, notebook 1,485 x altura. Dela saem o centro do par e o lugar das sombras. */ --par:calc(2.046 * var(--dh) + var(--vao)); --par-esq:calc(50% - var(--par) / 2); } /* A FAIXA DE LEITURA CEDE O QUE PODE. O recuo de baixo dela e' o que separa o texto do fio (e da barra de carregamento, que mora no fio): de 14 para 8 px o fio sobe 6. A margem de baixo, de 16 para 10, nao mexe no fio — entrega 6 px de palco. O resto da faixa NAO encolhe: `--reading-height` e' medido pelo JS na frase mais longa, e sem essa reserva a troca de fala mudaria a altura do palco e os aparelhos mudariam de tamanho a cada ato. */ /* A BARRA DE CARREGAMENTO SOBE PARA JUNTO DO TEXTO. Ela mora no fio de baixo da faixa, e o fio estava no pe da RESERVA: `--reading-height` guarda a altura da frase mais longa (medida pelo JS) para que a troca de fala nao mude a altura do palco. Em ato curto sobravam ate 40 px de vazio entre o texto e o fio. Agora o fio e a barra vao no envelope `.reading-rows`, que tem a altura do CONTEUDO; a reserva continua na faixa, e com ela o fundo opaco que protege o texto do aparelho em foco. */ /* OS RECUOS ACIMA DA BARRA CEDEM. A reserva ja estava colada na frase mais longa; o que afastava a barra do texto eram os recuos — 20 px acima da faixa (do heroi), 14 dentro dela e 7 sob o rotulo do ato. Ficam 4, 4 e 4. */ #journey .reading-bridge{display:block;padding-top:4px;padding-bottom:0;margin-bottom:10px;border-bottom:0} #journey .hero{padding-top:4px} #journey .reading-rows{ display:grid;grid-template-columns:1.15fr 1fr;gap:22px;position:relative; padding-bottom:6px;border-bottom:1px solid #ffffff30; /* SEM RESERVA AQUI, por escolha do dono (09/09): o fio e a barra colam no texto de CADA ato e sobem ate 21 px em fala curta. Quem guarda a altura da frase mais longa e' a faixa por fora (`--reading-height`), entao o palco nao muda de altura e os aparelhos nao mudam de tamanho: o que desliza na troca de fala e' so' o fio. */ } #journey .scene-heading{margin-bottom:4px} #journey .stage{padding:6.5cqw 0 var(--pe);gap:var(--vao);justify-content:center;align-items:flex-end} #journey .phone,#journey .laptop{height:var(--dh);width:auto;flex:none} /* AS SOMBRAS DE CHAO SEGUEM OS APARELHOS, NAO A CAIXA. Elas nasceram em percentual do palco, e na pagina do Atlas isso bastava: o palco tinha a largura do par. Aqui o palco e' a coluna inteira (1.307 px para um par de 931) e o par fica centrado — as sombras ficaram para tras. Medido a 1920x1080: a sombra do notebook terminava 176 px antes dele, e a do celular cobria metade do aparelho. Agora as duas saem de `--par-esq`. */ /* O VEU DO FOCO DEIXA DE SER UM RETANGULO. Ele e' `inset:0` do palco com `background:#082d2370` e canto de 20 px: na pagina do Atlas o palco tinha a largura do par, entao o veu caia em cima dos aparelhos. Na secao o palco e' a coluna inteira, e o mesmo veu virou uma placa escura de 1.296 x 575 com beirada visivel sobre o verde chapado — aparece em 24 dos 91 instantes, com alfa efetivo de 0,19. Vira um foco: mancha radial centrada no PAR, que chega a zero ANTES da borda da caixa. Nao ha mais beirada para ver. */ #journey .focus-matte{ border-radius:0;background:none; background-image:radial-gradient(46% 48% at 50% 50%, rgba(8,45,35,.62) 0%, rgba(8,45,35,.58) 50%, rgba(8,45,35,.30) 78%, rgba(8,45,35,0) 100%); } #journey .ground-shadow{bottom:calc(var(--pe) - 4cqh)} /* o pe e' medido em cqw agora; a sombra segue */ #journey .shadow-phone{left:calc(var(--par-esq) + .03 * var(--dh));width:calc(.50 * var(--dh))} #journey .shadow-laptop{left:calc(var(--par-esq) + var(--vao) + .521 * var(--dh));width:calc(1.57 * var(--dh))} } /* 🩸 A raiz virou uma coluna FLEX para o palco poder crescer, e isso mudou a transcricao de lugar sem ninguem pedir: um item flex com margem automatica nas laterais para de esticar e passa a ter a largura do conteudo — ela encolheu de 1.100 para 220 px. `width:100%` devolve o comportamento de bloco que ela tinha na pagina: estica, o `max-width` corta em 1.100 e a margem automatica centra. */ #journey .story-transcript{width:100%} /* Nao ha aperto nenhum aqui de proposito: a legenda, a transcricao e o rodape ficam com a folga que o Atlas deu a eles, ate a largura de 1.100 e as margens automaticas da transcricao. Quem cede altura e' o palco, que e' o unico que sabe encolher sem estragar nada. */ /* O pé desta seção é zero acima de 1181 px, e quem manda nisso é `implanta.css` — a razão está escrita lá: o menu fixo come 68 px do topo, então recuo embaixo faz o miolo parecer afundado. Houve um momento em que a peça terminava em TEXTO e o recuo voltou, porque texto colado na emenda parece corte; ela termina nos aparelhos agora, e a altura volta ao palco. */ @media(max-width:1024px){ /* No empilhado o palco volta a ter altura própria: não há sobra para ele herdar, porque a seção inteira passa a rolar. */ #journey .stage-box{flex:none;height:calc(var(--phone-height,420px) + var(--laptop-height,300px) + 70px)} #journey .phone{height:auto} #journey .laptop{height:auto;width:100%} } /* ========================================================================= JANELA BAIXA: A SECAO CRESCE, NAO CORTA Medido, nao suposto: a coluna da esquerda pede 493 px FIXOS — olho-magico, titulo, subtitulo, os quatro passos, o exemplo e o botao — e nao encolhe com a janela. A pagina do Atlas convive com isso porque e' `min-height`: a 1366x620 ela mede 928 px e o corpo rola. A secao do site e' `height: 100svh` travada (`.bloco`, acima de 1181 px de largura) e `#journey` tem `overflow:hidden` — o que nao cabe simplesmente some. O limiar foi medido por bisseccao em sete larguras, cada passo com recarga limpa — redimensionar a janela deixa layout velho e inventa 2 a 9 px de rolagem que nao existem. A peca cabe ate 550 px de janela em 1920 e 1536, 540 em 1440, 1366, 1280 e 1200, e 530 em 1600. Abaixo disso o que estoura e' sempre a coluna da esquerda, que pede de 438 a 455 px conforme a largura. (Ela pedia 493 enquanto existia o botao "Ler a historia completa"; o botao saiu junto com a transcricao para onde ele levava.) Aqui a secao volta a fazer o que a pagina faz: cresce e a rolagem cuida do resto. E' a mesma saida que o site ja usa para janela ESTREITA — em `estudio.css`, `@media (max-width:1180px){.bloco{height:auto}}`. Esta e' a versao por ALTURA da mesma regra, e por isso repete o `min-width:1181px` dela: abaixo dessa largura a secao ja cresce sozinha. ========================================================================= */ @media (min-width:1181px) and (max-height:549px){ #implanta{height:auto;min-height:100svh} /* Sem altura travada nao existe mais SOBRA para o palco herdar, e quem media a si mesmo por ela — `flex:1` — passaria a medir o proprio conteudo. O heroi volta a ter a altura do texto, que e' o que manda agora. */ #journey .hero{flex:none} /* E o palco ganha altura PROPRIA, em vez da sobra. Precisa ser definida: o tamanho dos dois aparelhos sai de `85cqh` deste box, e `container-type :size` sem altura definida devolveria zero. A conta segue a que o palco tem no limiar, para a troca de modo nao dar salto: no travado ele mede 292 px a 550 de janela, e 53vh devolve 292 a 550 e 286 a 540. */ #journey .stage-box{flex:none;height:clamp(230px,53vh,300px)} } /* ========================================================================= 07/10 — os ramos (js/nichos.js): o passo 2 mostra Produtos & Serviços e o passo 3 passa pela tela Orçamentos antes de a oferta sair pelo WhatsApp. Tudo na escala lógica do notebook (1060 px), como o resto da plataforma. ========================================================================= */ #journey .ps-layout{grid-template-columns:1.62fr 1fr} #journey .ps-grid{grid-template-columns:minmax(0,1fr) 100px 92px 30px} #journey .catalog-row{transition:opacity .45s var(--ease)} #journey .catalog-row.ps-grid{padding:14px 16px} #journey .ps-item{min-width:0} #journey .ps-item b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #journey .ps-item small{display:flex;align-items:center;gap:7px;white-space:nowrap;overflow:hidden} #journey .ps-tipo{flex:none;font-style:normal;font-size:11px;font-weight:600;line-height:1.3;padding:1px 6px;border-radius:4px;color:#1D4ED8;background:#2563EB12;border:1px solid #2563EB2E} #journey .ps-tipo.prod{color:#A2510A;background:#D9770612;border-color:#D9770633} #journey .catalog-row .ps-preco b{font-size:15px;margin:0;color:var(--ink);font-variant-numeric:tabular-nums} #journey .ps-preco small{display:block;margin-top:2px} #journey .ps-disp{font-size:13px;color:var(--body)} #journey .ps-disp.baixo{color:#A2510A} #journey .ps-ia{font-size:10px;font-weight:700;letter-spacing:.04em;line-height:1;text-align:center;padding:4px 0;border-radius:4px;color:var(--ruby);background:color-mix(in srgb,var(--ruby) 7%,#fff);border:1px solid color-mix(in srgb,var(--ruby) 24%,#fff)} #journey .quote-layout{display:grid;grid-template-columns:1.62fr 1fr;gap:18px;align-items:start} #journey .quote-card{overflow:hidden} #journey .quote-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--border-2)} #journey .quote-top b{display:block;font-size:17px;font-weight:600;color:var(--ink)} #journey .quote-top small{display:block;font-size:13px;color:var(--label);margin-top:3px} #journey .q-status{--sc:#8990A6;flex:none;font-size:12px;font-weight:600;padding:5px 11px;border-radius:99px;color:color-mix(in srgb,var(--sc) 80%,#000);background:color-mix(in srgb,var(--sc) 13%,#fff);border:1px solid color-mix(in srgb,var(--sc) 40%,#fff);transition:color .3s,background .3s,border-color .3s} #journey .q-status.enviado{--sc:#2563EB} #journey .q-status.aprovado{--sc:#059669} #journey .quote-grid{display:grid;grid-template-columns:minmax(0,1fr) 46px 90px 104px;gap:10px;align-items:center;padding:12px 18px} #journey .quote-grid>span:not(:first-child){text-align:right;font-variant-numeric:tabular-nums} #journey .quote-head{padding-block:10px;background:var(--well);border-bottom:1px solid var(--border-2);font-size:12px;color:var(--label)} #journey .quote-line{min-height:64px;border-bottom:1px solid var(--border-3);font-size:14px;color:var(--body);opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease),transform .45s var(--ease)} #journey .quote-line.lit{transform:none} #journey .quote-line b{display:block;font-size:15px;font-weight:600;color:var(--ink);margin-bottom:3px} #journey .quote-line small{font-size:12px;color:var(--label)} #journey .quote-line>span:last-child{font-weight:600;color:var(--ink)} #journey .quote-disc>span:last-child{color:var(--green)} #journey .quote-total{display:flex;justify-content:space-between;align-items:baseline;padding:14px 18px;background:var(--well);border-bottom:1px solid var(--border-2)} #journey .quote-total span{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--label)} #journey .quote-total strong{font-size:30px;font-weight:650;letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums} #journey .quote-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px} #journey .quote-foot .minor{display:inline-flex;align-items:center;gap:6px;font-size:12px} #journey .quote-send{background:#138044;border-color:#138044;color:#fff} #journey .quote-side{display:grid;gap:14px;align-content:start} #journey .quote-side .policy{transition:opacity .45s var(--ease)} #journey .quote-client b{display:block;font-size:17px;font-weight:600;color:var(--ink);margin:6px 0 3px} #journey .quote-client small{display:block;font-size:13px;color:var(--label);margin-bottom:11px} /* 07/10 — a tela Agenda (passo 3, só no ramo que tem a aba Agenda): a semana da equipe nas cores do produto e a quinta às 14h, tracejada até o aceite do cliente e verde depois dele. Sem a aba, o passo 3 fica em Leads. */ #journey .ag-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;align-items:start} #journey .ag-semana{padding:12px 14px 14px} #journey .ag-dias{display:grid;grid-template-columns:42px repeat(6,minmax(0,1fr));column-gap:6px;padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--border-3)} #journey .ag-dias span{padding:3px 0;border-radius:6px;text-align:center;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--label);transition:background .35s,color .35s} #journey .ag-dias b{display:block;font-size:15px;font-weight:600;color:var(--ink);transition:color .35s} #journey #ag-qui.lit{background:#E8F1FD;color:var(--blue)} #journey #ag-qui.lit b{color:var(--blue)} #journey .ag-corpo{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:6px} #journey .ag-horas{display:grid;grid-template-rows:repeat(6,50px);row-gap:4px;font-size:11px;color:var(--label)} #journey .ag-grade{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(6,50px);gap:4px 6px;background-image:linear-gradient(var(--border-3) 1px,transparent 1px);background-size:100% 54px} #journey .ag-b{--c:#2563EB;min-width:0;overflow:hidden;padding:5px 5px 5px 6px;border-radius:5px;border-left:3px solid var(--c);background:color-mix(in srgb,var(--c) 9%,#fff);font-size:11px;line-height:1.3;color:var(--body);white-space:nowrap;text-overflow:ellipsis} #journey .ag-b b{display:block;overflow:hidden;text-overflow:ellipsis;font-size:11.5px;font-weight:600;color:var(--ink)} #journey .ag-b.t-consulta{--c:#0891B2} #journey .ag-b.t-visita{--c:#D97706} #journey .ag-b.t-reuniao{--c:#7C3AED} #journey .ag-col{grid-area:1/4/7/5;margin:-3px -3px;border-radius:7px;background:rgba(37,99,235,.07);opacity:0;transition:opacity .45s var(--ease);pointer-events:none} #journey .ag-novo{border:1px dashed var(--c);border-left:3px solid var(--c);background:#fff;opacity:.34;transition:opacity .45s var(--ease),background .45s,border-color .45s} #journey .ag-novo.lit{background:#E8F1FD} #journey .ag-novo.ok{--c:#059669;border-style:solid;background:#E7F6EF} #journey .ag-side{display:grid;gap:14px;align-content:start} #journey .ag-card{opacity:.34;transition:opacity .45s var(--ease)} #journey .ag-nome{display:block;margin-top:12px;font-size:16px;font-weight:600;color:var(--ink)} #journey .ag-oque{display:block;margin-top:2px;font-size:12.5px;color:var(--label)} #journey .ag-quando{display:flex;align-items:center;gap:8px;margin:14px 0 8px;padding:9px 11px;border-radius:7px;background:var(--well);font-size:13.5px;font-weight:600;color:var(--ink)} #journey .ag-quando svg{flex:none;width:16px;height:16px;color:var(--blue)} #journey .ag-linha{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--border-3);font-size:13px;color:var(--label)} #journey .ag-linha b{font-weight:600;color:var(--ink)} #journey .ag-nota{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;line-height:1.45;color:var(--body)} #journey .ag-nota svg{flex:none;width:16px;height:16px;margin-top:1px;color:var(--blue)} #journey .ag-nota p{margin:0} #journey .ag-nota b{font-weight:600;color:var(--green)} /* ---------- nitidez (07/10, «a qualidade das animações está horrível») ---------- Aparelho girado em 3D vira TEXTURA: o Chrome rasteriza uma vez e reamostra a cada quadro, e will-change:transform congela a escala dela — ao crescer na pose de frente, borrava mais. Agora os aparelhos ficam planos (a câmera do jornada.js só desloca e escala), o Chrome pinta na escala certa, e o destaque do cartão escurece a cena em vez de tirar a cor dela. O texto da tela simulada escurece: cinza-claro miúdo some na tela pequena. */ #journey .phone,#journey .laptop{will-change:auto;transform:none} #journey .stage-box{perspective:none} #journey .stage-box.spotlight .phone,#journey .stage-box.spotlight .laptop{filter:none} #journey{--ink:#22262D;--body:#3A3F48;--muted:#535965;--label:#5A606B;--faint:#8C929C} #journey .lead-identity p,#journey .minor,#journey .catalog-row small{color:#565C66}