/* ═══════════════════════════════════════════════════════════════════════════
   PAC além do AASI · painel de despacho de WhatsApp
   ATO 3 — composição. Os tokens estão no <style> crítico do index.html.
   Arco: barra de comando (linear densa) → segmentação (bloco com barra lateral)
         → régua (galeria horizontal) → 7 cards (grid assimétrico) → rodapé (fios).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── base e acabamento global ─────────────────────────────────────────────── */
::selection{background:var(--roxo);color:var(--on-roxo)}
:focus-visible{outline:2px solid var(--roxo);outline-offset:2px;border-radius:2px}
.barra :focus-visible{outline-color:var(--bar-ink)}
.ss{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
img{max-width:100%}
button{font:inherit;color:inherit}

.barra,.aviso,.regua,.disparo,.rodape{animation:sobe 520ms var(--ease) both}
.aviso{animation-delay:70ms} .regua{animation-delay:130ms}
.disparo:nth-child(1){animation-delay:190ms} .disparo:nth-child(2){animation-delay:240ms}
.disparo:nth-child(3){animation-delay:290ms} .disparo:nth-child(4){animation-delay:330ms}
.disparo:nth-child(5){animation-delay:360ms} .disparo:nth-child(6){animation-delay:390ms}
.disparo:nth-child(7){animation-delay:410ms} .rodape{animation-delay:440ms}
@keyframes sobe{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ── DOBRA 1 · barra de comando ───────────────────────────────────────────── */
.barra{position:sticky;top:0;z-index:50;background:var(--bar-bg);color:var(--bar-ink);
       border-bottom:1px solid rgba(0,0,0,.25)}
.barra-in{max-width:1240px;margin:0 auto;padding:13px 20px;display:grid;
          grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:center;gap:10px 32px}

.marca .kicker{font:600 10px/1 var(--mono);text-transform:uppercase;letter-spacing:.2em;
               color:var(--bar-dim);margin-bottom:7px}
.marca h1{font-size:clamp(1.2rem,2.4vw,1.55rem);font-weight:800;line-height:1.06;
          letter-spacing:-.015em;color:var(--bar-ink)}
.quando{font:500 11.5px/1 var(--mono);color:var(--bar-ink);margin-top:7px;
        display:flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums}
.quando i{font-style:normal;color:var(--bar-dim)}

.links{list-style:none;margin:0;padding:0;display:grid;gap:5px;justify-self:end;
       min-width:min(100%,450px);max-width:100%}
.link{display:grid;grid-template-columns:98px minmax(0,1fr) auto;align-items:center;gap:12px}
.link-rot{font:600 9.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;
          color:var(--bar-dim);white-space:nowrap}
.link-url{font:400 11px/1.3 var(--mono);color:var(--bar-ink);text-decoration:none;
          white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
          border-bottom:1px dotted var(--bar-line);padding-bottom:2px;
          transition:border-color var(--t) var(--ease)}
.link-url:hover{border-bottom-color:var(--bar-ink)}

.mini{font:600 10px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;
      padding:0 11px;min-height:28px;background:transparent;color:var(--bar-ink);
      border:1px solid var(--bar-line);border-radius:7px;cursor:pointer;
      transition:background var(--t) var(--ease),border-color var(--t) var(--ease),color var(--t) var(--ease)}
.mini:hover{border-color:var(--bar-ink);background:rgba(255,255,255,.08)}
.mini.ok{background:var(--bar-ink);border-color:var(--bar-ink);color:var(--bar-bg)}

/* ── DOBRA 2 · segmentação ────────────────────────────────────────────────── */
.aviso{max-width:1240px;margin:22px auto 0;padding:15px 20px 16px 20px;
       background:var(--roxo-tint);border:1px solid var(--roxo-line);
       border-left:6px solid var(--roxo);border-radius:var(--r-card)}
.aviso h2{font:700 11.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.16em;
          color:var(--roxo);margin-bottom:9px}
.aviso p{font-size:14.5px;line-height:1.58;max-width:96ch;color:var(--ink)}
.aviso b{font-weight:800;color:var(--roxo);letter-spacing:.01em}
.aviso em{font-style:normal;font-weight:700;color:var(--ink);
          border-bottom:2px solid var(--roxo);padding-bottom:1px}

/* ── DOBRA 3 · régua ──────────────────────────────────────────────────────── */
.regua{max-width:1240px;margin:20px auto 0;padding:0 20px;
       display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:11px 18px}
.regua-t{grid-row:1;grid-column:1;display:flex;flex-direction:column;gap:4px;
         font:700 11.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.16em;color:var(--ink)}
.regua-t i{font:400 10px/1 var(--mono);letter-spacing:.06em;text-transform:none;
           color:var(--ink-muted);font-style:normal;font-variant-numeric:tabular-nums}
.chips{grid-row:2;grid-column:1/-1;list-style:none;margin:0;padding:2px 2px 4px;display:flex;
       flex-wrap:wrap;gap:8px;scrollbar-width:thin}
.chips>li{flex:1 1 116px;max-width:190px;display:flex}
.chip{flex:1 1 auto;display:grid;grid-template-columns:auto auto;align-items:center;gap:0 10px;
      text-decoration:none;padding:7px 12px 8px;background:var(--card);
      border:1px solid var(--rule);border-radius:var(--r-ctl);
      font-variant-numeric:tabular-nums;
      transition:border-color var(--t) var(--ease),transform var(--t) var(--ease)}
.chip:hover{border-color:var(--roxo);transform:translateY(-2px)}
.chip b{grid-row:1/3;font:800 22px/1 var(--mono);color:var(--roxo);letter-spacing:-.03em}
.chip span{font:700 12.5px/1.2 var(--mono);color:var(--ink)}
.chip i{font:400 11px/1.2 var(--mono);font-style:normal;color:var(--ink-muted)}
.chip em{grid-column:2;font:700 8.5px/1 var(--mono);font-style:normal;text-transform:uppercase;
         letter-spacing:.1em;padding:3px 5px;border-radius:2px;margin-top:5px;justify-self:start}
.pt-c{background:var(--roxo);color:var(--on-roxo)}
.pt-l{background:transparent;color:var(--roxo);border:1px solid var(--roxo-line);padding:2px 4px}
.chip--vivo{border-color:var(--vivo-line)}
.chip--vivo b{color:var(--vivo)}
.chip--vivo:hover{border-color:var(--vivo)}
.mini--forte{grid-row:1;grid-column:2;justify-self:end;
             color:var(--roxo);border-color:var(--roxo);background:var(--card);
             min-height:38px;padding:0 16px;font-size:11px;font-weight:700}
.mini--forte:hover{background:var(--roxo);color:var(--on-roxo);border-color:var(--roxo)}
.mini--forte.ok{background:var(--roxo);border-color:var(--roxo);color:var(--on-roxo)}

/* ── DOBRA 4 · os sete cards ──────────────────────────────────────────────── */
.sequencia{max-width:1240px;margin:18px auto 0;padding:0 20px;display:grid;gap:22px}
.disparo{position:relative;background:var(--card);border:1px solid var(--rule);
         border-radius:var(--r-card);box-shadow:var(--sh);overflow:hidden;
         scroll-margin-top:calc(var(--bar-h,120px) + 16px)}
/* os dois cards de go-live ganham o fio vermelho no topo — único uso da cor */
.disparo--vivo::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
                       background:var(--vivo);z-index:2}
/* quem chega pela régua vê onde caiu */
.disparo:target{border-color:var(--roxo);box-shadow:0 0 0 2px var(--roxo-line),var(--sh)}

/* a faixa de despacho — o gesto de assinatura */
.despacho{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;
          min-height:96px;padding:14px 22px 14px clamp(78px,11vw,158px);
          background:var(--paper);border-bottom:1px solid var(--rule)}
.num{position:absolute;left:16px;top:50%;transform:translateY(-50%);
     font:900 clamp(3.4rem,9vw,7rem)/.74 var(--ui);letter-spacing:-.05em;
     color:var(--num);pointer-events:none;user-select:none;font-variant-numeric:tabular-nums}
.quando-c{flex:0 1 auto}
.quando-c time{font:700 clamp(1.05rem,2.1vw,1.4rem)/1.1 var(--mono);letter-spacing:-.02em;
               color:var(--ink);font-variant-numeric:tabular-nums;display:inline-flex;
               align-items:baseline;gap:9px}
.quando-c time i{font-style:normal;color:var(--roxo);font-weight:400}

.etiq{margin-left:auto;display:inline-flex;align-items:center;gap:8px;
      font:700 10px/1 var(--mono);text-transform:uppercase;letter-spacing:.11em;
      padding:7px 11px;border-radius:2px}
.etiq b{font-weight:400;letter-spacing:.06em;opacity:.85}
.etiq i{font-style:normal;font-weight:400;text-transform:none;letter-spacing:.02em;opacity:.72}
.etiq--compradoras{background:var(--roxo);color:var(--on-roxo)}
.etiq--leads{background:transparent;color:var(--roxo);border:1.5px solid var(--roxo)}
.vivo{display:inline-flex;align-items:center;gap:7px;font:800 10px/1 var(--mono);
      text-transform:uppercase;letter-spacing:.14em;color:var(--vivo)}
.vivo::before{content:"";width:8px;height:8px;background:var(--vivo);border-radius:1px}
.vivo em{font-style:normal;font-weight:400;letter-spacing:.06em;opacity:.8}

.objetivo{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
          padding:11px 22px;border-bottom:1px dashed var(--rule)}
.objetivo span{font:700 9.5px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.16em;
               color:var(--roxo);flex:0 0 auto}
.objetivo em{font-style:normal;font-size:13.5px;line-height:1.5;color:var(--ink-muted);flex:1 1 320px}

.corpo{display:grid;grid-template-columns:minmax(0,1fr) 356px;gap:30px;padding:20px 22px 22px}

/* a coluna de texto fica na medida de leitura (70ch) e o resto é ar deliberado —
   o seletor e a contagem alinham no mesmo eixo direito da prévia */
.topo-texto{display:flex;align-items:center;justify-content:space-between;gap:14px;
            margin-bottom:13px;max-width:70ch}
.seg{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--roxo-line);
     border-radius:var(--r-ctl);background:transparent}
.seg-b{font:600 10.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.11em;
       padding:0 15px;min-height:30px;border:0;background:transparent;color:var(--ink-muted);
       border-radius:7px;cursor:pointer;transition:background var(--t) var(--ease),color var(--t) var(--ease)}
.seg-b:hover{color:var(--ink)}
.seg-b.is-on{background:var(--roxo);color:var(--on-roxo);font-weight:700}
.conta{font:400 11.5px/1 var(--mono);color:var(--ink-muted);font-variant-numeric:tabular-nums;
       white-space:nowrap}
.conta b{font-weight:700;color:var(--ink);font-size:13px}

.previa{white-space:pre-wrap;text-wrap:pretty;overflow-wrap:anywhere;font-size:14.5px;line-height:1.62;
        color:var(--ink);background:var(--paper);border:1px solid var(--rule);
        border-left:3px solid var(--roxo);border-radius:0 var(--r-card) var(--r-card) 0;
        padding:16px 18px;max-width:70ch;min-height:96px}
.previa strong{font-weight:700}
.previa .u{font-family:var(--mono);font-size:12.5px;color:var(--roxo);letter-spacing:-.01em}
.previa .bt{display:inline-block;font:700 10px/1 var(--mono);letter-spacing:.1em;
            background:var(--roxo);color:var(--on-roxo);padding:4px 7px;border-radius:2px;
            vertical-align:1px}

.copiar{margin-top:15px;width:100%;max-width:326px;min-height:46px;background:var(--roxo);
        color:var(--on-roxo);border:1.5px solid var(--roxo);border-radius:var(--r-ctl);
        font:800 13px/1 var(--ui);letter-spacing:.02em;cursor:pointer;
        transition:background var(--t) var(--ease),transform var(--t) var(--ease),
                   box-shadow var(--t) var(--ease),color var(--t) var(--ease)}
.copiar:hover{background:var(--roxo-hi);border-color:var(--roxo-hi);transform:translateY(-1px);
              box-shadow:0 10px 20px -10px rgba(45,20,86,.6)}
.copiar:active{transform:translateY(0)}
.copiar.ok{background:transparent;color:var(--roxo);border-color:var(--roxo);
           transform:none;box-shadow:none}

.lado-arte{margin:0;display:flex;flex-direction:column;gap:9px}
.thumb{display:block;padding:0;line-height:0;background:var(--paper);cursor:zoom-in;
       border:1px solid var(--rule);border-radius:var(--r-card);overflow:hidden;
       transition:border-color var(--t) var(--ease)}
.thumb:hover{border-color:var(--roxo)}
.thumb img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
           object-position:center}
.baixar{display:block;text-align:center;min-height:40px;line-height:37px;
        border:1.5px solid var(--roxo);color:var(--roxo);background:transparent;
        border-radius:var(--r-ctl);font:700 12px/37px var(--ui);letter-spacing:.02em;
        text-decoration:none;transition:background var(--t) var(--ease),color var(--t) var(--ease)}
.baixar:hover{background:var(--roxo);color:var(--on-roxo)}
.lado-arte figcaption{display:flex;justify-content:space-between;gap:10px;
                      font:400 10px/1.3 var(--mono);color:var(--ink-muted);
                      font-variant-numeric:tabular-nums}
.lado-arte figcaption i{font-style:normal;opacity:.75;white-space:nowrap}

/* ── DOBRA 5 · rodapé ─────────────────────────────────────────────────────── */
.rodape{max-width:1240px;margin:30px auto 0;padding:22px 20px 52px;
        border-top:1px solid var(--rule);display:grid;gap:9px}
.nota{font-size:12.5px;line-height:1.6;color:var(--ink-muted);max-width:88ch}
.nota b{font:600 11.5px/1 var(--mono);color:var(--roxo);background:var(--roxo-tint);
        padding:2px 6px;border-radius:2px}
.assin{margin-top:8px;font:600 10px/1 var(--mono);text-transform:uppercase;letter-spacing:.16em;
       color:var(--ink-muted);display:flex;gap:10px;align-items:center}
.assin i{font-style:normal;opacity:.7;letter-spacing:.1em}

/* ── lupa e aviso de cópia ────────────────────────────────────────────────── */
.lupa{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
      padding:26px;background:rgba(18,14,28,.95);animation:apaga 180ms var(--ease) both}
.lupa[hidden]{display:none}
@keyframes apaga{from{opacity:0}to{opacity:1}}
.lupa img{width:auto;height:auto;max-width:min(92vw,720px);max-height:86vh;
          border-radius:var(--r-card);box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.lupa-x{position:absolute;top:16px;right:16px;font:600 10px/1 var(--mono);text-transform:uppercase;
        letter-spacing:.12em;padding:0 14px;min-height:34px;background:transparent;color:#F9F8F8;
        border:1px solid rgba(249,248,248,.42);border-radius:var(--r-ctl);cursor:pointer;
        transition:background var(--t) var(--ease)}
.lupa-x:hover{background:rgba(249,248,248,.14)}

.toast{position:fixed;left:50%;bottom:24px;z-index:120;margin:0;
       transform:translateX(-50%) translateY(14px);opacity:0;pointer-events:none;
       background:var(--ink);color:var(--paper);font:700 10.5px/1 var(--mono);
       text-transform:uppercase;letter-spacing:.1em;padding:12px 20px;border-radius:var(--r-ctl);
       box-shadow:0 18px 34px -20px rgba(0,0,0,.7);
       transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── responsivo ───────────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .corpo{grid-template-columns:minmax(0,1fr) 268px;gap:22px}
}
@media (max-width:1040px){
  .barra-in{grid-template-columns:minmax(0,1fr);gap:12px}
  .links{justify-self:stretch;min-width:0}
  .link{grid-template-columns:92px minmax(0,1fr) auto}
  .topo-texto,.previa{max-width:none}
}
@media (max-width:820px){
  .corpo{grid-template-columns:minmax(0,1fr);gap:18px;padding:18px}
  .lado-arte{display:grid;grid-template-columns:132px minmax(0,1fr);gap:10px 14px;align-items:start}
  .lado-arte figcaption{grid-column:2;flex-direction:column;gap:3px;align-self:start}
  .baixar{grid-column:2;align-self:start}
  .thumb{grid-row:1/3}
  .previa{max-width:none}
  .copiar{max-width:none}
}
@media (max-width:640px){
  body{font-size:14.5px}
  .marca .kicker{display:none}
  .marca h1{font-size:1.15rem}
  .quando{margin-top:5px;font-size:10.5px}
  .barra-in{padding:10px 16px;gap:9px}
  /* os três links viram trilho horizontal: rótulo, abrir e copiar numa linha só */
  .links{display:flex;gap:7px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
  .links::-webkit-scrollbar{display:none}
  .link{grid-template-columns:auto auto auto;gap:9px;flex:0 0 auto;align-items:center;
        border:1px solid var(--bar-line);border-radius:7px;padding:4px 5px 4px 10px}
  .link-rot{font-size:9px}
  .link-url{font-size:0;border:0;padding:0}
  .link-url::after{content:"Abrir";font:600 9px/1 var(--mono);text-transform:uppercase;
                   letter-spacing:.1em;color:var(--bar-dim);border-bottom:1px solid var(--bar-line);
                   padding-bottom:2px}
  .mini{font-size:9px;padding:0 9px;min-height:26px}
  .aviso,.regua,.sequencia,.rodape{padding-left:16px;padding-right:16px}
  .aviso{margin-top:16px}
  .aviso p{font-size:14px}
  /* no estreito o numeral entra no fluxo, ao lado da data — some o risco de colisão */
  .regua{grid-template-columns:minmax(0,1fr);gap:10px}
  .chips{flex-wrap:nowrap;overflow-x:auto;padding-right:14px}
  .chips>li{flex:0 0 122px}
  .mini--forte{grid-row:3;grid-column:1;justify-self:stretch;min-height:42px}
  .despacho{min-height:0;padding:12px 16px;gap:9px 13px}
  .num{position:static;transform:none;left:auto;top:auto;font-size:2.9rem;line-height:.78;
       flex:0 0 auto}
  .quando-c{flex:1 1 auto}
  .quando-c time{font-size:1.1rem}
  .etiq{flex:1 1 100%;margin-left:0;flex-wrap:wrap;gap:3px 8px;font-size:9px;padding:6px 9px}
  .vivo{flex:0 0 auto}
  .objetivo{padding:10px 16px}
  .objetivo em{flex:1 1 100%}
  .previa{padding:14px 15px;font-size:14px}
  .lado-arte{grid-template-columns:118px minmax(0,1fr)}
  .rodape{padding-bottom:40px}
}