/* Artesania Atende — só o que é desta página (tela de bloqueio, linha do tempo, simulação de conversa, faz/não faz).
   Carregar DEPOIS do artesania.css. Cor do serviço (verde-folha): var(--cor-servico) / --cor-servico-texto. */

.fatos { list-style: none; margin: var(--e5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .95rem; color: var(--grafite-2); }
.fatos li { display: inline-flex; align-items: center; gap: 7px; }
.fatos svg { width: 18px; height: 18px; color: var(--cor-servico-texto); }

/* ---------- hero: tela de bloqueio com notificações respondidas (ilustração) ---------- */
.bloqueio-cena { position: relative; max-width: 400px; width: 100%; margin: 0 auto; display: grid; justify-items: center; gap: 12px; }
.bloqueio-cena::before { content: ""; position: absolute; width: 74%; aspect-ratio: 1; right: -10%; top: -6%; border-radius: 50%; background: var(--cor-servico) var(--ponto-cruz-claro); opacity: .9; }
.bloqueio { position: relative; width: 100%; border-radius: 30px; padding: 24px 16px 16px; background: var(--grafite); border: 1px solid rgba(243, 237, 226, .14); box-shadow: 0 2px 6px rgba(30,31,36,.12), 0 30px 60px -22px rgba(30,31,36,.55); color: var(--linho); }
.bloqueio-topo { text-align: center; margin-bottom: 18px; }
.bloqueio-topo span { display: block; font-size: .9rem; color: #C9CBD2; }
.bloqueio-topo strong { display: block; font: 500 3.6rem/1 var(--f-maquina); letter-spacing: -.04em; }
.notifs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.notif { display: grid; grid-template-columns: 34px 1fr; gap: 4px 11px; align-items: start; background: rgba(243, 237, 226, .09); border: 1px solid rgba(243, 237, 226, .1); border-radius: 16px; padding: 12px 13px; font-size: .95rem; line-height: 1.35; animation: chega .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.35s + var(--i) * .55s); }
.notif-ic { grid-row: span 2; width: 34px; height: 34px; border-radius: 10px; background: var(--cor-servico); display: grid; place-items: center; color: #FFFFFF; }
.notif-ic svg { width: 20px; height: 20px; }
.notif-corpo b { display: block; font-size: .78rem; font-weight: 600; color: #C9CBD2; }
.notif-ok { justify-self: start; display: inline-flex; align-items: center; gap: 4px; background: var(--linho); color: var(--atende-texto); font: 600 .74rem/1 var(--f-voz); border-radius: 999px; padding: 4px 9px 4px 6px; animation: carimbo .45s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(1s + var(--i) * .55s); }
.notif-ok svg { width: 13px; height: 13px; }
.bloqueio-rodape { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px 0 2px; font-size: .88rem; color: #C9CBD2; }
.bloqueio-rodape svg { width: 17px; height: 17px; color: var(--linha-clara); }
@keyframes chega { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes carimbo { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }

/* ---------- problema: linha do tempo + perguntas ---------- */
.problema-grid { display: grid; gap: var(--e6); }
@media (min-width: 900px) { .problema-grid { grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: start; } }
.linha-tempo { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; display: grid; gap: 26px; }
.linha-tempo::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: repeating-linear-gradient(var(--borda) 0 6px, transparent 6px 11px); }
.linha-tempo li { position: relative; }
.linha-tempo li::before { content: ""; position: absolute; left: -26px; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: var(--linho); border: 3px solid var(--cor-servico); }
.linha-tempo li:last-child::before { border-color: var(--linha); }
.hora { display: block; font-size: 1.05rem; color: var(--cor-servico-texto); margin-bottom: 8px; }
.linha-tempo li:last-child .hora { color: var(--linha-escura); }
.lt-balao { display: inline-block; max-width: 340px; padding: 12px 16px; border-radius: 16px 16px 16px 6px; line-height: 1.4; }
.lt-cliente { background: var(--branco); box-shadow: var(--sombra); }
.lt-outro { background: #FBE3DD; color: #7A2416; font-weight: 600; border-radius: 16px 16px 6px 16px; }
.lt-vazio { display: inline-flex; gap: 6px; padding: 16px 18px; border-radius: 16px; background: var(--linho-2); border: 1px dashed var(--borda); }
.lt-vazio span { width: 8px; height: 8px; border-radius: 50%; background: #9A9DA6; animation: pisca 1.4s 3; }
.lt-vazio span:nth-child(2) { animation-delay: .2s; }
.lt-vazio span:nth-child(3) { animation-delay: .4s; }
@keyframes pisca { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
.lt-nota { margin: 8px 0 0; color: var(--grafite-2); font-size: .98rem; }
.perguntas p { color: var(--grafite-2); }
.chips-perguntas { list-style: none; margin: var(--e4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips-perguntas li { background: #E3F0EA; color: #1E4D38; font-weight: 600; font-size: .94rem; padding: 7px 13px; border-radius: 14px 14px 14px 4px; }
.chips-perguntas li:nth-child(3n+2) { background: var(--linho); color: var(--grafite); }

/* ---------- simulação de conversa ---------- */
.sim-grid { display: grid; gap: var(--e7); align-items: center; }
@media (min-width: 960px) { .sim-grid { grid-template-columns: 1fr 400px; gap: 72px; } }
.sim-intro { color: #C9CBD2; }
.sim-abas { display: grid; gap: 10px; margin: var(--e5) 0 var(--e4); }
.sim-aba { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: rgba(243, 237, 226, .05); border: 1.5px solid rgba(243, 237, 226, .16); color: var(--linho); border-radius: var(--raio-g); padding: 13px 16px; cursor: pointer; font: inherit; }
.sim-aba svg { width: 24px; height: 24px; flex: none; color: var(--linho); }
.sim-aba b { display: block; font-weight: 600; }
.sim-aba small { display: block; color: #C9CBD2; font-size: .86rem; }
.sim-aba:hover { background: rgba(243, 237, 226, .1); }
.sim-aba[aria-selected="true"] { background: var(--cor-servico); border-color: var(--cor-servico); color: #FFFFFF; }
.sim-aba[aria-selected="true"] svg { color: #FFFFFF; }
.sim-aba[aria-selected="true"] small { color: #FFFFFF; }
.sim-aba:focus-visible { outline-color: var(--linha-clara); }
.sim-legenda { color: #C9CBD2; font-size: .98rem; min-height: 3em; margin: 0; }
.sim-celular { width: 100%; max-width: 380px; margin: 0 auto; display: grid; justify-items: center; gap: 12px; }
.celular-chat { width: 100%; border-radius: 34px; padding: 10px; background: #111216; box-shadow: 0 0 0 1.5px rgba(243, 237, 226, .16), 0 30px 60px -24px rgba(0, 0, 0, .6); }
.chat-topo { display: flex; align-items: center; gap: 10px; background: var(--cor-servico); color: #FFFFFF; padding: 14px 16px; border-radius: 26px 26px 0 0; }
.chat-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--linho); color: var(--atende-texto); font: 600 .9rem var(--f-voz); }
.chat-nome b { display: block; font-size: 1rem; line-height: 1.2; }
.chat-nome small { display: block; font-size: .8rem; color: #FFFFFF; }
.chat { height: 430px; overflow-y: auto; overscroll-behavior: contain; padding: 16px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--linho) var(--ponto-cruz); }
.chat-sem-js { color: var(--grafite-2); font-size: .95rem; text-align: center; margin: auto; }
.msg { max-width: 84%; padding: 8px 12px 6px; border-radius: 14px; font-size: .95rem; line-height: 1.42; color: var(--grafite); box-shadow: 0 1px 1px rgba(30,31,36,.08); animation: entra .35s cubic-bezier(.2, .8, .2, 1) both; }
.msg p { margin: 0; }
.msg time { display: block; text-align: right; font: 500 .68rem var(--f-maquina); color: var(--cinza); margin-top: 2px; }
.msg-cliente { align-self: flex-end; background: #DDEFE6; border-bottom-right-radius: 4px; }
.msg-atende, .msg-pessoa { align-self: flex-start; background: var(--branco); border-bottom-left-radius: 4px; }
.msg-quem { display: block; font-size: .74rem; font-weight: 600; color: var(--atende-texto); margin-bottom: 1px; }
.msg-pessoa .msg-quem { color: var(--anil); }
.msg-sistema { align-self: center; background: rgba(38, 64, 139, .1); color: var(--anil); font-size: .8rem; font-weight: 600; border-radius: 999px; padding: 4px 12px; animation: entra .35s ease both; }
.digitando { align-self: flex-start; background: var(--branco); border-radius: 14px; border-bottom-left-radius: 4px; padding: 12px 14px; display: flex; gap: 5px; }
.digitando span { width: 7px; height: 7px; border-radius: 50%; background: #9A9DA6; animation: pisca 1.2s infinite; }
.digitando span:nth-child(2) { animation-delay: .15s; }
.digitando span:nth-child(3) { animation-delay: .3s; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.chat-rodape { display: flex; gap: 8px; align-items: center; background: var(--linho); padding: 8px 10px 12px; border-radius: 0 0 26px 26px; }
.chat-campo { flex: 1; background: var(--branco); border-radius: 999px; padding: 10px 16px; color: var(--cinza); font-size: .92rem; }
.chat-repetir { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--cor-servico); color: #FFFFFF; display: grid; place-items: center; cursor: pointer; flex: none; }
.chat-repetir svg { width: 20px; height: 20px; }

/* ---------- faz / não faz ---------- */
.faz-grid { max-width: 980px; margin: 0 auto; }
.faz { border-top: 5px solid var(--cor-servico); }
.faz-nao-bloco { border-top-color: var(--linha); }
.faz h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.faz-selo { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.faz-selo svg { width: 20px; height: 20px; }
.faz-sim { background: #E3F0EA; color: var(--cor-servico-texto); }
.faz-nao { background: #FBE3DD; color: var(--linha-escura); }
.faz ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.faz li { position: relative; padding-left: 22px; color: var(--grafite-2); }
.faz li::before { content: ""; position: absolute; left: 1px; top: .55em; width: 10px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5l3.2 3.2L12 3.5' fill='none' stroke='%232E7D5B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.faz-nao-bloco li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 3l8 8M11 3l-8 8' stroke='%23D2452F' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* ---------- preços: extras ---------- */
.itens .obs { display: block; font-size: .85rem; color: var(--cinza); margin-top: 2px; }
.nota-meta { display: flex; gap: 14px; align-items: flex-start; max-width: 920px; margin: var(--e6) auto 0; padding: 18px 20px; background: var(--linho); border-radius: var(--raio-g); border-left: 4px solid var(--cor-servico); color: var(--grafite-2); }
.nota-meta svg { width: 24px; height: 24px; flex: none; color: var(--cor-servico-texto); margin-top: 2px; }
.nota-meta p { margin: 0; font-size: .97rem; }