/* Visuais ilustrativos (v5): fluxo da IA na faixa marinho e mini-sites de 'Na prática'. */

/* ===== vis-iaflow ===== */
/* vis-iaflow — fluxo da IA de atendimento em 4 etapas (faixa marinho). Todo seletor começa por .vis-iaflow. */

.vis-iaflow{
  --vif-on:var(--on-dark,#f8fafc);
  --vif-on-2:rgba(255,255,255,.72);
  --vif-line:rgba(255,255,255,.1);
  position:relative;
  width:100%;
  max-width:520px;
  margin:0 0 28px;
  color:var(--vif-on);
  font-family:var(--font,system-ui,sans-serif);
  overflow-wrap:anywhere;
  min-width:0;
  container-type:inline-size;
}
.vis-iaflow *{box-sizing:border-box;min-width:0}

/* Cabeçalho: legenda + rótulo "Ilustrativo" */
.vis-iaflow__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.vis-iaflow__caption{font-size:14px;font-weight:600;color:var(--accent-soft,#93c5fd)}
.vis-iaflow__tag{flex-shrink:0;padding:3px 10px;border:1px solid var(--vif-line);border-radius:var(--pill,999px);font-size:12px;font-weight:500;color:var(--vif-on-2)}

/* Barra de etapas */
.vis-iaflow__steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 14px;padding:0}
.vis-iaflow__step{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:10px;border-radius:var(--radius-sm,12px);background:var(--dark,#0f172a);border:1px solid var(--vif-line);color:var(--vif-on-2);transition:border-color .3s ease,color .3s ease}
.vis-iaflow__num{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;border:1px solid rgba(255,255,255,.3);font-size:12px;font-weight:600;line-height:1;color:var(--vif-on-2);transition:background-color .3s ease,color .3s ease,border-color .3s ease}
.vis-iaflow__step-label{font-size:12px;font-weight:500;line-height:1.3}
.vis-iaflow__step.is-done{color:var(--vif-on)}
.vis-iaflow__step.is-done .vis-iaflow__num{background:var(--accent,#1d4ed8);border-color:var(--accent,#1d4ed8);color:#fff}
.vis-iaflow__step.is-active{color:var(--vif-on);border-color:var(--accent-soft,#93c5fd)}
.vis-iaflow__step.is-active .vis-iaflow__num{background:var(--accent-soft,#93c5fd);border-color:var(--accent-soft,#93c5fd);color:var(--dark,#0f172a)}

/* Janela de conversa */
.vis-iaflow__chat{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:var(--radius,18px);background:var(--dark,#0f172a);border:1px solid var(--vif-line)}
.vis-iaflow__msg{display:flex;flex-direction:column;gap:4px;max-width:86%;padding:10px 14px;border-radius:14px;font-size:15px;line-height:1.4}
.vis-iaflow__msg p{margin:0;color:inherit;font-size:inherit;line-height:inherit}
.vis-iaflow__who{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.01em}
.vis-iaflow__icon{flex-shrink:0;display:block}
.vis-iaflow__msg--client{align-self:flex-end;background:var(--accent,#1d4ed8);color:#fff;border-bottom-right-radius:4px}
.vis-iaflow__msg--client .vis-iaflow__who{color:rgba(255,255,255,.78)}
.vis-iaflow__msg--ai{align-self:flex-start;background:var(--dark-2,#1e293b);color:var(--vif-on);border-bottom-left-radius:4px}
.vis-iaflow__msg--ai .vis-iaflow__who{color:var(--accent-soft,#93c5fd)}
.vis-iaflow__msg--team{align-self:flex-start;background:var(--dark-2,#1e293b);color:var(--vif-on);border-bottom-left-radius:4px;box-shadow:inset 3px 0 0 var(--accent-soft,#93c5fd)}
.vis-iaflow__msg--team .vis-iaflow__who{color:var(--accent-soft,#93c5fd)}

/* Animação: só enquanto o JS marca .is-playing. Sem JS, tudo visível (estado final). */
.vis-iaflow.is-playing .vis-iaflow__msg{opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease}
.vis-iaflow.is-playing .vis-iaflow__msg.is-shown{opacity:1;transform:none}

/* Controles (o JS remove o hidden) */
.vis-iaflow__controls{display:flex;justify-content:flex-end;gap:8px;margin-top:12px;min-height:36px}
.vis-iaflow__btn{min-height:36px;padding:6px 16px;border:1px solid rgba(255,255,255,.28);border-radius:var(--pill,999px);background:transparent;color:var(--vif-on);font:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.vis-iaflow__btn:hover{background:rgba(255,255,255,.1);border-color:var(--accent-soft,#93c5fd)}
.vis-iaflow__btn:focus-visible{outline:3px solid var(--accent-soft,#93c5fd);outline-offset:2px}

/* Responsivo pela largura do próprio componente (a raiz é o contêiner): entre 681px e ~900px de viewport
   o .product fica com ~300px internos, então a consulta por viewport não basta. */
@container (max-width:440px){
  .vis-iaflow__steps{grid-template-columns:repeat(2,1fr)}
  .vis-iaflow__step{flex-direction:row;align-items:center}
  .vis-iaflow__msg{max-width:92%;font-size:14px}
  .vis-iaflow__chat{padding:12px}
}
@container (max-width:320px){
  .vis-iaflow__steps{grid-template-columns:1fr}
  .vis-iaflow__head{flex-wrap:wrap}
  .vis-iaflow__msg{max-width:100%}
}
/* Reserva para navegadores sem @container */
@media(max-width:560px){
  .vis-iaflow__steps{grid-template-columns:repeat(2,1fr)}
  .vis-iaflow__step{flex-direction:row;align-items:center}
  .vis-iaflow__msg{max-width:92%;font-size:14px}
  .vis-iaflow__chat{padding:12px}
}
@media(max-width:360px){
  .vis-iaflow__steps{grid-template-columns:1fr}
  .vis-iaflow__head{flex-wrap:wrap}
  .vis-iaflow__msg{max-width:100%}
}

/* Preferências do sistema */
@media(prefers-reduced-motion:reduce){
  .vis-iaflow .vis-iaflow__msg,.vis-iaflow.is-playing .vis-iaflow__msg{opacity:1!important;transform:none!important;transition:none!important}
  .vis-iaflow__step,.vis-iaflow__num,.vis-iaflow__btn{transition:none!important}
}
@media(forced-colors:active){
  .vis-iaflow__step,.vis-iaflow__chat,.vis-iaflow__msg,.vis-iaflow__btn{border:1px solid CanvasText;background:Canvas;color:CanvasText;box-shadow:none}
  .vis-iaflow__step.is-active .vis-iaflow__num,.vis-iaflow__step.is-done .vis-iaflow__num{background:Highlight;color:HighlightText;border-color:Highlight}
}

/* ===== vis-sites ===== */
/* vis-sites — moldura de navegador com três mini-sites ilustrativos. Tudo em CSS; troca por [data-sector] na raiz. */

.vis-sites{container-type:inline-size;width:100%;max-width:560px;min-width:0;margin:0 auto}
.vis-sites__frame{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);box-shadow:0 1px 3px rgba(11,18,32,.08)}

/* Barra do navegador */
.vis-sites__bar{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--dark);color:var(--on-dark-muted)}
.vis-sites__dots{display:flex;gap:6px;flex-shrink:0}
.vis-sites__dots i{display:block;width:10px;height:10px;border-radius:50%;background:var(--dark-2);border:1px solid rgba(255,255,255,.22)}
.vis-sites__url{display:grid;flex:1;min-width:0;padding:5px 12px;border-radius:var(--pill);background:var(--dark-2);font-size:12px;line-height:1.4;white-space:nowrap}
.vis-sites__url span{grid-area:1/1;overflow:hidden;text-overflow:ellipsis;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
.vis-sites__url span::before{content:'';display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;border:1.5px solid var(--accent-soft);vertical-align:-1px}

/* Palco: os três sites ocupam a mesma célula; só o ativo aparece */
.vis-sites__stage{display:grid;background:var(--paper)}
.vis-sites__site{grid-area:1/1;display:flex;flex-direction:column;min-width:0;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
.vis-sites[data-sector=seguranca] .vis-sites__site[data-site=seguranca],
.vis-sites[data-sector=saude] .vis-sites__site[data-site=saude],
.vis-sites[data-sector=servicos] .vis-sites__site[data-site=servicos],
.vis-sites[data-sector=seguranca] .vis-sites__url [data-url=seguranca],
.vis-sites[data-sector=saude] .vis-sites__url [data-url=saude],
.vis-sites[data-sector=servicos] .vis-sites__url [data-url=servicos]{opacity:1;visibility:visible;transition-delay:0s}

/* Navegação do mini-site */
.vis-sites__nav{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}
.vis-sites__logo{display:block;width:22px;height:22px;border-radius:6px;background:var(--accent);flex-shrink:0}
.vis-sites__links{display:flex;gap:8px}
.vis-sites__links i{display:block;width:26px;height:6px;border-radius:3px;background:var(--line)}
.vis-sites__badge{margin-left:auto;padding:3px 9px;border:1px solid var(--line);border-radius:var(--pill);background:var(--paper);font-size:11px;font-weight:600;line-height:1.3;color:var(--accent);white-space:nowrap}

/* Hero */
.vis-sites__hero{display:grid;grid-template-columns:1fr;gap:16px;align-items:center;padding:20px 16px}
.vis-sites__copy{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.vis-sites__title{margin:0;font-size:17px;font-weight:600;line-height:1.2;letter-spacing:-.01em;color:inherit;overflow-wrap:anywhere}
.vis-sites__lines{display:flex;flex-direction:column;gap:6px;width:100%;max-width:240px}
.vis-sites__lines i{display:block;height:7px;border-radius:4px;background:currentColor;opacity:.2}
.vis-sites__lines i:last-child{width:68%}
.vis-sites__btn{display:inline-block;margin-top:2px;padding:7px 14px;border-radius:var(--pill);background:var(--accent);color:#fff;font-size:12px;font-weight:500;line-height:1.3;white-space:nowrap}
.vis-sites__pic{display:block;width:72px;height:72px;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--accent) 0%,var(--accent-soft) 100%)}
.vis-sites__site:has(.vis-sites__pic) .vis-sites__hero{grid-template-columns:1fr auto}

/* Variações por setor (só gradientes e cores da paleta) */
.vis-sites__site[data-site=seguranca] .vis-sites__hero{background:linear-gradient(135deg,var(--dark) 0%,var(--dark-2) 100%);color:var(--on-dark)}
.vis-sites__site[data-site=seguranca] .vis-sites__btn{background:var(--paper);color:var(--accent)}
.vis-sites__site[data-site=saude] .vis-sites__hero{background:linear-gradient(135deg,#dbeafe 0%,var(--tint) 100%);color:var(--ink)}
.vis-sites__site[data-site=saude] .vis-sites__card{background:var(--tint);border-color:transparent}
.vis-sites__site[data-site=saude] .vis-sites__card svg{padding:4px;border-radius:50%;background:var(--paper)}
.vis-sites__site[data-site=servicos] .vis-sites__hero{background:var(--tint);color:var(--ink)}
.vis-sites__site[data-site=servicos] .vis-sites__pic{background:linear-gradient(135deg,var(--dark-2) 0%,var(--dark) 100%)}

/* Cartões (cursos / serviços) */
.vis-sites__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px 16px 16px}
.vis-sites__card{display:flex;flex-direction:column;gap:8px;min-width:0;padding:12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper)}
.vis-sites__card svg,.vis-sites__list svg{width:22px;height:22px;flex-shrink:0;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vis-sites__card b{font-size:12px;font-weight:600;line-height:1.25;color:var(--ink);overflow-wrap:anywhere}
.vis-sites__card i{display:block;width:70%;height:6px;border-radius:3px;background:var(--line)}

/* Lista (oficina / comércio) */
.vis-sites__list{display:flex;flex-direction:column;gap:6px;margin:0;padding:12px 16px 14px;list-style:none}
.vis-sites__list li{display:flex;align-items:center;gap:10px;min-width:0;padding:7px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);font-size:12px;font-weight:600;line-height:1.3;color:var(--ink)}
.vis-sites__list li svg{width:18px;height:18px}
.vis-sites__list li i{display:block;flex-shrink:0;width:34px;height:6px;margin-left:auto;border-radius:3px;background:var(--line)}

/* Rodapé do mini-site: encosta no fim e iguala a altura dos três */
.vis-sites__foot{display:flex;gap:8px;align-items:center;margin-top:auto;padding:10px 16px;border-top:1px solid var(--line);background:var(--tint)}
.vis-sites__foot i{display:block;width:40px;height:6px;border-radius:3px;background:var(--line)}
.vis-sites__foot i:first-child{width:22px;height:10px;border-radius:3px;background:var(--accent-soft)}

/* Rótulo */
.vis-sites__caption{margin:10px 0 0;font-size:13px;line-height:1.4;color:var(--muted);text-align:center}

/* Responsivo pela largura do contêiner (300px a 560px) */
@container (max-width:420px){
  .vis-sites__title{font-size:15px}
  .vis-sites__hero{padding:16px 14px}
  .vis-sites__pic{width:56px;height:56px}
  .vis-sites__cards{gap:8px;padding:12px 14px 14px}
  .vis-sites__card{padding:10px}
  .vis-sites__card b{font-size:11px}
  .vis-sites__links i:last-child{display:none}
}
@container (max-width:340px){
  .vis-sites__cards{grid-template-columns:1fr}
  .vis-sites__card{flex-direction:row;align-items:center}
  .vis-sites__card i{width:30px;margin-left:auto}
  .vis-sites__card svg{width:18px;height:18px}
  .vis-sites__pic{display:none}
  .vis-sites__site:has(.vis-sites__pic) .vis-sites__hero{grid-template-columns:1fr}
  .vis-sites__bar{gap:8px;padding:8px 12px}
  .vis-sites__links{display:none}
}

/* Preferências do sistema */
@media (prefers-reduced-motion:reduce){
  .vis-sites__site,.vis-sites__url span{transition:none}
}
@media (forced-colors:active){
  .vis-sites__frame,.vis-sites__card,.vis-sites__list li,.vis-sites__badge{border:1px solid CanvasText}
  .vis-sites__btn,.vis-sites__logo{background:Highlight;color:HighlightText}
  .vis-sites__lines i,.vis-sites__card i,.vis-sites__list li i,.vis-sites__links i{background:GrayText;opacity:1}
}