/* Prévia Socialfy por ambientes (conceito do Jefferson) na pele do crm.socialfy.me.
   2026-10-01 BRT. Só tokens de /css/style.css: nenhuma cor literal neste arquivo.
   Junta o <style> e o conversa.css originais, já traduzidos para os tokens. */

.one { background: var(--night); color: var(--ink); }
.one .wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.one h1, .one h2, .one h3 { font-family: var(--font-display); text-wrap: balance; }
.one .one-kicker { margin: 0; }
.one .one-index {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-hi);
}
.one p a:not(.btn), .one li a:not(.btn) { color: var(--accent-hi); }

/* S-Lâmina da home: seção que recebe o S vira palco próprio, e o S nunca vaza para o lado. */
.one [data-one-amb] { position: relative; isolation: isolate; overflow: clip; }
.one .one-chips { list-style: none; padding: 0; margin: 0; }

/* Loop de fundo no topo das páginas de setor: o assunto do vídeo mora no terço direito,
   a camada escura vem da esquerda para o título ficar legível, e o pé funde na seção seguinte. */
.one-hero-media {
  position: absolute;
  inset: 0 0 auto 0;
  height: min(100%, 100svh); /* o topo é alto: cobrir tudo esticava o vídeo e o assunto engolia o texto */
  z-index: -1;
  background: var(--night) var(--poster) 70% center / cover no-repeat;
}
.one-hero-media video { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.one-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--night) 0%, color-mix(in oklch, var(--night) 88%, transparent) 38%, color-mix(in oklch, var(--night) 25%, transparent) 72%, transparent 100%),
    linear-gradient(0deg, var(--night) 0%, transparent 32%);
}
@media (max-width: 760px) {
  .one-hero-media::after { background: color-mix(in oklch, var(--night) 78%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .one-hero-media video { display: none; }
}
.one .one-foot-word { padding: 0; border-top: 0; overflow: hidden; }
.one .nav__mid a[aria-current="page"] { color: var(--ink); }

/* botões sobre superfície clara (painel osso / papel) */
.btn--dark {
  --btn-bg: var(--night);
  border-color: transparent;
  color: var(--ink);
  font-weight: 600;
}
.btn--dark:hover { --btn-bg: var(--night-3); transform: translateY(-1px); }
.btn--onlight { color: var(--ink-dark); border-color: var(--ink-dark-2); }
.btn--onlight:hover { background: color-mix(in oklch, var(--ink-dark) 7%, transparent); }

/* ---- cartas por setor ---- */
.carta {
  appearance: none;
  border: 0;
  margin: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 28px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  transition: transform 350ms var(--ease-out);
}
.carta:hover { transform: translateY(-18px) rotate(-1deg); }
.carta:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.flutua { animation: flutua 4.5s ease-in-out infinite; }
.flutua-2 { animation-delay: -1.5s; }
.flutua-3 { animation-delay: -3s; }
@keyframes flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.mesa { position: relative; height: 640px; margin-top: 24px; overflow: hidden; }
.bolso {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(820px, 100%);
  bottom: 0;
  height: 230px;
  border-radius: 22px 22px 30px 30px;
  background: var(--night-3);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-light);
  z-index: 4;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 30px;
}
.bolso::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 14px;
  border-top: 1.5px dashed var(--rule);
}
.painel { animation: abre 450ms var(--ease-out); }
@keyframes abre { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.carta-pos {
  position: absolute;
  left: 50%;
  bottom: 110px;
  width: min(260px, 40vw);
  height: 340px;
  margin-left: calc(min(260px, 40vw) / -2);
  transform-origin: 50% 100%;
  transition: transform 600ms var(--ease-out), opacity 400ms;
}
@media (prefers-reduced-motion: reduce) {
  .flutua, .painel { animation: none; }
  .carta { transition: none; }
}

/* ---- conversa ilustrativa e blocos das páginas de setor ---- */
.agentes-chamada {
  margin: 24px 0 0;
  max-width: 62ch;
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 20px;
  color: var(--ink-2);
  font-size: var(--text-md);
  line-height: 1.55;
}
.agentes-chamada strong { color: var(--ink); font-weight: 600; }
.agentes-chamada a { white-space: nowrap; }
.conversa-exemplo {
  margin-top: 42px;
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid var(--rule);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--night-3), var(--abyss));
}
.conversa-exemplo h3 {
  margin: 12px 0 0;
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.conversa-exemplo .conversa-intro {
  margin: 14px 0 0;
  max-width: 66ch;
  color: var(--ink-2);
  font-size: var(--text-base);
  line-height: 1.55;
}
.conversa-passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.conversa-passo {
  padding: 22px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--night-2);
  min-width: 0;
}
.conversa-passo[data-papel="pessoa"] { border-top: 3px solid var(--bone); }
.conversa-passo[data-papel="agente"] { border-top: 3px solid var(--accent); }
.conversa-passo[data-papel="equipe"] { border-top: 3px solid var(--ink-3); }
.conversa-passo .papel {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-hi);
}
.conversa-passo p { margin: 13px 0 0; color: var(--ink); font-size: var(--text-base); line-height: 1.5; }
.conversa-passo small { display: block; margin-top: 12px; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.5; }
.conversa-nota { margin: 22px 0 0; color: var(--ink-3); font-size: var(--text-sm); line-height: 1.5; }

.visao-escritorio {
  padding: 72px 0;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  background: var(--abyss);
}
.visao-escritorio h2 {
  margin: 18px 0 0;
  max-width: 24ch;
  font-size: var(--text-display-s);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.visao-escritorio p { max-width: 68ch; color: var(--ink-2); font-size: var(--text-md); line-height: 1.6; }
.visao-nota {
  margin: 0 0 32px;
  padding-left: 16px;
  border-left: 2px solid var(--rule);
  color: var(--ink-2);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.prova-contexto { margin: 24px 0 0; max-width: 66ch; color: var(--ink-2); font-size: var(--text-base); line-height: 1.55; }

@media (max-width: 760px) {
  .conversa-passos { grid-template-columns: 1fr; }
  .conversa-exemplo { margin-top: 30px; }
  .agentes-chamada { font-size: var(--text-base); }
  .visao-escritorio { padding: 60px 0; }
}

/* No celular as cartas ficam inteiras e legíveis antes de abrir o painel do setor. */
@media (max-width: 620px) {
  .mesa { height: auto; display: grid; gap: 16px; overflow: visible; margin-top: 30px; }
  .carta-pos {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    min-height: 230px;
    margin-left: 0;
    transform: none !important;
    opacity: 1 !important;
  }
  .carta-pos .flutua { animation: none; }
  .carta { min-height: 230px; padding: 24px; }
  .carta:hover { transform: none; }
  .bolso { display: none; }
  .one .nav__end .btn--primary { padding: 0.6rem 0.9rem; font-size: var(--text-xs); }
}