/* Meu CDN, TRAVESSIA v4, página DISPAROS: o momento assinatura (uma mensagem, a cidade inteira: a campanha sai e chega a
   cada celular de Ciudad del Este, com os vistos de enviada, entregue e lida) e os blocos próprios (API oficial × não
   oficial, relatório). Base = versão parada (estado final); html.mov = palco preso. O movimento está em
   assets/js/pg/disparos.js. Prefixo ds-. Meta só em texto; logos só os oficiais (.mc). */

.sv-meta .ds-wa { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 2px; border-radius: 50%; background: #fff; color: inherit; }
.sv-meta .ds-wa .mc { width: 14px; height: 14px; }

/* =========================================================================================================
   MOMENTO ASSINATURA: uma mensagem, a cidade inteira
   ========================================================================================================= */
.ds-cidade { position: relative; background: radial-gradient(60% 50% at 70% 30%, rgb(0 80 240 / .14), transparent 70%), #070312; }
.ds-cidade__palco { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "texto foto foto" "texto camp status"; gap: 20px 40px; max-width: 1320px; margin: 0 auto; padding: clamp(80px, 9vw, 128px) var(--lado) 24px; align-items: start; }
.ds-cidade__titulo { font-size: clamp(1.9rem, 3vw, 2.8rem); }
.ds-cidade__texto { grid-area: texto; }
.ds-cidade__passos { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 4px; counter-reset: p; }
.ds-cidade__passos li { position: relative; counter-increment: p; padding: 12px 0 12px 44px; border-top: 1px solid rgb(255 255 255 / .1); }
.ds-cidade__passos li::before { content: counter(p, decimal-leading-zero); position: absolute; left: 0; top: 14px; font: 800 .8rem/1 var(--fonte); letter-spacing: .1em; color: var(--magenta); }
.ds-cidade__passos b { display: block; font-size: 1.04rem; font-weight: 800; }
.ds-cidade__passos span { display: block; margin-top: 4px; color: var(--tinta-2); font-size: .94rem; line-height: 1.5; }
.ds-cidade__veu { display: none; }
.ds-cidade__nota { max-width: 1320px; margin: 0 auto; padding: 0 var(--lado) 56px; }

/* a vista do terraço: as três camadas do herói (céu, cidade com os pontos, parapeito) na mesma caixa */
.ds-cidade__foto { grid-area: foto; position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 18px; background: #0b0619; box-shadow: 0 0 0 1px rgb(255 255 255 / .12), 0 40px 90px -40px rgb(0 0 0 / .95); }
.ds-camada { position: absolute; left: -30%; top: -62%; width: 153.6%; height: 182%; }   /* parada: a caixa mostra o miolo da cidade (x 300 a 1300, y 350 a 912 da foto) */
.ds-camada img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }

/* cada ponto é um celular da cidade recebendo a mensagem: o ponto aceso e a bolha com os vistos */
.ds-pontos { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.ds-ponto { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.ds-ponto::after { content: ''; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #3ef08a; box-shadow: 0 0 0 3px rgb(37 211 102 / .28), 0 0 14px 2px rgb(37 211 102 / .85); }
.ds-ponto::before { content: ''; position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgb(62 240 138 / .9); opacity: 0; }
.ds-ponto__bolha { position: absolute; left: -3px; bottom: 9px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px 4px 5px; border-radius: 10px 10px 10px 3px; background: #fff; color: #1d1530; font: 800 .7rem/1 var(--fonte); white-space: nowrap; box-shadow: 0 8px 18px -8px rgb(0 0 0 / .85); transform-origin: 0 100%; }
.ds-ponto__bolha .mc { width: 12px; height: 12px; }
.ds-tique { color: #3aa9e0; letter-spacing: -.38em; padding-right: .38em; font-size: .74rem; }
.ds-tique b { font-weight: inherit; }
.ds-ponto--resp { z-index: 2; }
.ds-ponto--cel { display: none; }
.ds-ponto__resp { position: absolute; left: 8px; bottom: 34px; padding: 5px 9px; border-radius: 10px 10px 10px 3px; background: linear-gradient(135deg, #f3dcff, #dfe6ff); color: #1d1530; font: 700 .7rem/1.2 var(--fonte); white-space: nowrap; box-shadow: 0 10px 22px -10px rgb(0 0 0 / .9); transform-origin: 0 100%; }

/* a campanha (composição) */
.ds-camp { grid-area: camp; padding: 14px; border-radius: 16px; background: #fff; color: #1d1530; font-family: var(--fonte); box-shadow: 0 0 0 1px rgb(255 255 255 / .14), 0 40px 90px -40px rgb(0 0 0 / .95), 0 0 110px -40px rgb(240 0 208 / .45); }
.ds-camp__topo { display: flex; align-items: center; gap: 8px; font-size: .86rem; }
.ds-camp__topo .mc { width: 18px; height: 18px; }
.ds-camp__topo small { margin-left: auto; font: 700 .68rem/1.2 var(--fonte); color: #0c7a43; }
.ds-camp__nome { margin-top: 10px; }
.ds-camp__nome b { display: block; font-size: .98rem; line-height: 1.25; }
.ds-camp__nome span { display: block; margin-top: 2px; font-size: .74rem; color: #7d7393; }
.ds-camp__previa { position: relative; display: grid; justify-items: start; gap: 8px; margin-top: 10px; padding: 10px; border-radius: 12px; background: #f1edf7; }
.ds-camp__msg { justify-self: end; max-width: 92%; font-size: .82rem; }
.ds-ecos { display: none; }
.ds-camp__estado { margin-top: 10px; padding: 9px 10px; border-radius: 10px; background: var(--degrade); color: #fff; font: 800 .82rem/1.2 var(--fonte); text-align: center; transition: background .4s ease, color .4s ease; }
.ds-camp__estado > span { display: none; }
.ds-camp__estado[data-estado="0"] .ds-camp__e0, .ds-camp__estado[data-estado="1"] .ds-camp__e1, .ds-camp__estado[data-estado="fim"] .ds-camp__e2 { display: inline; }
.ds-camp__estado[data-estado="1"] { background: #efe6ff; color: #6a1fc0; }
.ds-camp__estado[data-estado="fim"] { background: #dcfbe9; color: #0c7a43; }
.ds-camp__estado[data-estado="fim"] .ds-camp__e2::before { content: '✓ '; }

/* o resultado (cartão escuro sobre a foto; sem backdrop-filter sobre o que se mexe) */
.ds-status { grid-area: status; padding: 14px 16px 14px; border-radius: 16px; background: rgb(14 7 32 / .9); border: 1px solid rgb(255 255 255 / .12); box-shadow: 0 40px 90px -40px rgb(0 0 0 / .95); }
.ds-status__topo b { display: block; font-size: .92rem; }
.ds-status__topo small { display: block; margin-top: 2px; color: var(--tinta-3); font-size: .72rem; }
.ds-status__lista { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.ds-status__lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 5px 10px; }
.ds-status__lista span { font: 700 .76rem/1.2 var(--fonte); color: var(--tinta-2); }
.ds-status__lista b { font: 800 1.12rem/1 var(--fonte); font-variant-numeric: tabular-nums; }
.ds-barra { grid-column: 1 / -1; position: relative; display: block; height: 6px; border-radius: 99px; background: rgb(255 255 255 / .1); overflow: hidden; }
.ds-barra i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #8b2be2, #0050f0); transform-origin: left; transform: scaleX(var(--v, 1)); }
.ds-barra--ok i { background: #25d366; }
.ds-barra--lida i { background: #3aa9e0; }
.ds-barra--resp i { background: var(--magenta); }
.ds-status__pe { margin-top: 12px; color: var(--tinta-3); font-size: .74rem; line-height: 1.4; }

/* ---------- com movimento: o palco preso ---------- */
html.mov .ds-cidade__palco { display: block; max-width: none; height: var(--alto); min-height: 640px; padding: 0; overflow: hidden; }
html.mov .ds-cidade__foto { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
html.mov .ds-camada { left: 0; top: 0; width: 100%; height: 100%; will-change: transform; transform: translateZ(0); backface-visibility: hidden; }
html.mov .ds-cidade__veu { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgb(7 3 18 / .92) 0%, rgb(7 3 18 / .76) 22%, rgb(7 3 18 / .24) 40%, rgb(7 3 18 / 0) 54%),
              linear-gradient(180deg, rgb(7 3 18 / .74) 0%, rgb(7 3 18 / .2) 26%, rgb(7 3 18 / 0) 40%), linear-gradient(0deg, rgb(7 3 18 / .5) 0%, rgb(7 3 18 / 0) 16%); }
html.mov .ds-cidade__texto { position: absolute; z-index: 3; left: var(--lado); top: calc(var(--cab) + 20px); bottom: 36px; width: min(400px, 28vw); display: flex; flex-direction: column; justify-content: center; }
html.mov .ds-cidade__passos li { opacity: .42; transition: opacity .4s ease; }
html.mov .ds-cidade__passos li.is-agora { opacity: 1; }
html.mov .ds-cidade__passos li.is-agora::before { color: #fff; text-shadow: 0 0 12px rgb(240 0 208 / .9); }
html.mov .ds-camp { position: absolute; z-index: 3; left: calc(var(--lado) + min(400px, 28vw) + 56px); top: calc(var(--cab) + 30px); width: 330px; will-change: transform, opacity; }
html.mov .ds-status { position: absolute; z-index: 3; right: var(--lado); top: calc(var(--cab) + 30px); width: 296px; will-change: transform, opacity; }
html.mov .ds-barra i { will-change: transform; }
html.mov .ds-ponto { opacity: 0; will-change: opacity; }
html.mov .ds-ponto__bolha { will-change: transform; }
html.mov .ds-tique { color: #8a93a6; transition: color .3s ease; }
html.mov .ds-tique b { opacity: 0; transition: opacity .25s ease; }
html.mov .ds-ponto.is-entregue .ds-tique b { opacity: 1; }
html.mov .ds-ponto.is-lida .ds-tique { color: #3aa9e0; }
html.mov .ds-ponto.is-chegou::before { animation: ds-onda 1s var(--saida); }
@keyframes ds-onda { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.6); } }
html.mov .ds-ponto__resp { opacity: 0; transform: translateY(8px) scale(.7); transition: opacity .35s ease, transform .55s var(--saida); }
html.mov .ds-ponto__resp.on { opacity: 1; transform: none; }
html.mov .ds-ecos { display: block; position: absolute; right: 22px; bottom: 30px; width: 0; height: 0; pointer-events: none; }
html.mov .ds-ecos i { position: absolute; right: 0; bottom: 0; width: 74px; height: 26px; border-radius: 13px 13px 13px 4px; opacity: 0; background: #fff; box-shadow: 0 0 0 1px rgb(37 211 102 / .35), 0 10px 24px -8px rgb(37 211 102 / .75); will-change: transform, opacity; }
html.mov .ds-ecos i .mc { position: absolute; left: 7px; top: 6px; width: 14px; height: 14px; }
html.mov .ds-ecos i::before, html.mov .ds-ecos i::after { content: ''; position: absolute; left: 27px; height: 4px; border-radius: 2px; background: #d6cfe3; }
html.mov .ds-ecos i::before { top: 7px; width: 38px; }
html.mov .ds-ecos i::after { top: 15px; width: 24px; }
html.mov .ds-cidade__nota { position: absolute; right: var(--lado); bottom: 10px; padding: 0; margin: 0; z-index: 3; }

/* =========================================================================================================
   POR QUE A API OFICIAL: os dois caminhos
   ========================================================================================================= */
.ds-api__obs { margin-top: 18px; padding-left: 14px; border-left: 3px solid var(--ambar); font-size: .98rem; }
.ds-api__cartoes { display: grid; gap: 14px; }
.ds-lado { padding: 18px 20px; border-radius: 16px; font-family: var(--fonte); }
.ds-lado__t { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 1rem; }
.ds-lado__t b { display: inline-flex; align-items: center; gap: 8px; }
.ds-lado__t .mc { width: 20px; height: 20px; }
.ds-lado--nao { background: rgb(255 255 255 / .04); border: 1px dashed rgb(255 255 255 / .2); color: var(--tinta-2); }
.ds-lado--nao .ds-lado__t b { color: var(--tinta); }
.ds-lado__txt { margin-top: 8px; font-size: .94rem; line-height: 1.5; }
.ds-lado--sim { position: relative; background: #fff; color: #1d1530; box-shadow: 0 0 0 1px rgb(255 255 255 / .14), 0 40px 90px -40px rgb(0 0 0 / .95), 0 0 110px -40px rgb(37 211 102 / .45); }
.ds-lado__lista { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.ds-lado__lista li { position: relative; padding-left: 28px; font-size: .92rem; line-height: 1.4; }
.ds-lado__lista li::before { content: ''; position: absolute; left: 0; top: .12em; width: 18px; height: 18px; border-radius: 50%; background: #25d366; }
.ds-lado__lista li::after { content: ''; position: absolute; left: 6px; top: calc(.12em + 4px); width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ds-lado__selo { margin-top: 14px; padding-top: 12px; border-top: 1px solid #ece6f5; font: 800 .78rem/1.2 var(--fonte); letter-spacing: .08em; text-transform: uppercase; color: #6a1fc0; }

/* =========================================================================================================
   RELATÓRIOS: a tela real do painel de disparos
   ========================================================================================================= */
.ds-rel__janela picture, .ds-rel__img { display: block; width: 100%; height: auto; }

/* =========================================================================================================
   COMPUTADOR MAIS ESTREITO
   ========================================================================================================= */
@media (min-width: 761px) and (max-width: 1180px) {
  .ds-cidade__palco { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "texto texto" "foto foto" "camp status"; }
  html.mov .ds-cidade__texto { width: min(330px, 30vw); }
  html.mov .ds-camp { left: calc(var(--lado) + min(330px, 30vw) + 32px); width: 290px; }
  html.mov .ds-status { top: auto; bottom: 34px; width: 260px; }
  .ds-camp__topo small { display: none; }
  .ds-cidade__passos span { font-size: .86rem; }
}

/* =========================================================================================================
   CELULAR (até 760 px ou tela em pé): layout próprio
   ========================================================================================================= */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .ds-cidade__palco { grid-template-columns: 1fr; grid-template-areas: "texto" "foto" "camp" "status"; padding: 72px 16px 16px; gap: 16px; }
  .ds-cidade__foto { aspect-ratio: 4 / 5; }
  .ds-cidade__foto .ds-camada { left: -30%; top: 0; width: 187.5%; height: 100%; }
  .ds-ponto__bolha { padding: 3px 5px 3px 4px; font-size: .58rem; gap: 3px; bottom: 7px; }
  .ds-ponto__bolha .mc { width: 10px; height: 10px; }
  .ds-tique { font-size: .62rem; }
  .ds-ponto__resp { font-size: .6rem; padding: 4px 7px; bottom: 26px; }
  .ds-cidade__nota { padding: 0 16px 40px; }

  html.mov .ds-cidade__palco { min-height: 600px; padding: 0; }
  html.mov .ds-cidade__foto .ds-camada { left: 0; top: 0; width: 100%; height: 100%; }
  html.mov .ds-cidade__veu { background: linear-gradient(180deg, rgb(7 3 18 / .94) 0%, rgb(7 3 18 / .82) 30%, rgb(7 3 18 / .1) 50%, rgb(7 3 18 / 0) 62%, rgb(7 3 18 / .5) 82%, rgb(7 3 18 / .9) 100%); }
  html.mov .ds-cidade__texto { left: 16px; right: 16px; top: calc(var(--cab) + 6px); bottom: auto; width: auto; display: block; }
  html.mov .ds-cidade__texto .rotulo { font-size: .66rem; }
  html.mov .ds-cidade__titulo { font-size: clamp(1.32rem, 5.9vw, 1.6rem); margin: 6px 0 8px; }
  html.mov .ds-cidade__passos { position: relative; height: 4.6em; margin: 0; }
  html.mov .ds-cidade__passos li { position: absolute; inset: 0; padding: 0 0 0 30px; border: 0; opacity: 0; }
  html.mov .ds-cidade__passos li.is-agora { opacity: 1; }
  html.mov .ds-cidade__passos li::before { top: 2px; }
  html.mov .ds-cidade__passos b { font-size: .9rem; }
  html.mov .ds-cidade__passos span { font-size: .8rem; line-height: 1.38; margin-top: 2px; }
  html.mov .ds-camp { left: 16px; right: 16px; top: calc(var(--cab) + 168px); width: auto; padding: 10px 12px; }
  html.mov .ds-camp__nome, html.mov .ds-camp__estado { display: none; }
  html.mov .ds-camp__topo { font-size: .8rem; }
  html.mov .ds-camp__previa { margin-top: 8px; padding: 8px; gap: 6px; }
  html.mov .ds-camp__msg { font-size: .74rem; padding: 7px 10px 6px; }
  html.mov .ds-ecos { right: 18px; bottom: 18px; }
  html.mov .ds-ecos i { width: 54px; height: 20px; }
  html.mov .ds-ecos i .mc { left: 5px; top: 4px; width: 12px; height: 12px; }
  html.mov .ds-ecos i::before { left: 21px; top: 5px; width: 26px; }
  html.mov .ds-ecos i::after { left: 21px; top: 11px; width: 16px; }
  .ds-ponto--cel { display: block; }
  .ds-ponto--pc { display: none; }
  html.mov .ds-status { left: 16px; right: 16px; top: auto; bottom: 70px; width: auto; padding: 10px 12px; }   /* o pé fica livre para o selo fixo */
  html.mov .ds-status__topo, html.mov .ds-status__pe { display: none; }
  html.mov .ds-status__lista { margin: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  html.mov .ds-status__lista li { grid-template-columns: 1fr; gap: 3px; }
  html.mov .ds-status__lista span { font-size: .6rem; }
  html.mov .ds-status__lista b { font-size: .92rem; }
  html.mov .ds-barra { height: 4px; }
  html.mov .ds-cidade__nota { display: none; }
}