/* =========================================================
   Sistema por dentro: o CRM real numa moldura de navegador
   O fundo vem do body[data-tema="oliva"]; a seção não pinta fundo.
   ========================================================= */
.cs { overflow-x: clip; }

.cs-topo { max-width: 53.75rem; display: grid; gap: 1.125rem; margin-bottom: clamp(2.5rem, calc(var(--u) * 5), 5rem); }
.cs-titulo { color: var(--tinta); }
.cs-sub { max-width: 38.75rem; }

/* ---------- Moldura ---------- */
.cs-palco { position: relative; max-width: 66.25rem; margin-inline: auto; }
.cs-janela {
  --cs-raio: 1.375rem;
  position: relative;
  border-radius: var(--cs-raio);
  background: var(--preto-2);
  box-shadow: 0 0 0 1px var(--linha), 0 2.5rem 5rem rgba(0, 0, 0, 0.28);
  overflow: hidden;
  transform-origin: 50% 0%;
  will-change: transform;
}
.cs-barra {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  height: 2.875rem;
  padding: 0 0.875rem 0 1.125rem;
  background: var(--preto-2);
  border-bottom: 1px solid rgba(244, 244, 237, 0.08);
  color: rgba(244, 244, 237, 0.7);
}
.cs-bolas { display: flex; gap: 0.5rem; }
.cs-bolas i { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: rgba(244, 244, 237, 0.18); }
.cs-bolas i:first-child { background: var(--acento); }
.cs-endereco {
  display: inline-flex; align-items: center; gap: 0.5rem;
  height: 1.875rem; padding: 0 1rem;
  border-radius: 62.4375rem;
  background: rgba(244, 244, 237, 0.07);
  font-family: var(--fonte-mono); font-size: 0.7812rem; letter-spacing: 0.02em;
  white-space: nowrap;
}
.cs-endereco svg { width: 0.8125rem; height: 0.8125rem; opacity: 0.7; }
.cs-cheia {
  justify-self: end;
  display: inline-flex; align-items: center; gap: 0.5rem;
  height: 1.875rem; padding: 0 0.875rem;
  border-radius: 62.4375rem;
  font-size: 0.8125rem; font-weight: 500;
  color: rgba(244, 244, 237, 0.85);
  box-shadow: inset 0 0 0 1px rgba(244, 244, 237, 0.16);
  transition: background-color 0.4s var(--curva), color 0.4s var(--curva), box-shadow 0.4s var(--curva);
}
.cs-cheia svg { width: 0.875rem; height: 0.875rem; }
.cs-ico-fechar { display: none; }

/* ---------- Tela cheia na mesma guia ---------- */
.cs-janela.cs-cheio {
  position: fixed; inset: 0; z-index: 1001;
  border-radius: 0; --cs-raio: 0px;
  transform: none !important; /* vence o scale/y do scroll */
  display: flex; flex-direction: column;
}
.cs-janela.cs-cheio .cs-tela { flex: 1; aspect-ratio: auto; height: auto; max-height: none; min-height: 0; }
.cs-janela.cs-cheio .cs-cheia { background: var(--acento); color: var(--preto); box-shadow: none; }
.cs-janela.cs-cheio .cs-ico-abrir { display: none; }
.cs-janela.cs-cheio .cs-ico-fechar { display: block; }
html.cs-travado, html.cs-travado body { overflow: hidden; }
.cs-cheia:hover, .cs-cheia:focus-visible { background: var(--acento); color: var(--preto); box-shadow: none; }

/* ---------- Tela com o iframe ---------- */
.cs-tela {
  position: relative;
  aspect-ratio: 16 / 9.6;
  max-height: 68svh;
  min-height: 26.25rem;
  width: 100%;
  background: #eeeee6;
}
.cs-iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  display: block;
  background: transparent;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s var(--curva);
}
.cs-iframe.cs-pronto { opacity: 1; }
.cs-ativo .cs-iframe { pointer-events: auto; }
.cs-carregando {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--fonte-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(17, 17, 18, 0.45);
  pointer-events: none;
}
.cs-iframe.cs-pronto + .cs-carregando { display: none; }

/* Capa por cima, até o primeiro clique */
.cs-capa {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  padding: 1.5rem;
  background: rgba(17, 17, 18, 0.42);
  -webkit-backdrop-filter: blur(0.1875rem);
  backdrop-filter: blur(0.1875rem);
  cursor: pointer;
  transition: opacity 0.7s var(--curva), visibility 0.7s, -webkit-backdrop-filter 0.7s var(--curva), backdrop-filter 0.7s var(--curva);
}
.cs-explorar { height: 3.625rem; padding: 0 1.75rem; font-size: 1rem; transition: transform 0.6s var(--curva-mola); }
.cs-capa:hover .cs-explorar { transform: scale(1.04); }
.cs-dica { max-width: 27.5rem; font-size: 0.8125rem; line-height: 1.5; color: rgba(244, 244, 237, 0.85); text-align: center; }
@media (hover: none), (max-width: 900px) { .cs-dica-menu { display: none; } }
.cs-ativo .cs-capa {
  opacity: 0; visibility: hidden; pointer-events: none;
  -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);
}
.cs-ativo .cs-explorar { transform: scale(0.9); }

/* ---------- Ações embaixo ---------- */
.cs-acoes { display: flex; justify-content: center; margin-top: clamp(1.75rem, calc(var(--u) * 3.2), 3rem); }
.cs-video-botao {
  display: inline-flex; align-items: center; gap: 0.75rem;
  height: 3.125rem; padding: 0 0.625rem 0 1.375rem;
  border-radius: 62.4375rem;
  font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--linha);
  background: var(--superficie);
  transition: box-shadow 0.4s var(--curva), transform 0.5s var(--curva);
}
.cs-video-botao svg { width: 1rem; height: 1rem; }
.cs-video-botao:disabled { cursor: not-allowed; color: var(--tinta-2); }
.cs-video-botao:not(:disabled):hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--tinta-3); }
.cs-selo {
  display: inline-flex; align-items: center;
  height: 1.875rem; padding: 0 0.75rem;
  border-radius: 62.4375rem;
  background: var(--acento); color: var(--preto);
  font-family: var(--fonte-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
}
.cs-video { width: 100%; max-width: 61.25rem; margin-top: 1.5rem; border-radius: var(--raio-m); background: var(--preto); }
.cs-acoes:has(.cs-video:not([hidden])) { flex-direction: column; align-items: center; }

/* ---------- Tablet e celular ---------- */
@media (max-width: 900px) {
  .cs-tela { aspect-ratio: auto; height: 78svh; max-height: none; min-height: 32.5rem; }
}
@media (max-width: 600px) {
  .cs-janela { --cs-raio: 1.125rem; }
  .cs-barra { grid-template-columns: auto 1fr auto; height: 2.625rem; padding: 0 0.5rem 0 0.875rem; gap: 0.5rem; }
  .cs-bolas i { width: 0.5625rem; height: 0.5625rem; }
  .cs-bolas { gap: 0.375rem; }
  .cs-endereco { justify-self: center; height: 1.625rem; padding: 0 0.625rem; font-size: 0.6875rem; min-width: 0; overflow: hidden; }
  .cs-endereco svg { display: none; }
  .cs-cheia { padding: 0 0.625rem; height: 1.75rem; }
  .cs-cheia span { display: none; }
  .cs-tela { height: 80svh; min-height: 30rem; }
  .cs-explorar { height: 3.375rem; padding: 0 1.375rem; font-size: 0.9375rem; }
  .cs-video-botao { font-size: 0.875rem; padding-left: 1.125rem; }
}