/* AIRYA VÍDEO CONFERÊNCIA — o que a vitrine tem de próprio sobre o molde da
   família (vitrine.css): a sala de reunião em miniatura na maquete e os quatro
   aparelhos desenhados em CSS. */
.sala-mini { background: #0b1330; color: #eef1fa; padding: 12px; display: flex; flex-direction: column; gap: 9px; min-height: 290px; }
.sala-topo-mini { display: flex; justify-content: space-between; font-size: 11.5px; opacity: .9; }
.sala-topo-mini span:last-child { font-variant-numeric: tabular-nums; color: var(--ouro-claro); }
.grade-video { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; flex: 1; }
.video { position: relative; border-radius: 10px; min-height: 76px; overflow: hidden;
  background: radial-gradient(120px 80px at 50% 40%, #22346e, #111c3d 75%); border: 1px solid rgba(255,255,255,.08); }
.video i { position: absolute; left: 50%; top: 44%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 999px; background: linear-gradient(160deg, rgba(67,209,192,.8), rgba(216,168,71,.6)); }
.video i::after { content: ''; position: absolute; left: -8px; right: -8px; top: 30px; height: 20px; border-radius: 20px 20px 0 0; background: inherit; opacity: .7; }
.video span { position: absolute; left: 7px; bottom: 5px; font-size: 10px; background: rgba(0,0,0,.45); padding: 1px 6px; border-radius: 6px; }
.video.fala { border-color: var(--ouro); animation: fala 1.8s ease-in-out infinite; }
.video.tela { background: linear-gradient(160deg, #f4f6fb, #dfe5f3); }
.video.tela em { position: absolute; inset: 10px 10px 22px; border-radius: 6px; background: repeating-linear-gradient(0deg, rgba(20,26,44,.14) 0 5px, transparent 5px 12px); font-size: 0; }
.video.tela span { color: #fff; }
@keyframes fala { 0%, 100% { box-shadow: 0 0 0 0 rgba(216,168,71,0); } 50% { box-shadow: 0 0 0 4px rgba(216,168,71,.35); } }
.legenda-mini { align-self: center; font-size: 11px; background: rgba(0,0,0,.5); border-radius: 6px; padding: 3px 10px; }
.controles-mini { display: flex; justify-content: center; gap: 6px; }
.controles-mini i { font-style: normal; font-size: 12px; width: 28px; height: 24px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.08); }
.controles-mini i.on { background: rgba(67,209,192,.3); }
.controles-mini i.sair { background: #d8574f; }
.barra-janela .rec { margin-left: 8px; font-size: 10px; font-weight: 700; color: #e5484d; animation: pisca-rec 1.6s steps(2) infinite; }
@keyframes pisca-rec { 50% { opacity: .35; } }
.pausado .video.fala, .fora .video.fala, .pausado .barra-janela .rec, .fora .barra-janela .rec { animation-play-state: paused; }

/* ── OS QUATRO APARELHOS ── */
.aparelhos-grade { perspective: 1400px; }
.aparelho { text-align: center; transition: transform .4s cubic-bezier(.2,.7,.3,1); }
.aparelho:hover { transform: rotateY(-6deg) translateY(-6px); }
.aparelho h3 { margin: 10px 0 6px; }
.desenho { position: relative; margin: 6px auto 18px; border: 2px solid var(--texto); border-radius: 10px; opacity: .85; }
.desenho i { position: absolute; inset: 5px; border-radius: 5px; background: linear-gradient(160deg, rgba(216,168,71,.35), rgba(67,209,192,.25)); overflow: hidden; }
.desenho i::after { content: ''; position: absolute; left: -60%; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: brilho 3.6s ease-in-out infinite; }
@keyframes brilho { 0% { left: -60%; } 60%, 100% { left: 120%; } }
.desenho.celular { width: 44px; height: 80px; border-radius: 10px; }
.desenho.tablet { width: 70px; height: 92px; }
.desenho.notebook { width: 104px; height: 66px; border-radius: 6px 6px 2px 2px; }
.desenho.notebook::after { content: ''; position: absolute; left: -14px; right: -14px; bottom: -10px; height: 7px; background: var(--texto); border-radius: 0 0 8px 8px; }
.desenho.desktop { width: 112px; height: 72px; border-radius: 5px; margin-bottom: 34px; }
.desenho.desktop::after { content: ''; position: absolute; left: 40px; right: 40px; bottom: -24px; height: 22px; border-left: 2px solid var(--texto); border-right: 2px solid var(--texto); border-bottom: 4px solid var(--texto); }
.nota-rede { margin-top: 22px; color: var(--suave); font-size: 14.5px; max-width: 78ch; }
.plano ul { list-style: none; padding: 0; margin: 12px 0 16px; display: grid; gap: 5px; font-size: 13px; text-align: left; }
.plano ul li.nao { opacity: .5; }
section[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .video.fala, .desenho i::after, .barra-janela .rec { animation: none; } .aparelho:hover { transform: none; } }
:root[data-movimento="nenhum"] .video.fala, :root[data-movimento="nenhum"] .desenho i::after, :root[data-movimento="nenhum"] .barra-janela .rec { animation: none; }