/* ============================================================
   "Veja como ela atende o seu cliente" como módulo (05/10/2026), para o cartão 02 da página inicial (Hugo: trocar o
   filme dos bastidores por esta demonstração da /ia/). Regras COPIADAS da seção #acao de ia/index.html e presas em .icv
   (a home já usa .avatar e .play com outro visual). A /ia/ continua com as dela, intocada.
   ============================================================ */
.icv{--phone:#16131F;--phone-bg:#F4F1EA;--wa-them:#FFFFFF;--wa-me:#D9FDD3;--wa-me-text:#14111C;max-width:1000px;margin:0 auto}
[data-theme="dark"] .icv{--phone:#0B0B10;--phone-bg:#0E0C14;--wa-them:#1D1B24;--wa-me:#005C4B;--wa-me-text:#E9FFF7}
.icv .acao-grid{display:grid;grid-template-columns:1fr 300px;gap:clamp(28px,5vw,64px);align-items:center}
.icv .icv-lead{color:var(--muted);font-size:.98rem;line-height:1.55;margin-bottom:18px;max-width:46ch}
.icv .abas{display:inline-flex;gap:4px;padding:5px;border-radius:var(--r-pill);border:1px solid var(--stroke);background:var(--glass);margin-bottom:22px;flex-wrap:wrap}
.icv .abas button{padding:9px 18px;border-radius:var(--r-pill);font-size:.88rem;color:var(--muted);transition:.35s var(--ease)}
.icv .abas button[aria-selected="true"]{color:#fff;background:linear-gradient(135deg,var(--purple),var(--purple-2));box-shadow:0 8px 22px -10px rgba(157,114,233,.9)}
.icv .passos{list-style:none;display:flex;flex-direction:column;gap:10px;counter-reset:p}
.icv .passos li{display:flex;gap:14px;align-items:flex-start;padding:14px 18px;border-radius:var(--r-sm);border:1px solid transparent;
  color:var(--faint);transition:color .5s var(--ease),background .5s var(--ease),border-color .5s var(--ease)}
.icv .passos li::before{counter-increment:p;content:counter(p,decimal-leading-zero);font-family:'JetBrains Mono',monospace;font-size:.7rem;
  padding-top:3px;color:inherit}
.icv .passos li b{display:block;font-weight:500;font-size:.98rem}
.icv .passos li span{font-size:.86rem}
.icv .passos li.on{color:var(--text);background:var(--glass-2);border-color:var(--stroke-hi);box-shadow:var(--lift)}
.icv .passos li.on::before{color:var(--accent)}
.icv .passos li.on span{color:var(--muted)}

.icv .celular{position:relative;width:min(290px,78vw);max-width:100%;margin-inline:auto;aspect-ratio:9/16;border-radius:44px;padding:11px;
  background:var(--phone);box-shadow:0 50px 90px -30px rgba(60,30,120,.55), inset 0 0 0 1.5px rgba(255,255,255,.12)}
.icv .celular::before{content:'';position:absolute;top:20px;left:50%;translate:-50% 0;width:96px;height:26px;border-radius:20px;background:#000;z-index:3}
.icv .tela{position:relative;height:100%;border-radius:38px;overflow:hidden;display:flex;flex-direction:column;background:var(--phone-bg)}
.icv .wa-top{display:flex;align-items:center;gap:10px;padding:56px 14px 10px;background:var(--wa-them);border-bottom:1px solid var(--stroke);color:var(--text)}
.icv .avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff;position:relative;font-size:.7rem;
  background:linear-gradient(140deg,var(--purple),#6E45B8);box-shadow:0 6px 18px -6px rgba(157,114,233,.8)}
.icv .wa-top strong{display:block;font-weight:600;font-size:.86rem;line-height:1.2}
.icv .wa-top small{font-size:.7rem;color:var(--faint)}
.icv .wa-msgs{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:12px 10px}
.icv .wm{max-width:82%;white-space:pre-line;padding:7px 10px 18px;border-radius:12px;font-size:.8rem;line-height:1.4;position:relative;font-weight:400;
  box-shadow:0 1px 1px rgba(0,0,0,.08);animation:icvIn .45s var(--ease-out) both}
.icv .wm time{position:absolute;right:9px;bottom:4px;font-size:.6rem;opacity:.78}   /* .55 na /ia/ dava contraste 3,48 */
.icv .wm.cli{align-self:flex-end;background:var(--wa-me);color:var(--wa-me-text);border-top-right-radius:4px}
.icv .wm.ia{align-self:flex-start;background:var(--wa-them);color:var(--text);border-top-left-radius:4px}
.icv .wm.ia .quem{display:block;font-size:.62rem;font-weight:600;color:var(--accent);margin-bottom:2px}
.icv .wm.sistema{align-self:center;background:rgba(157,114,233,.14);color:var(--accent);font-size:.68rem;padding:5px 10px;border-radius:8px;
  font-family:'JetBrains Mono',monospace;letter-spacing:.02em;box-shadow:none;text-align:center}
.icv .wm .audio{display:flex;align-items:center;gap:8px;min-width:170px}
.icv .wm .audio .play{width:0;height:0;padding:0;border:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;opacity:.6;background:none;box-shadow:none}
.icv .wm .audio .onda{flex:1;height:18px;display:flex;align-items:center;gap:2px}
.icv .wm .audio .onda i{flex:1;background:currentColor;opacity:.4;border-radius:2px}
.icv .wm .transcr{display:block;margin-top:5px;font-size:.7rem;opacity:.7;font-style:italic}
.icv .wm .foto{width:170px;height:118px;border-radius:8px;margin-bottom:5px;overflow:hidden;
  background:radial-gradient(120% 90% at 30% 20%,#E9E2D6,#B9AE9C 70%,#8F8472)}
.icv .wm .foto svg{width:100%;height:100%;display:block}
.icv .wm .card{display:block;margin-top:6px;padding:8px;border-radius:8px;background:rgba(157,114,233,.10);border-left:3px solid var(--purple)}
.icv .wm .card b{display:block;font-size:.74rem;font-weight:600}
.icv .wm .card small{font-size:.66rem;opacity:.7}
.icv .wa-dig{align-self:flex-start;display:flex;gap:3px;padding:10px 12px;border-radius:12px;border-top-left-radius:4px;background:var(--wa-them);animation:icvIn .3s both}
.icv .wa-dig i{width:5px;height:5px;border-radius:50%;background:var(--faint);animation:icvPisca 1.3s infinite}
.icv .wa-dig i:nth-child(2){animation-delay:.18s}.icv .wa-dig i:nth-child(3){animation-delay:.36s}
@keyframes icvIn{from{opacity:0;transform:translateY(10px) scale(.96)}}
@keyframes icvPisca{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.icv .wa-bar{display:flex;align-items:center;gap:8px;padding:8px 10px 18px}
.icv .wa-bar span{flex:1;height:36px;border-radius:20px;background:var(--wa-them);display:flex;align-items:center;padding:0 14px;font-size:.76rem;color:var(--faint)}
.icv .wa-bar i{width:36px;height:36px;border-radius:50%;background:var(--purple);flex:none}
/* no cartão a conversa troca de aba sozinha e as abas servem para escolher: sem o "Ver de novo" (economiza altura) */
.icv .de-novo{display:none}

/* tablet e celular: abas, celular e passos um embaixo do outro (como na /ia/), passos compactos para caber na tela */
@media (max-width:980px){
  .icv .acao-grid{grid-template-columns:1fr;justify-items:center;gap:0}
  .icv .acao-txt{display:contents}
  .icv .icv-lead{order:1;text-align:center;margin-inline:auto}
  .icv .abas{order:2}
  .icv .acao-cel{order:3;margin-bottom:18px}
  .icv .passos{order:4;width:100%;max-width:520px;margin-inline:auto;text-align:left}
}
/* celular (Hugo, 05/10/2026: "ficou muito feio vendo pelo celular"): sem a moldura de aparelho, que ficava pequena e
   achatada; a conversa vira um painel de WhatsApp na largura toda, nome numa linha só, e os 3 passos uma fileira */
@media (max-width:640px){
  .icv .icv-lead{display:none}
  .icv .abas{margin-bottom:14px}
  .icv .abas button{padding:8px 13px;font-size:.82rem}
  .icv .acao-cel{width:100%;margin-bottom:12px}
  .icv .celular{width:100%;max-width:440px;aspect-ratio:auto;height:340px;padding:0;border-radius:20px;background:var(--phone-bg);
    box-shadow:0 18px 40px -22px rgba(60,30,120,.55),inset 0 0 0 1px var(--stroke)}
  .icv .celular::before{display:none}
  .icv .tela{border-radius:20px}
  .icv .wa-top{padding:10px 12px}
  .icv .wa-top>div:last-child{min-width:0}
  .icv .wa-top strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .icv .wa-msgs{padding:10px 10px 6px}
  .icv .wm{max-width:86%;font-size:.78rem}
  .icv .wm .audio{min-width:0}   /* o balão é mais estreito que 170 px: o "0:07" saía cortado */
  .icv .wm.sistema{white-space:nowrap}
  .icv .wa-bar{padding:6px 10px 10px}
  .icv .wa-bar span{height:32px}
  .icv .wa-bar i{width:32px;height:32px}
  .icv .passos{flex-direction:row;gap:6px;max-width:440px}
  .icv .passos li{flex:1;min-width:0;flex-direction:column;gap:3px;padding:8px 9px}
  .icv .passos li::before{padding-top:0}
  .icv .passos li b{font-size:.7rem;line-height:1.25}
  .icv .passos li span{display:none}
}
@media (max-width:640px) and (max-height:720px){ .icv .celular{height:300px} }
[data-theme="light"] .icv .wm.sistema{color:#5B3A9C}   /* contraste no claro (4,35 -> acima de 4,5) */
.icv-ctl{display:flex;justify-content:center;margin-top:12px}
.icv-ctl button{padding:7px 16px;border-radius:99px;border:1px solid var(--stroke);font-size:.78rem;color:var(--text);background:var(--glass-2)}
.icv-ctl button:hover{border-color:var(--stroke-hi)}