/* manobrAI — site. Tokens espelham os --mai-* do app (frontend/src/styles/tokens.css).
   Laranja sobre fundo claro reprova contraste (2,7:1): aqui ele só aparece como fundo com texto
   tinta, ou como texto sobre fundo escuro (7,3:1). */

/* Fontes próprias (subset latin, licença em assets/fonts/LICENSES.txt). Os pesos são os que o site usa:
   Archivo só em 800 itálico (títulos), Inter 400 a 700, JetBrains Mono só em 500. */
@font-face {
  font-family: 'Archivo'; font-style: italic; font-weight: 800; font-display: swap;
  src: url(assets/fonts/archivo-800-italic-v1.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(assets/fonts/inter-400-700-v1.woff2) format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(assets/fonts/jetbrains-mono-500-v1.woff2) format('woff2');
}

:root {
  --ink: #0A0A0A;
  --paper: #F8F4E9;
  --laranja: #FD7500;
  --muro: 2.2px solid var(--ink);
  --sombra: 3px 3px 0 var(--ink);
  --f-titulo: 'Archivo', 'Arial Black', system-ui, sans-serif;
  --f-texto: 'Inter', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  --gutter: clamp(20px, 5vw, 72px);
}

* { box-sizing: border-box; }
html { background: var(--ink); color: var(--paper); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 17px/1.55 var(--f-texto); }
img, video { display: block; }
:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }

/* ---------- topo ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: calc(14px + env(safe-area-inset-top)) var(--gutter) 14px;
  pointer-events: none;
}
.nav > * { pointer-events: auto; }
.marca {
  background: var(--paper); border: var(--muro); border-radius: 10px;
  box-shadow: var(--sombra), 0 0 0 1px rgba(248, 244, 233, .22);
  padding: 7px 12px;
}
.btn {
  display: inline-block; background: var(--laranja); color: var(--ink);
  border: var(--muro); border-radius: 10px;
  box-shadow: var(--sombra), 0 0 0 1px rgba(248, 244, 233, .22);
  padding: 10px 16px; font: 700 14px/1.2 var(--f-texto); text-decoration: none;
  transition: transform .12s, box-shadow .12s;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink), 0 0 0 1px rgba(248, 244, 233, .22); }
.btn.grande { padding: 16px 24px; font-size: 17px; }

/* ---------- jornada ---------- */
.mundo { position: relative; } /* altura definida em world.js */
.palco { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #000; }
.segs, .seg { position: absolute; inset: 0; }
.seg img, .seg video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--pos, 50% 50%);
}
.seg video { opacity: 0; transition: opacity .4s; }
.seg.pronto video { opacity: 1; }
.veu {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 10, 10, .82) 0%, rgba(10, 10, 10, .5) 36%, rgba(10, 10, 10, 0) 64%),
    linear-gradient(0deg, rgba(10, 10, 10, .62), rgba(10, 10, 10, 0) 34%);
}

.t {
  position: absolute; left: var(--gutter); bottom: clamp(72px, 15vh, 150px);
  max-width: min(600px, 88vw);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .35s, transform .35s;
}
.t.on { opacity: 1; transform: none; }
.eyebrow {
  margin: 0 0 14px; font: 500 13px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--laranja);
}
h1, h2 {
  margin: 0; font-family: var(--f-titulo); font-style: italic; font-weight: 800;
  letter-spacing: -.02em; line-height: .96; text-wrap: balance;
}
/* Tamanhos calibrados para a linha mais longa ("O atendimento não.", 18 caracteres) caber sem quebrar
   no desktop e quebrar em duas linhas no celular. Medido em 04/10/2026: com 8,4vw o título passava
   de 4 linhas e batia no logo do topo. */
h1 { font-size: clamp(34px, 5.6vw, 76px); }
h1 em { font-style: italic; color: var(--laranja); }
h2 { font-size: clamp(26px, 4vw, 52px); }
#t-abertura { max-width: min(820px, 90vw); }
.sub { margin: 20px 0 0; max-width: 34ch; font-size: clamp(16px, 1.6vw, 20px); color: rgba(248, 244, 233, .92); }

/* conversa de exemplo: balões no estilo "Etiqueta de Muro" por cima do vídeo fotográfico */
.chat-caixa {
  position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%);
  width: min(390px, 88vw); pointer-events: none;
}
.chat { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.b {
  max-width: 92%; padding: 12px 15px; border: var(--muro); box-shadow: var(--sombra), 0 0 0 1px rgba(248, 244, 233, .2);
  font: 500 16px/1.4 var(--f-texto); color: var(--ink);
  opacity: 0; transform: translateY(16px) scale(.97); transition: opacity .3s, transform .3s;
  display: none;
}
.b.vivo { display: block; }
.b.on { opacity: 1; transform: none; }
.b.c { align-self: flex-start; background: var(--paper); border-radius: 14px 14px 14px 4px; }
.b.a { align-self: flex-end; background: var(--laranja); border-radius: 14px 14px 4px 14px; }
.b.dig { display: none; padding: 14px 18px; }
.b.dig.vivo { display: flex; gap: 6px; }
.b.dig span { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); animation: pulo 1s infinite ease-in-out; }
.b.dig span:nth-child(2) { animation-delay: .15s; }
.b.dig span:nth-child(3) { animation-delay: .3s; }
@keyframes pulo { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }
.legenda {
  margin: 14px 4px 0; font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase;
  color: rgba(248, 244, 233, .78); text-align: right;
}

.dica {
  position: absolute; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: grid; justify-items: center; gap: 8px; pointer-events: none; transition: opacity .3s;
  font: 500 11px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: rgba(248, 244, 233, .85);
}
.dica i { width: 2px; height: 28px; background: var(--laranja); transform-origin: top; animation: desce 1.6s infinite ease-in-out; }
@keyframes desce { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.dica.some { opacity: 0; }

/* ---------- depois da jornada ---------- */
.depois { background: var(--paper); color: var(--ink); padding: clamp(72px, 14vw, 160px) var(--gutter); }
.depois .miolo { max-width: 780px; }
.depois .eyebrow { color: #AD4600; } /* laranja escuro: 4,6:1 sobre papel */
.depois h2 { font-size: clamp(34px, 6vw, 72px); }
.depois p { max-width: 56ch; }
.depois .btn { margin-top: 12px; box-shadow: var(--sombra); }
.depois .rascunho { margin-top: 48px; font: 500 12px/1.5 var(--f-mono); color: #6B6558; }

/* ---------- celular ---------- */
@media (max-width: 860px) {
  .veu {
    background:
      linear-gradient(0deg, rgba(10, 10, 10, .88) 0%, rgba(10, 10, 10, .55) 42%, rgba(10, 10, 10, 0) 72%),
      linear-gradient(180deg, rgba(10, 10, 10, .5), rgba(10, 10, 10, 0) 22%);
  }
  .t { bottom: calc(64px + env(safe-area-inset-bottom)); }
  .sub { max-width: 40ch; }
  .chat-caixa { top: auto; bottom: calc(24px + env(safe-area-inset-bottom)); right: 16px; left: 16px; width: auto; transform: none; }
  .dica { display: none; }
  .btn { padding: 9px 13px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .t, .b { transition: none; }
  .b.dig span, .dica i { animation: none; }
}

/* ---------- ajustes da revisão final (04/10/2026) ---------- */
:root { --laranja-texto: #AD4600; } /* laranja para TEXTO pequeno sobre papel: 5,2:1 (o #AD4600 só dava 4,2:1) */
html { scroll-padding-top: 84px; }

/* foco: o anel cor de papel sumia nos fundos claros (1,0:1). Tinta no claro, papel no escuro. */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.mundo :focus-visible, .sec.escuro :focus-visible, .rodape :focus-visible, .pular:focus-visible { outline-color: var(--paper); }
.nav :focus-visible { box-shadow: var(--sombra), 0 0 0 6px var(--paper); }

.pular {
  position: fixed; left: 12px; top: -64px; z-index: 40; background: var(--paper); color: var(--ink); border: var(--muro);
  padding: 10px 14px; border-radius: 10px; font: 700 14px/1 var(--f-texto); text-decoration: none;
}
.pular:focus { top: 12px; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* barra do topo: sólida quando a jornada acaba (secoes.js põe .solida) */
.nav { border-bottom: 2.2px solid transparent; transition: background-color .2s, border-color .2s; }
.nav.solida { background: var(--paper); border-bottom-color: var(--ink); pointer-events: auto; }

/* o pôster é CSS: aparece já no primeiro quadro e sem JavaScript */
.palco { background: #000 url(assets/poster1-v1.webp) 64% 50% / cover; }
.seg img { object-position: var(--pos, 50% 50%); }
.seg video { object-position: var(--pos-v, var(--pos, 50% 50%)); }

/* primeira linha de cada momento como etiqueta de preço laranja (o mesmo objeto que aparece no para-brisa) */
.t .eyebrow {
  position: relative; display: inline-block; margin: 0 0 18px; padding: 7px 12px 6px 28px;
  background: var(--laranja); color: var(--ink); border: var(--muro); border-radius: 3px 10px 10px 3px;
  box-shadow: 3px 3px 0 var(--ink), 0 0 0 1px rgba(248, 244, 233, .22);
  transform: rotate(-1.5deg); transform-origin: left center; font-weight: 700;
}
.t .eyebrow::before {
  content: ""; position: absolute; left: 9px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px;
  border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--paper);
}
.t .sub, .t h2 { text-shadow: 0 1px 14px rgba(10, 10, 10, .75); }

/* a conversa fica junto do celular do vídeo, não da borda da tela (em 1920 ela ficava solta no escuro) */
.chat-caixa { visibility: hidden; }
@media (min-width: 861px) {
  .chat-caixa { right: auto; left: 63.5%; width: min(390px, 30vw); }
}

/* sem JavaScript: nada de dica de rolagem nem legenda sem conversa */
html:not(.js) .dica, html:not(.js) .legenda { display: none; }