/* AI Solutions · Só homepage (ou páginas com demos): demo de atendimento (telemóvel + agente), demos em 3 passos, visual do software. */
/* palco da demo, aberto por baixo do painel (desktop) */
.demo { grid-column: 1 / -1; margin-top: 12px; padding: clamp(18px, 2.4vw, 30px); border-radius: 22px; border: 1px solid rgba(107, 83, 249, .38); background: rgba(17, 0, 67, .45); }
.demo[hidden] { display: none; }
.demo:not([hidden]) { animation: abre .5s var(--ease-out); }
.stage-note { margin: 0; font-size: .8rem; color: var(--texto-3); }
/* folha de ecrã inteiro (demos no telemóvel) */
.folha { width: 100vw; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: var(--noite); color: var(--luz); overflow: hidden; }
.folha[open] { display: flex; flex-direction: column; animation: sobe .4s var(--ease-out); }
.folha::backdrop { background: rgba(5, 0, 24, .7); }
@keyframes sobe { from { transform: translateY(40px); opacity: 0; } }
.folha__topo { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--traco); background: #0D0238; }
.folha__titulo { margin: 0; font-family: var(--f-display); font-stretch: 112.5%; font-weight: 700; font-size: 1.05rem; }
.folha__fechar { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--traco-forte); background: none; color: var(--luz); font-weight: 600; cursor: pointer; }
.folha__fechar svg { width: 16px; height: 16px; }
.folha__corpo { flex: 1; overflow-y: auto; padding: 16px; -webkit-overflow-scrolling: touch; }
.folha__corpo .demo { margin: 0; padding: 0; border: 0; background: none; }
/* chips e botão repetir (demos) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 15px 0 12px;
  border-radius: 999px; border: 1px solid var(--traco-forte); background: rgba(17, 0, 67, .5); color: var(--texto-2);
  font-size: .9rem; font-weight: 500; cursor: pointer; overflow: hidden; transition: background-color .25s, color .25s, border-color .25s;
}
.chips button svg { width: 17px; height: 17px; flex: none; }
.chips button:hover { color: var(--luz); border-color: rgba(228, 220, 255, .45); }
.chips button[aria-selected="true"] { background: var(--luz); border-color: var(--luz); color: var(--indigo); }
.chips button[aria-selected="true"] svg { color: var(--eletrico); }
.chip-bar { position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; border-radius: 2px; background: rgba(17, 0, 67, .12); opacity: 0; transition: opacity .3s; }
.chip-bar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--eletrico); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform .6s var(--ease-out); }
.chips button[aria-selected="true"] .chip-bar { opacity: 1; }
.repetir { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid var(--traco); background: none; color: var(--texto-2); font-size: .82rem; font-weight: 500; cursor: pointer; transition: color .2s, border-color .2s; }
.repetir svg { width: 15px; height: 15px; }
.repetir:hover { color: var(--luz); border-color: var(--traco-forte); }
/* =========================================================
   Demo em 3 passos (orçamentação e processos)
   ========================================================= */
.passos3__topo { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 16px; }
.passos3__estado { margin: 0; display: flex; align-items: center; gap: 9px; font-size: .9rem; color: var(--texto-2); min-width: 0; }
.passos3__estado::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 2px rgba(143, 125, 255, .9); }
.passos3__lista { position: relative; list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
/* a linha de luz liga os três passos e acende até ao passo atual */
.passos3__lista::before, .passos3__lista::after { content: ""; position: absolute; left: 14px; right: 14px; top: 13px; height: 1px; pointer-events: none; }
.passos3__lista::before { background: var(--traco-forte); }
.passos3__lista::after { background: linear-gradient(90deg, rgba(107, 83, 249, .4), #E4DCFF); box-shadow: 0 0 10px 1px rgba(107, 83, 249, .7); transform-origin: 0 50%; transform: scaleX(var(--p, 1)); transition: transform .8s var(--ease-out); }
.passo { position: relative; display: flex; flex-direction: column; gap: 10px; transition: opacity .45s; }
.passo__cab { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 600; font-size: .95rem; line-height: 1.3; }
.passo__n { flex: none; width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; font: 700 .8rem/1 var(--f-display); background: var(--noite); border: 1px solid var(--traco-forte); color: var(--texto-2); transition: background-color .4s, color .4s, border-color .4s, box-shadow .4s; }
.passo.is-feito .passo__n, .passo.is-agora .passo__n { background: var(--luz); color: var(--indigo); border-color: var(--luz); }
.passo.is-agora .passo__n { box-shadow: 0 0 14px 3px rgba(143, 125, 255, .85); }
.passo.is-espera { opacity: .42; }
.cartao { flex: 1; padding: 14px 15px; border-radius: 16px; border: 1px solid var(--traco); background: rgba(243, 240, 255, .035); }
.cartao--doc { background: var(--superficie); border-color: rgba(107, 83, 249, .42); }
.cartao__cab { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; line-height: 1.25; }
.cartao__cab span:last-child { display: flex; flex-direction: column; min-width: 0; }
.cartao__cab b { font-size: .9rem; }
.cartao__cab small { font-size: .76rem; color: var(--texto-3); }
.canal { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.canal svg { width: 16px; height: 16px; }
.canal--wa { background: rgba(37, 211, 102, .14); color: #25D366; }
.canal--folha { background: rgba(52, 168, 83, .16); color: #34A853; border-radius: 8px; }
.canal--doc { background: var(--luz); color: var(--indigo); border-radius: 8px; font: 700 .72rem/1 var(--f-display); }
.cartao__msg { margin: 0; font-size: .92rem; line-height: 1.5; color: #e4dcff; }
mark { background: none; color: inherit; border-radius: 4px; padding: 0 2px; margin: 0 -2px; box-shadow: inset 0 -.1em 0 rgba(107, 83, 249, 0); transition: box-shadow .45s, color .45s; }
mark.is-lit, .passo.is-feito mark { color: #fff; box-shadow: inset 0 -.55em 0 rgba(107, 83, 249, .5); }
.linhas { list-style: none; margin: 0; padding: 0; }
.linhas li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--traco); font-size: .85rem; line-height: 1.35; color: #e4dcff; transition: opacity .4s, transform .5s var(--ease-out); }
.linhas li b { font-family: var(--f-display); font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.linhas--folha li { grid-template-columns: 4.2rem minmax(0, 1fr); }
.linhas li.is-velha { color: var(--texto-3); }
.linhas li.is-velha b { color: var(--texto-2); }
.linhas li.is-oculta { opacity: 0; transform: translateX(-6px); }
.linhas--folha li:not(.is-velha) { background: rgba(107, 83, 249, .16); margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 6px; }
.cartao__nota { display: flex; align-items: center; gap: 7px; margin: 10px 0 0; font-size: .78rem; color: var(--texto-2); }
.cartao__nota svg { width: 16px; height: 16px; color: #34A853; flex: none; }
.selo { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: .88rem; font-weight: 600; color: var(--texto-3); transition: color .4s; }
.selo svg { width: 20px; height: 20px; flex: none; }
.selo.is-on { color: var(--verde); }
.envio { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 11px; border-radius: 12px; background: #005C4B; color: #E9EDEF; line-height: 1.25; transition: opacity .45s, transform .45s var(--ease-out); }
.envio span:last-child { display: flex; flex-direction: column; min-width: 0; }
.envio b { font-size: .84rem; font-weight: 600; }
.envio small { font-size: .74rem; color: rgba(233, 237, 239, .7); }
.envio.is-oculta { opacity: 0; transform: translateY(6px); }
.doc-ic { width: 28px; height: 34px; border-radius: 3px; background: #E5484D; color: #fff; display: grid; place-items: end center; padding-bottom: 4px; font-size: 8px; font-weight: 800; flex: none; }
.envio--wa .canal { background: rgba(255, 255, 255, .12); color: #fff; }
/* =========================================================
      Demo de atendimento (portada da opção 2, tema escuro)
   ========================================================= */
.atend {
  --ph-w: 286px; --ph-h: 588px;
  position: relative; display: grid; grid-template-columns: var(--ph-w) minmax(0, 380px); column-gap: 46px; row-gap: 14px; align-items: start;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas: "topo topo" "phone agent" "phone side" "note note";
}
.atend__topo { grid-area: topo; display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; margin-bottom: 8px; }
.atend__rotulo { margin: 0 0 9px; font-size: .86rem; color: var(--texto-3); }
.atend__relogio { margin: 0; text-align: right; line-height: 1; flex: none; }
.atend__relogio .clock { display: inline-block; font-family: var(--f-display); font-stretch: 118%; font-weight: 650; font-size: clamp(2rem, 2.8vw, 2.6rem); letter-spacing: -.03em; font-variant-numeric: tabular-nums; view-transition-name: relogio-demo; }
.atend__relogio small { display: block; max-width: 10.5rem; margin: 7px 0 0 auto; font-size: .8rem; line-height: 1.3; color: var(--texto-3); text-wrap: balance; }
.stage-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.sw-base { fill: none; stroke: rgba(243, 240, 255, .18); stroke-width: 1.2; stroke-dasharray: 3 4; }
.sw-beam { fill: none; stroke: url(#beam-h); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 22 200; stroke-dashoffset: 22; opacity: 0; filter: drop-shadow(0 0 4px rgba(143, 125, 255, .9)); }
.atend .stage-note { grid-area: note; margin-top: 4px; }
/* telemóvel */
.phone {
  grid-area: phone; position: relative; z-index: 2; width: var(--ph-w); height: var(--ph-h); padding: 9px; border-radius: 48px;
  background: linear-gradient(145deg, #2A2733, #121019 40%, #1B1924);
  box-shadow: inset 0 0 0 1.5px #3A3746, inset 0 0 0 3px #0C0B11, 0 0 0 1px rgba(228, 220, 255, .22), 0 40px 80px -30px rgba(0, 0, 0, .8), 0 0 60px -10px rgba(107, 83, 249, .35);
  view-transition-name: phone;
}
.ph-btn { position: absolute; width: 3px; border-radius: 2px; background: #2B2936; }
.ph-btn-a { left: -3px; top: 118px; height: 26px; }
.ph-btn-b { left: -3px; top: 160px; height: 48px; }
.ph-btn-c { right: -3px; top: 176px; height: 70px; }
.screen { position: relative; height: 100%; border-radius: 39px; overflow: hidden; display: flex; flex-direction: column; background: #0B141A; color: #E9EDEF; font-family: var(--f-texto); isolation: isolate; }
.sbar { flex: none; height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 2px 24px 0 28px; font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; background: #1F2C33; }
.sbar-time { font-variant-numeric: tabular-nums; }
.island { position: absolute; left: 50%; top: 9px; width: 84px; height: 24px; border-radius: 14px; background: #000; transform: translateX(-50%); }
.sbar-ic { display: flex; align-items: center; gap: 5px; fill: #E9EDEF; color: #E9EDEF; }
.sbar-ic svg { fill: currentColor; }
.sbar-ic svg[fill="none"] { fill: none; }
.wa-head { flex: none; height: 52px; display: flex; align-items: center; gap: 6px; padding: 0 8px 2px 6px; background: #1F2C33; view-transition-name: wa-head; }
.wa-ic { width: 20px; height: 20px; color: #AEBAC1; flex: none; }
.wa-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 13px; font-weight: 700; letter-spacing: -.02em; background: var(--av-bg, #E7C3AE); color: var(--av-fg, #6E360C); }
.wa-who { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.15; margin-left: 4px; }
.wa-who b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-who small { font-size: 11.5px; color: #8696A0; }
.wa-who small.is-typing { color: #21C063; }
.wa-acts { display: flex; gap: 10px; margin-right: 2px; }
.wa-acts .wa-ic { width: 19px; height: 19px; }
.wa-chat {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; position: relative; background-color: #0B141A;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='132' fill='none' stroke='%23ffffff' stroke-opacity='.028' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='20' r='7'/%3E%3Cpath d='M58 12l3 6 6 1-4.5 4 1 6-5.5-3-5.5 3 1-6L50 19l6-1z'/%3E%3Crect x='12' y='58' width='16' height='12' rx='3'/%3E%3Cpath d='M52 64c6-8 14 8 20 0s14 8 20 0'/%3E%3Cpath d='M22 104l8-8 8 8-8 8z'/%3E%3Ccircle cx='66' cy='104' r='3'/%3E%3Cpath d='M98 96h18v14h-18z M98 96l9 7 9-7'/%3E%3C/svg%3E");
  background-size: 132px 132px; view-transition-name: wa-chat;
}
.wa-chat::-webkit-scrollbar { display: none; }
.wa-inner { display: flex; flex-direction: column; min-height: 100%; padding: 8px 10px; }
.wa-inner > :first-child { margin-top: auto; }
.wa-day { align-self: center; margin: 4px 0 6px; font-size: 11px; color: #8696A0; background: #182229; padding: 4px 10px; border-radius: 7px; }
.wa-sys { align-self: center; max-width: 90%; text-align: center; margin-bottom: 8px; font-size: 10.8px; line-height: 1.35; color: #72C6B8; background: #182229; padding: 5px 10px; border-radius: 7px; }
.msg { position: relative; max-width: 84%; padding: 5px 8px 6px 9px; border-radius: 8px; font-size: 13.2px; line-height: 1.37; margin-top: 2px; overflow-wrap: anywhere; }
.msg.in { align-self: flex-start; background: #1F2C33; }
.msg.out { align-self: flex-end; background: #005C4B; }
.msg.tail { margin-top: 8px; }
.msg.tail.in { border-top-left-radius: 0; }
.msg.tail.out { border-top-right-radius: 0; }
.msg.tail::before { content: ""; position: absolute; top: 0; width: 8px; height: 12px; background: inherit; }
.msg.tail.in::before { left: -7px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.msg.tail.out::before { right: -7px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.msg .sp { display: inline-block; width: 40px; height: 1px; }
.msg.out .sp { width: 56px; }
.meta { position: absolute; right: 7px; bottom: 3px; display: inline-flex; align-items: center; gap: 3px; font-size: 10.3px; color: #8696A0; font-variant-numeric: tabular-nums; line-height: 1; }
.msg.out .meta { color: rgba(233, 237, 239, .62); }
.meta svg { width: 16px; height: 16px; stroke-width: 2.1; }
.tk { color: rgba(233, 237, 239, .62); transition: color .3s; }
.tk.read { color: #53BDEB; }
.tk .i-2 { display: none; }
.tk.dlv .i-1, .tk.read .i-1 { display: none; }
.tk.dlv .i-2, .tk.read .i-2 { display: block; }
.msg b { font-weight: 650; }
.msg-main { position: relative; }
.msg.typing { padding: 10px 12px; display: flex; gap: 4px; }
.msg.typing i { width: 6px; height: 6px; border-radius: 50%; background: #8696A0; animation: dot 1.1s infinite ease-in-out; }
.msg.typing i:nth-child(2) { animation-delay: .16s; }
.msg.typing i:nth-child(3) { animation-delay: .32s; }
@keyframes dot { 0%, 70%, 100% { opacity: .35; transform: none; } 35% { opacity: 1; transform: translateY(-2px); } }
.msg-btns { display: flex; flex-direction: column; margin: 7px -8px -6px -9px; }
.msg-btns span { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 6px; height: 35px; border-top: 1px solid rgba(233, 237, 239, .09); color: #21C063; font-size: 13.2px; font-weight: 500; }
.msg-btns svg { width: 15px; height: 15px; }
.msg-btns span.tapped { background: rgba(33, 192, 99, .16); }
/* cartão de produto (sem preço: a página não mostra valores em euros) */
.msg.card { padding: 3px 3px 6px; width: 212px; }
.card-img { height: 112px; border-radius: 6px; overflow: hidden; }
.card-img svg { width: 100%; height: 100%; }
.card-b { padding: 7px 6px 0; }
.card-b b { display: block; font-size: 13.2px; }
.card-b small { display: block; font-size: 11.2px; color: #8696A0; margin-top: 1px; }
.msg.card .msg-btns { margin: 8px -3px -6px; }
/* referência Multibanco */
.mb { width: 206px; padding-bottom: 14px; }
.mb-h { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 12.6px; padding-bottom: 7px; margin-bottom: 6px; border-bottom: 1px solid rgba(233, 237, 239, .09); }
.mb-h svg { width: 17px; height: 17px; color: #AEBAC1; }
.mb dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 12.6px; }
.mb dt { color: #8696A0; }
.mb dd { margin: 0; text-align: right; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
/* nota de voz: largura fixa, avatar à esquerda, onda ao meio, duração por baixo (sem posições absolutas frágeis) */
.msg.voice { display: grid; grid-template-columns: 38px 22px minmax(0, 1fr); grid-template-rows: auto 12px; column-gap: 8px; align-items: center; width: 226px; max-width: 84%; padding: 7px 10px 5px 8px; }
.voice .v-av { grid-row: 1 / 3; position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 12px; background: #C9B8E8; color: #3A2466; }
.voice .v-av svg { position: absolute; right: -4px; bottom: -2px; width: 16px; height: 16px; color: #53BDEB; stroke-width: 2.4; opacity: 0; }
.voice.heard .v-av svg.blue { opacity: 1; }
.voice .v-av svg.grey { color: rgba(233, 237, 239, .75); opacity: 1; }
.voice.heard .v-av svg.grey { opacity: 0; }
.voice .play-v { width: 22px; height: 22px; color: #AEBAC1; }
.voice .wave { height: 24px; display: flex; align-items: center; gap: 2px; min-width: 0; }
.voice .wave i { flex: 1 1 0; min-width: 1px; border-radius: 2px; background: rgba(233, 237, 239, .42); min-height: 3px; }
.voice .dur { grid-column: 2 / 4; font-size: 10.3px; color: rgba(233, 237, 239, .62); font-variant-numeric: tabular-nums; line-height: 12px; }
.voice .meta { bottom: 5px; }
/* documento (proposta enviada) */
.msg.doc { padding: 3px 3px 6px; width: 222px; }
.doc-row { display: flex; align-items: center; gap: 9px; padding: 8px 7px; background: rgba(0, 0, 0, .14); border-radius: 6px; }
.doc-ic { width: 30px; height: 36px; border-radius: 3px; background: #E5484D; color: #fff; display: grid; place-items: end center; padding-bottom: 4px; font-size: 8px; font-weight: 800; letter-spacing: .02em; flex: none; }
.doc-row b { display: block; font-size: 12.2px; font-weight: 500; line-height: 1.25; word-break: break-all; }
.doc-row small { display: block; font-size: 10.8px; color: #8696A0; margin-top: 2px; }
.msg .cap { padding: 6px 5px 0 6px; }
/* barra de escrita */
.wa-bar { flex: none; display: flex; align-items: flex-end; gap: 6px; padding: 6px 6px 18px; }
.wa-field { flex: 1; min-width: 0; min-height: 42px; border-radius: 22px; background: #1F2C33; display: flex; align-items: flex-end; gap: 9px; padding: 10px 12px 10px 11px; color: #8696A0; }
.wa-field .wa-ic { width: 21px; height: 21px; color: #8696A0; }
.wa-text { flex: 1; min-width: 0; font-size: 14px; line-height: 21px; color: #E9EDEF; max-height: 84px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; overflow-wrap: anywhere; }
.wa-ph { color: #8696A0; }
.wa-text .caret { display: inline-block; width: 1.5px; height: 17px; background: #00A884; vertical-align: -3px; margin-left: 1px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.wa-field.has-text .wa-cam, .wa-field.is-rec .wa-cam, .wa-field.is-rec .wa-clip { display: none; }
.wa-clip.hl { color: #E9EDEF; }
.wa-send { width: 42px; height: 42px; border-radius: 50%; background: #00A884; color: #0B141A; display: grid; place-items: center; flex: none; transition: transform .15s var(--ease-out); }
.wa-send svg { width: 21px; height: 21px; grid-area: 1 / 1; transition: opacity .15s, transform .2s var(--ease-out); }
.wa-send .i-send { opacity: 0; transform: scale(.6) rotate(-20deg); }
.wa-send.has-text .i-mic { opacity: 0; transform: scale(.6); }
.wa-send.has-text .i-send { opacity: 1; transform: none; }
.wa-send.press { transform: scale(.9); }
.wa-send.rec { transform: scale(1.12); }
.rec-line { display: flex; align-items: center; gap: 8px; min-width: 0; color: #E9EDEF; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.rec-line i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #F15C6D; animation: caret 1s steps(1) infinite; }
.rec-line small { color: #8696A0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.home-ind { position: absolute; left: 50%; bottom: 6px; width: 108px; height: 4px; border-radius: 3px; background: rgba(233, 237, 239, .4); transform: translateX(-50%); }
/* painel do agente */
.agent {
  grid-area: agent; position: relative; z-index: 1; height: 440px; display: flex; flex-direction: column;
  background: var(--superficie); border: 1px solid rgba(107, 83, 249, .38); border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); view-transition-name: agent;
}
.ag-head { position: relative; flex: none; display: flex; align-items: center; gap: 11px; padding: 12px 14px 12px 12px; background: #0D0238; border-bottom: 1px solid var(--traco); }
.ag-avatar { position: relative; width: 40px; height: 40px; border-radius: 12px; background: var(--indigo); display: grid; place-items: center; flex: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); z-index: 1; }
.mark { position: relative; display: inline-block; height: var(--mh, 27px); aspect-ratio: 563 / 637; flex: none; }
.mark img { width: 100%; height: 100%; }
.mark .orb {
  position: absolute; left: 49.79%; top: 55.95%; width: 21%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle closest-side, #fff 0 46%, rgba(228, 220, 255, .9) 58%, rgba(107, 83, 249, .5) 76%, rgba(107, 83, 249, 0) 100%);
  transition: transform .5s var(--ease-out), filter .5s;
}
.agent.is-replying .ag-avatar .orb { transform: translate(-50%, -50%) scale(1.9); filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 12px var(--halo)); transition-duration: .25s; }
.ag-who { position: relative; z-index: 1; display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1; }
.ag-who b { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-who small { font-size: 12.3px; color: var(--texto-3); }
.ag-state { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; color: var(--texto-2); box-shadow: inset 0 0 0 1px var(--traco-forte); white-space: nowrap; }
.ag-state i { width: 7px; height: 7px; border-radius: 50%; background: #6F68A0; transition: background-color .3s, box-shadow .3s; }
.ag-state[data-s="work"] i { background: #9C8CFF; animation: pulse 1s infinite ease-in-out; }
.ag-state[data-s="reply"] i { background: #fff; box-shadow: 0 0 0 3px rgba(107, 83, 249, .45), 0 0 10px #B3A6FF; }
@keyframes pulse { 50% { opacity: .35; } }
.ag-flare {
  position: absolute; left: 0; right: 0; top: 33px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(107, 83, 249, 0) 0%, rgba(228, 220, 255, .9) 6%, #fff 9%, rgba(228, 220, 255, .75) 18%, rgba(107, 83, 249, .4) 38%, rgba(107, 83, 249, 0) 62%);
  box-shadow: 0 0 10px 1px rgba(107, 83, 249, .55); transform-origin: 32px 50%; transform: scaleX(0); opacity: 0;
  transition: transform .9s var(--ease-out), opacity .7s ease .15s;
}
.agent.is-flaring .ag-flare { transform: scaleX(1); opacity: 1; transition: transform .55s var(--ease-out), opacity .1s; }
.ag-body { position: relative; flex: 1; min-height: 0; padding: 16px 16px 8px 12px; overflow: hidden; view-transition-name: ag-body; }
.ag-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ag-wires .w { fill: none; stroke: rgba(243, 240, 255, .12); stroke-width: 1.5; transition: stroke .4s; }
.ag-wires .w.done { stroke: rgba(143, 125, 255, .55); }
.ag-wires .wb { fill: none; stroke: #E4DCFF; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 26 200; stroke-dashoffset: 26; opacity: 0; filter: drop-shadow(0 0 4px rgba(143, 125, 255, .95)); }
.ag-nodes { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.node { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; min-height: 42px; }
.node .tile {
  position: relative; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(243, 240, 255, .04); border: 1px solid var(--traco); color: var(--texto-3); transition: background-color .3s, border-color .3s, box-shadow .4s, color .3s;
}
.node:nth-child(even) .tile { margin-left: 34px; }
.node .tile svg { width: 21px; height: 21px; opacity: .6; transition: opacity .3s; }
.node .tile .b-whatsapp { color: #25D366; }
.node .n-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.node .n-txt b { font-size: 13.6px; font-weight: 600; color: var(--texto-3); transition: color .3s; }
.node .n-data { font-size: 12px; color: var(--texto-2); margin-top: 3px; min-height: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .3s; }
.node .n-time { font-size: 11.5px; color: var(--texto-3); opacity: 0; transition: opacity .3s; padding-left: 8px; font-variant-numeric: tabular-nums; }
.node .badge { position: absolute; right: -5px; top: -5px; width: 16px; height: 16px; border-radius: 50%; background: var(--luz); color: var(--indigo); display: grid; place-items: center; transform: scale(0); transition: transform .35s var(--ease-out); box-shadow: 0 0 0 2px var(--superficie); }
.node .badge svg { width: 11px; height: 11px; opacity: 1; stroke-width: 3; }
.node[data-s="active"] .tile {
  background: linear-gradient(var(--superficie-2), var(--superficie-2)) padding-box, conic-gradient(from var(--ang), var(--halo), var(--eletrico), #fff, var(--halo)) border-box;
  border: 1.5px solid transparent; color: var(--luz); box-shadow: 0 0 0 4px rgba(107, 83, 249, .14), 0 0 22px -4px rgba(143, 125, 255, .8);
  animation: gira 1.4s linear infinite;
}
@keyframes gira { to { --ang: 360deg; } }
.node[data-s="active"] .tile svg, .node[data-s="done"] .tile svg { opacity: 1; }
.node[data-s="active"] .n-txt b, .node[data-s="done"] .n-txt b { color: var(--luz); }
.node[data-s="active"] .n-data, .node[data-s="done"] .n-data { opacity: 1; }
.node[data-s="done"] .tile { background: var(--superficie-2); border-color: rgba(143, 125, 255, .35); color: var(--luz); }
.node[data-s="done"] .badge { transform: scale(1); }
.node[data-s="done"] .n-time { opacity: .85; }
.ag-empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-size: 13.5px; color: var(--texto-3); }
.ag-empty[hidden] { display: none; }
.ag-readout { display: none; }
.ag-foot { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-top: 1px solid var(--traco); font-size: 12.6px; color: var(--texto-2); }
.ag-foot-r { font-size: 12px; color: var(--texto-3); }
/* pergunta tu */
.ask { grid-area: side; align-self: end; display: flex; flex-direction: column; gap: 8px; position: relative; z-index: 2; }
.ask-label { font-size: .86rem; color: var(--texto-3); }
.ask-list { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ask-list button { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 13px 6px 11px; border-radius: 999px; border: 1px solid var(--traco-forte); background: rgba(17, 0, 67, .55); font-size: .86rem; color: var(--luz); cursor: pointer; text-align: left; transition: background-color .2s, border-color .2s; }
.ask-list button svg { width: 15px; height: 15px; color: var(--texto-3); flex: none; }
.ask-list button:hover { background: var(--superficie-2); border-color: rgba(228, 220, 255, .45); }
.ask-list button[disabled] { opacity: .5; cursor: default; }
/* troca de setor */
::view-transition-old(wa-chat), ::view-transition-old(ag-body) { animation: vt-out .28s ease both; }
::view-transition-new(wa-chat), ::view-transition-new(ag-body) { animation: vt-in .42s var(--ease-out) both; }
::view-transition-old(relogio-demo) { animation: clk-out .3s ease both; }
::view-transition-new(relogio-demo) { animation: clk-in .45s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; filter: blur(6px); transform: scale(.985); } }
@keyframes vt-in { from { opacity: 0; filter: blur(6px); transform: translateY(8px); } }
@keyframes clk-out { to { opacity: 0; transform: translateY(-35%); } }
@keyframes clk-in { from { opacity: 0; transform: translateY(35%); } }
/* =========================================================
   Responsivo
   ========================================================= */
@media (max-width: 1260px) {
  .atend { --ph-w: 270px; --ph-h: 566px; column-gap: 32px; grid-template-columns: var(--ph-w) minmax(0, 340px); }
  .node { grid-template-columns: 70px minmax(0, 1fr) auto; }
  .node:nth-child(even) .tile { margin-left: 24px; }
}
@media (max-width: 1100px) {
  .passos3__lista { grid-template-columns: 1fr; }
  .passos3__lista::before, .passos3__lista::after { left: 13px; right: auto; top: 14px; bottom: 14px; width: 1px; height: auto; transform-origin: 50% 0; transform: scaleY(var(--p, 1)); }
  .passos3__lista::after { background: linear-gradient(180deg, rgba(107, 83, 249, .4), #E4DCFF); }
  .passo .cartao { margin-left: 37px; }
}
@media (max-width: 720px) {
  .demo { order: 6; }
  .passos3__topo { flex-wrap: wrap; }
  /* demo de atendimento no telemóvel (dentro da folha) */
  .atend { --ph-h: 540px; --ph-w: min(300px, 100%); grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "topo" "agent" "phone" "side" "note"; width: 100%; row-gap: 14px; }
  .atend__topo { flex-direction: column; align-items: stretch; gap: 10px; }
  .atend__relogio { display: flex; align-items: baseline; gap: 12px; text-align: left; }
  .atend__relogio .clock { font-size: 1.9rem; }
  .atend__relogio small { margin: 0; max-width: none; }
  .atend .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; }
  .atend .chips::-webkit-scrollbar { display: none; }
  .atend .chips button { flex: none; }
  .stage-wires { display: none; }
  .agent { height: auto; }
  .phone { justify-self: center; }
  .ask { align-self: start; }
  .ag-head { padding: 10px 12px; }
  .ag-body { padding: 14px 12px 10px; flex: none; }
  .ag-nodes { flex-direction: row; justify-content: space-between; gap: 0; }
  .node { display: block; min-height: 0; }
  .node:nth-child(even) .tile { margin-left: 0; }
  .node .n-txt, .node .n-time { display: none; }
  .node .tile { width: 40px; height: 40px; }
  .ag-empty { position: static; height: 40px; }
  .ag-readout { display: flex; flex-direction: column; margin-top: 12px; min-height: 36px; line-height: 1.25; }
  .ag-readout b { font-size: 13.5px; font-weight: 600; }
  .ag-readout code { font: 400 12px/1.3 var(--f-texto); color: var(--texto-2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ag-foot { min-height: 38px; padding: 0 12px; font-size: 12px; }
}
@media (max-width: 400px) {
  .atend { --ph-w: 100%; }
}
.reduce .node[data-s="active"] .tile { animation: none; }
.demo > .atend { justify-content: center; }
/* a linha que liga os passos passa por trás dos títulos, não por cima */
@media (min-width: 1101px) {
  .passo__t { position: relative; padding-right: 12px; background: #0D0139; }
}
/* software à medida: três passos, do Excel a um sistema da empresa */
.sw { position: relative; margin: 0; width: 100%; aspect-ratio: 4 / 3; padding: 22px 22px; border-radius: 20px; border: 1px solid var(--traco-forte); background: rgba(243, 240, 255, .03); display: flex; align-items: center; }
.sw__passos { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; width: 100%; }
.sw__passos::before { content: ""; position: absolute; left: 48px; top: 30px; bottom: 30px; width: 1px; background: linear-gradient(180deg, rgba(107, 83, 249, .3), #E4DCFF 50%, rgba(107, 83, 249, .3)); box-shadow: 0 0 8px rgba(107, 83, 249, .7); }
.sw__passo { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 16px; transition: opacity .5s; }
.sw.anim .sw__passo { opacity: .45; }
.sw.anim .sw__passo.is-feito, .sw.anim .sw__passo.is-agora { opacity: 1; }
.sw__ilus { position: relative; z-index: 1; display: grid; width: 96px; height: 64px; padding: 7px; border-radius: 10px; background: var(--noite); border: 1px solid var(--traco-forte); transition: box-shadow .5s, border-color .5s; }
.sw__passo.is-agora .sw__ilus { border-color: #cfc6ff; box-shadow: 0 0 0 3px rgba(107, 83, 249, .2), 0 0 20px -2px rgba(143, 125, 255, .8); }
.sw__ilus i { display: block; border-radius: 2px; }
.sw__ilus--excel { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 3px; }
.sw__ilus--excel i { background: rgba(243, 240, 255, .1); border: 1px solid rgba(243, 240, 255, .12); }
.sw__ilus--excel i:nth-child(-n+4) { background: rgba(243, 240, 255, .22); }
.sw__ilus--excel i:nth-child(6), .sw__ilus--excel i:nth-child(11) { background: rgba(143, 125, 255, .35); }
.sw__passo.is-agora .sw__ilus--excel i:nth-child(6) { animation: copia 1.2s ease-in-out infinite; }
.sw__passo.is-agora .sw__ilus--excel i:nth-child(11) { animation: copia 1.2s ease-in-out .6s infinite; }
@keyframes copia { 50% { background: rgba(228, 220, 255, .75); } }
.sw__ilus--proto { grid-template-columns: 22px 1fr 1fr; grid-template-rows: 12px 1fr; gap: 4px; }
.sw__ilus--proto i { border: 1px dashed rgba(207, 198, 255, .6); border-radius: 3px; }
.sw__ilus--proto i:nth-child(1) { grid-row: 1 / 3; }
.sw__ilus--proto i:nth-child(2) { grid-column: 2 / 4; }
.sw__ilus--app { grid-template-columns: 22px 1fr 1fr 1fr; grid-template-rows: 12px 1fr; gap: 4px; }
.sw__ilus--app i { background: rgba(107, 83, 249, .45); border-radius: 3px; }
.sw__ilus--app i:nth-child(1) { grid-row: 1 / 3; background: #2a168f; }
.sw__ilus--app i:nth-child(2) { grid-column: 2 / 5; background: rgba(228, 220, 255, .55); }
.sw__ilus--app i:nth-child(4) { background: rgba(59, 224, 138, .55); }
.sw__txt { display: flex; align-items: baseline; gap: 10px; font-weight: 600; font-size: .98rem; line-height: 1.35; }
.sw__txt b { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; font: 700 .76rem/1 var(--f-display); background: var(--luz); color: var(--indigo); transform: translateY(-1px); }
.sw.anim .sw__passo:not(.is-feito):not(.is-agora) .sw__txt b { background: var(--noite); color: var(--texto-2); box-shadow: inset 0 0 0 1px var(--traco-forte); }
@media (max-width: 720px) {
  .sw { aspect-ratio: auto; }
  .sw { padding: 18px 16px; }
  .sw__passo { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
  .sw__ilus { width: 76px; height: 52px; padding: 5px; }
  .sw__passos::before { left: 38px; }
  .sw__txt { font-size: .92rem; }
}
.reduce .sw__ilus--excel i { animation: none !important; }