/* NÃO EDITAR: _compartilhado/_elementos/d; sincronizar.cjs. */
/* Antes e depois: camadas sobrepostas em subgrid; o depois aparece à esquerda do divisor. */
.cw-d-ad-cena{position:relative;display:grid;grid-template-columns:minmax(0,1fr);container-type:inline-size;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none;border-radius:var(--d-raio-p);overflow:hidden;border:1px solid color-mix(in srgb,var(--d-linha) 80%,transparent);min-height:300px}
.cw-d-ad-lado{grid-row:1/-1;grid-column:1;display:grid;grid-template-rows:subgrid;row-gap:12px;padding:22px clamp(16px,3vw,30px) 28px;position:relative;z-index:1}
.cw-d-ad-lado ol{grid-row:2/-1;display:grid;grid-template-rows:subgrid;row-gap:12px}
.cw-d-ad-rot{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px}
.cw-d-ad-tag{font:600 12px/1 var(--d-mono);letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;border-radius:999px;background:var(--d-tinta);color:var(--d-papel)}
.cw-d-ad-lado li{display:flex;align-items:flex-start;gap:12px;align-self:center;max-width:74%;padding:12px 16px;border-radius:var(--d-raio-p);font-size:15px;line-height:1.4}
.cw-d-ad-ico{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-weight:800;font-size:13px}
.cw-d-ad-antes{background:#f3eee4;color:#4a4136}
.cw-d-ad-antes .cw-d-ad-rot{justify-content:flex-end}
.cw-d-ad-antes .cw-d-ad-tag{background:#6b5f50}
.cw-d-ad-antes li{justify-self:end;background:#fffaf1;border:1.5px dashed #b9a98f;transform:rotate(var(--r)) translateX(var(--dx));box-shadow:0 6px 14px #4a413614}
.cw-d-ad-antes .cw-d-ad-ico{background:var(--d-alerta-fundo);color:var(--d-alerta)}
.cw-d[data-cw-motion] .cw-d-ad-antes .cw-d-ad-ico{animation:cw-d-ad-pisca 2.6s ease-in-out infinite}
.cw-d-ad-antes li:nth-child(2n) .cw-d-ad-ico{animation-delay:-1.3s}
.cw-d-ad-depois{z-index:2;background:var(--d-alt);clip-path:inset(0 calc(100% - var(--v) * 1%) 0 0)}
.cw-d-ad-depois::before{content:"";position:absolute;left:clamp(27px,calc(3vw + 11px),41px);top:62px;bottom:30px;width:3px;border-radius:3px;background:repeating-linear-gradient(var(--d-acento) 0 6px,transparent 6px 14px);background-size:3px 14px}
.cw-d[data-cw-motion] .cw-d-ad-depois::before{animation:cw-d-ad-desce 1.4s linear infinite}
.cw-d-ad-depois li{position:relative;background:var(--d-papel);border:1.5px solid var(--d-acento);box-shadow:var(--d-sombra-p);margin-left:28px}
.cw-d-ad-depois .cw-d-ad-ico{background:var(--d-acento);color:#fff}
.cw-d-ad-rabisco{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.cw-d-ad-rabisco path{fill:none;stroke:#b9a98f;stroke-width:1.5;stroke-dasharray:6 6;vector-effect:non-scaling-stroke;opacity:.7}
.cw-d[data-cw-motion] .cw-d-ad-rabisco path{animation:cw-d-fluir 16s linear infinite}
.cw-d-ad-divisor{position:absolute;top:0;bottom:0;left:0;width:0;z-index:3;transform:translateX(calc(var(--v) * 1cqi));pointer-events:none}
.cw-d-ad-divisor::before{content:"";position:absolute;top:0;bottom:0;left:-2px;width:4px;background:var(--d-tinta)}
.cw-d-ad-alca{position:absolute;top:50%;left:0;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:var(--d-papel);border:3px solid var(--d-tinta);box-shadow:var(--d-sombra-p)}
.cw-d-ad-alca::before,.cw-d-ad-alca::after{content:"";position:absolute;top:50%;margin-top:-7px;border:7px solid transparent}
.cw-d-ad-alca::before{left:4px;border-right:9px solid var(--d-tinta)}
.cw-d-ad-alca::after{right:4px;border-left:9px solid var(--d-tinta)}
.cw-d[data-cw-motion] .cw-d-ad:not(.is-tocado) .cw-d-ad-alca{animation:cw-d-respira 2.2s ease-in-out infinite}
.cw-d-ad-controle{display:flex;align-items:center;gap:12px;margin-top:16px;font:600 13px/1 var(--d-mono);letter-spacing:.08em;text-transform:uppercase}
.cw-d-ad-controle input{flex:1;min-width:0;height:44px;margin:0;accent-color:var(--d-acento);cursor:pointer}
.cw-d-ad-resumo{margin-top:14px;font-size:16px}
@keyframes cw-d-ad-pisca{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes cw-d-ad-desce{to{background-position:0 14px}}
/* Agência: rabisco preto, depois em verde chapado, recortes com sombra dura. */
.cw-d[data-marca=agencia] .cw-d-ad-cena{border:3px solid #141414;border-radius:0}
.cw-d[data-marca=agencia] .cw-d-ad-antes{background:#fffdf5 repeating-linear-gradient(-45deg,transparent 0 14px,#14141410 14px 16px)}
.cw-d[data-marca=agencia] .cw-d-ad-antes li{border:2px dashed #141414;border-radius:0;background:#fff}
.cw-d[data-marca=agencia] .cw-d-ad-antes .cw-d-ad-ico{background:#ffd731;border:2px solid #141414;border-radius:0}
.cw-d[data-marca=agencia] .cw-d-ad-depois{background:#55db9c}
.cw-d[data-marca=agencia] .cw-d-ad-depois li{border:3px solid #141414;border-radius:0;box-shadow:5px 5px 0 #141414}
.cw-d[data-marca=agencia] .cw-d-ad-depois .cw-d-ad-ico{background:#141414;border-radius:0}
.cw-d[data-marca=agencia] .cw-d-ad-tag{border-radius:0;background:#141414}
.cw-d[data-marca=agencia] .cw-d-ad-antes .cw-d-ad-tag{background:#8d37b5}
.cw-d[data-marca=agencia] .cw-d-ad-depois::before{background-image:repeating-linear-gradient(#141414 0 6px,transparent 6px 14px)}
.cw-d[data-marca=agencia] .cw-d-ad-rabisco path{stroke:#141414;stroke-width:2.5;stroke-dasharray:none;opacity:.25}
.cw-d[data-marca=agencia] .cw-d-ad-alca{border-radius:0;background:#ffd731;box-shadow:4px 4px 0 #141414}
.cw-d[data-marca=agencia] .cw-d-ad-rot{font-family:var(--d-mono);text-transform:uppercase;letter-spacing:.03em}
/* Corp: papel quente e ficha organizada em azul. */
.cw-d[data-marca=corp] .cw-d-ad-antes{background:#efe9dc}
.cw-d[data-marca=corp] .cw-d-ad-depois{background:#e3edf7}
.cw-d[data-marca=corp] .cw-d-ad-depois li{border-width:1px}
.cw-d[data-marca=corp] .cw-d-ad-tag{border-radius:4px}
@media (max-width:600px){.cw-d-ad-lado li{max-width:86%;font-size:14px;padding:10px 12px}.cw-d-ad-antes li{transform:rotate(calc(var(--r) * .6))}.cw-d-ad-alca{width:44px;height:44px;margin:-22px 0 0 -22px}}
@media (scripting:none){
  .cw-d-ad-cena{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));grid-template-rows:none!important;cursor:auto}
  .cw-d-ad-lado,.cw-d-ad-lado ol{grid-row:auto;grid-template-rows:none}
  .cw-d-ad-antes{grid-column:auto}.cw-d-ad-depois{grid-column:auto;clip-path:none}
  .cw-d-ad-lado li{max-width:none;justify-self:stretch}
  .cw-d-ad-rabisco{display:none}
}