/* Zillion · site institucional. Branco, tinta, Quicksand. Sem verde. */
@font-face { font-family: "Quicksand"; font-style: normal; font-weight: 500; font-display: swap; src: url("/site/fontes/quicksand-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Quicksand"; font-style: normal; font-weight: 600; font-display: swap; src: url("/site/fontes/quicksand-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Quicksand"; font-style: normal; font-weight: 700; font-display: swap; src: url("/site/fontes/quicksand-latin-700-normal.woff2") format("woff2"); }

:root {
  --branco: #FFFFFF;
  --papel: #F6F6F4;
  --tinta: #0A0A0A;
  --tinta-2: #55565A;
  --cinza: #75767A;
  --linha: #E6E6E4;
  --ui: "Quicksand", ui-rounded, system-ui, sans-serif;
  --lado: clamp(18px, 5vw, 72px);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { background: var(--branco); }
body { margin: 0; color: var(--tinta); font: 500 17px/1.6 var(--ui); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
h1, h2 { font-family: var(--ui); font-weight: 700; letter-spacing: -.03em; text-wrap: balance; margin: 0; }
video { display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.rotulo { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--cinza); }
.botao { display: inline-flex; align-items: center; padding: 14px 24px; border-radius: 999px; background: var(--tinta); color: var(--branco); font-weight: 600; font-size: 15px; justify-self: start; }

/* A barra: só a marca e a troca de idioma. */
.nav { position: fixed; z-index: 30; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 28px; padding: 22px var(--lado); font-size: 14px; color: var(--tinta-2); pointer-events: none; }
.nav .marca { margin-right: auto; font-weight: 700; font-size: 20px; color: var(--tinta); }
.nav .idioma { pointer-events: auto; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-decoration: none; color: var(--tinta); padding: 6px 10px; border-radius: 999px; }
/* Por cima do vídeo, um halo branco mantém a barra legível. */
.nav .marca, .nav .idioma { text-shadow: 0 0 10px #fff, 0 0 18px #fff, 0 0 3px #fff; transition: color .5s, text-shadow .5s; }
.nav.noite .marca, .nav.noite .idioma { color: #fff; text-shadow: none; }
/* Um fundo branco que some para baixo: a barra não fica em cima dos títulos das seções. */
.nav::before { content: ""; position: absolute; inset: 0 0 -22px; z-index: -1; background: linear-gradient(to bottom, #FFFFFF 58%, rgba(255,255,255,0)); transition: opacity .5s; }
.nav.noite::before { opacity: 0; }

/* ---------- 1 · capa + passagem ---------- */
.passagem { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--branco); }
/* A imagem do poster fica ATRÁS do vídeo, no mesmo enquadramento.
   Motivo (20/09): o vídeo da capa tem 896 KB e, enquanto ele não está
   inteiro no navegador, o elemento desenha PRETO. Como a câmera amplia sete
   vezes, esse preto vira a tela toda, e foi o que o João viu no computador
   dele: "na transição da primeira tela pra segunda trava tudo, fica preto".
   Na minha máquina não reproduz, porque aqui o arquivo vem do disco.
   Com a imagem atrás, o pior caso deixa de ser tela preta e passa a ser o
   primeiro quadro parado, que é exatamente o que a capa mostra. */
.passagem .camera { position: absolute; inset: 0; transform-origin: 54% 24%; will-change: transform; background: #FFFFFF url("/site/midia/capa-poster.jpg") 54% 24% / cover no-repeat; }
/* object-position igual à origem do zoom: o ensō do vídeo cai no mesmo ponto da tela
   em qualquer proporção (no celular o vídeo é cortado dos lados). */
.passagem video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 54% 24%; }
.passagem .veu-capa { display: none; }
.passagem .texto { position: absolute; z-index: 3; right: var(--lado); top: 50%; translate: 0 -42%; width: min(440px, 32%); display: grid; gap: 18px; }
.passagem h1 { font-size: clamp(34px, 3.9vw, 62px); line-height: 1; }
.passagem .texto p { margin: 0; color: var(--tinta-2); }
.passagem .clarao { position: absolute; inset: 0; z-index: 4; background: var(--branco); opacity: 0; pointer-events: none; }

/* ---------- 2 a 5 · uma cena só ---------- */
.cena { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--branco); }
.cena .centro { position: absolute; inset: 0; display: grid; place-items: center; }
.cena svg.circ { position: absolute; width: min(420px, 70vw); height: auto; overflow: visible; }
.celular { position: relative; width: 260px; height: 534px; border-radius: 42px; border: 10px solid #111; background: var(--branco); opacity: 0; will-change: transform; }
.celular .conteudo { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; padding: 16px 12px; }
.bolha { margin: 0; font-size: 12.5px; line-height: 1.35; padding: 9px 12px; border-radius: 14px; max-width: 90%; opacity: 0; }
.bolha.eu { align-self: flex-end; background: var(--tinta); color: var(--branco); border-bottom-right-radius: 4px; }
.bolha.ag { align-self: flex-start; background: var(--papel); border-bottom-left-radius: 4px; }
.feito-cel { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--branco); border: 1px solid var(--linha); font-size: 13px; line-height: 1.3; opacity: 0; }
.feito-cel small { display: block; color: var(--cinza); font-size: 11.5px; }
.ok { width: 18px; height: 18px; border-radius: 50%; background: var(--tinta); position: relative; flex: none; margin-left: auto; }
.ok::after { content: ""; position: absolute; left: 6.5px; top: 3px; width: 4px; height: 8px; border: solid var(--branco); border-width: 0 2px 2px 0; rotate: 45deg; }

.texto2 { position: absolute; left: var(--lado); top: 50%; translate: 0 -50%; width: min(400px, 30%); display: grid; gap: 14px; opacity: 0; }
.texto2 h2 { font-size: clamp(30px, 3.4vw, 50px); line-height: 1.04; }
.texto2 p { margin: 0; color: var(--tinta-2); }

.dia { position: absolute; inset: 0; pointer-events: none; }
.dia .relogio { position: absolute; right: var(--lado); top: 84px; font-weight: 700; font-size: clamp(44px, 5.4vw, 80px); letter-spacing: -.04em; font-variant-numeric: tabular-nums; opacity: 0; }
.dia .titulo3 { position: absolute; left: var(--lado); top: 92px; display: grid; gap: 8px; width: min(560px, 60vw); opacity: 0; }
.dia .titulo3 h2 { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.02; }
.dia .monte { position: absolute; left: 50%; top: 60%; translate: -50% -50%; width: min(540px, 88vw); display: grid; gap: 9px; }
.dia .item { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: 15px; background: var(--branco); border: 1px solid var(--linha); font-size: 15.5px; opacity: 0; transition: color .3s; }
.dia .item .ok { background: transparent; border: 1.5px solid var(--linha); transition: background .3s, border-color .3s; }
.dia .item .ok::after { opacity: 0; transition: opacity .2s; }
.dia .item.resolvido { color: var(--cinza); }
.dia .item.resolvido .ok { background: var(--tinta); border-color: var(--tinta); }
.dia .item.resolvido .ok::after { opacity: 1; }
.dia .item small { margin-left: 6px; color: var(--cinza); font-size: 12.5px; opacity: 0; transition: opacity .3s; }
.dia .item.resolvido small { opacity: 1; }
.dia .final { position: absolute; left: 50%; bottom: 7vh; translate: -50% 0; font-weight: 700; font-size: clamp(20px, 2vw, 26px); opacity: 0; white-space: nowrap; }

.s4 { position: absolute; inset: 0; pointer-events: none; }
.s4 .desenho { position: absolute; right: 0; top: 50%; translate: 0 -50%; width: min(1180px, 76vw); aspect-ratio: 1600 / 902; }
.s4 .desenho canvas { display: block; width: 100%; height: 100%; }
.s4 .fala { position: absolute; left: var(--lado); top: 50%; translate: 0 -50%; width: min(460px, 34%); display: grid; gap: 18px; }
.s4 .aspas { font-weight: 700; letter-spacing: -.03em; line-height: 1.04; font-size: clamp(30px, 3.4vw, 50px); margin: 0; }
.s4 .aspas span { display: inline-block; }
.s4 .resposta { color: var(--tinta-2); font-size: 18px; margin: 0; }
.s4 .recibo { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--tinta); font-size: 15px; }
.s4 .recibo .ok { margin-left: 0; width: 22px; height: 22px; }
.s4 .recibo .ok::after { left: 8px; top: 4px; width: 5px; height: 10px; }
.s4 .recibo small { color: var(--cinza); }
.s4 .fala .rotulo, .s4 .aspas span, .s4 .resposta, .s4 .recibo { opacity: 0; }

.s5 { position: absolute; inset: 0; pointer-events: none; }
.s5 .tela { position: absolute; inset: 0; clip-path: circle(0% at 70% 52%); }
.s5 .tela video { display: block; width: 100%; height: 100%; object-fit: cover; }
.s5 .tela::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 24%; background: linear-gradient(to bottom, rgba(255,255,255,0), #FFFFFF); }
.s5 .veu-topo { position: absolute; left: 0; right: 0; top: 0; height: 22%; background: linear-gradient(to bottom, rgba(255,255,255,.92) 0%, rgba(255,255,255,.6) 45%, rgba(255,255,255,0) 100%); }
.s5 .veu { position: absolute; left: 0; right: 0; bottom: 0; height: 58%; background: linear-gradient(to top, rgba(255,255,255,.97) 0%, rgba(255,255,255,.9) 38%, rgba(255,255,255,0) 100%); }
.s5 .sobre { position: absolute; left: var(--lado); bottom: 120px; width: min(620px, 80vw); display: grid; gap: 12px; opacity: 0; }
.s5 .sobre h2 { font-size: clamp(34px, 4.4vw, 66px); line-height: 1; }
.s5 .faixa { position: absolute; left: 0; right: 0; bottom: 34px; overflow: hidden; opacity: 0; }
.s5 .trabalhos { list-style: none; margin: 0; padding: 0 0 0 var(--lado); display: flex; gap: 42px; width: max-content; }
.s5 .trabalhos li { display: flex; align-items: center; gap: 12px; font-size: 15.5px; }
.s5 .trabalhos li small { display: block; color: var(--cinza); font-size: 13px; }
.s5 .trabalhos .ok { margin-left: 0; width: 22px; height: 22px; }
.s5 .trabalhos .ok::after { left: 8px; top: 4px; width: 5px; height: 10px; }

/* ---------- 6 · níveis ---------- */
.secao { padding: clamp(80px, 11vw, 150px) var(--lado); background: var(--branco); }
.secao.cinza { background: var(--papel); }
.miolo { max-width: 1240px; margin: 0 auto; }
.titulo-secao { display: grid; gap: 12px; max-width: 720px; margin-bottom: 48px; }
.titulo-secao h2 { font-size: clamp(32px, 4.2vw, 60px); line-height: 1.02; }
.titulo-secao p { margin: 0; color: var(--tinta-2); max-width: 52ch; }
.kanjis { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--tinta); }
.kj { position: relative; min-height: 400px; display: grid; place-items: center; border-right: 1px solid var(--linha); overflow: hidden; outline-offset: -3px; }
.kj:last-child { border-right: 0; }
.kj:nth-child(2) { background: var(--papel); }
.kj .nome-curto { position: absolute; top: 18px; left: 22px; font-weight: 700; color: var(--cinza); }
.kj .glifo { font: 400 clamp(96px, 11vw, 176px)/1 "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.kj .info { position: absolute; left: 22px; right: 22px; bottom: 24px; display: grid; gap: 4px; opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .5s; }
.kj .info b { font-size: 20px; }
.kj .info span { font-size: 14px; color: var(--tinta-2); }
.kj:hover .glifo, .kj:focus .glifo { transform: translateY(-54px) scale(.82); }
.kj:hover .info, .kj:focus .info { opacity: 1; transform: none; }
@media (hover: none) { .kj .info { opacity: 1; transform: none; } .kj .glifo { transform: translateY(-54px) scale(.82); } }

/* ---------- 7 · integrações ---------- */
.gota { position: relative; height: min(600px, 70vw); min-height: 460px; border-radius: 24px; overflow: hidden; background: var(--branco); border: 1px solid var(--linha); }
.gota canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.gota .pausa { position: absolute; right: 16px; top: 16px; font: 600 12px/1 var(--ui); padding: 8px 14px; border-radius: 999px; border: 1px solid var(--tinta); background: var(--branco); color: var(--tinta); cursor: pointer; }
.gota .pausa[aria-pressed="true"] { background: var(--tinta); color: var(--branco); border-color: var(--branco); }

/* ---------- sua conta Google ---------- */
.permissoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--tinta); }
.perm { display: grid; align-content: start; gap: 8px; padding: 24px 28px 8px 0; }
.perm + .perm { padding-left: 28px; border-left: 1px solid var(--linha); }
.perm b { font-size: 19px; }
.perm code { font: 600 12.5px/1 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--cinza); }
.perm p { margin: 0; color: var(--tinta-2); font-size: 15.5px; }
.conta-fim { margin: 40px 0 0; color: var(--tinta-2); }
.conta-fim a { color: var(--tinta); font-weight: 700; }

/* ---------- 8 · fechamento: a noite cai ---------- */
.fecho { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--branco); }
.fecho .ceu { position: absolute; inset: 0; background: var(--tinta); opacity: 0; }
.fecho .palco { position: absolute; inset: 0 0 72px; display: grid; place-items: center; }
.fecho svg.enso-branco { position: absolute; width: min(520px, 64vw, 62vh); height: auto; overflow: visible; opacity: 0; }
.fecho .centro-fecho { position: relative; display: grid; justify-items: center; gap: 22px; text-align: center; color: var(--branco); opacity: 0; }
.fecho .centro-fecho h2 { font-size: clamp(36px, 4.6vw, 70px); line-height: .98; max-width: 12ch; }
.fecho .centro-fecho .rotulo { color: rgba(255,255,255,.6); }
.fecho .centro-fecho .botao { background: var(--branco); color: var(--tinta); justify-self: center; }
.rodape { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; justify-content: space-between; padding: 22px var(--lado); border-top: 1px solid var(--linha); font-size: 14px; color: var(--tinta-2); background: var(--branco); }
.rodape nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.rodape a { text-decoration: none; }
.rodape a:hover { text-decoration: underline; }
/* A razão social: exigida pela verificação da empresa na Meta, e identifica o controlador (LGPD). */
.rodape .empresa { flex-basis: 100%; font-size: 12px; opacity: .8; }

/* ---------- celular ---------- */
@media (max-width: 860px) {
  body { font-size: 16px; }
  .passagem .veu-capa { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 58%; z-index: 2; background: linear-gradient(to top, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 45%, rgba(255,255,255,0) 100%); pointer-events: none; }
  .passagem .texto { left: var(--lado); right: var(--lado); width: auto; top: auto; bottom: 7svh; translate: none; gap: 14px; }
  .passagem h1 { font-size: 36px; }

  /* O celular NUNCA sobe por cima do texto (16/09, print do amigo do João).
     Antes ele era centralizado no espaço que sobrava, então quanto mais baixa
     a janela, mais ele subia: abaixo de ~780px de altura útil ele cobria o
     parágrafo, com 67px de invasão no aparelho dele. Agora é ancorado logo
     abaixo do texto e encolhe com a tela, mantendo a proporção. */
  .celular { width: auto; height: min(444px, calc(100svh - 300px)); aspect-ratio: 216 / 444; border-radius: 36px; border-width: 8px; }
  .texto2 { left: var(--lado); right: var(--lado); width: auto; top: 84px; translate: none; gap: 8px; }
  .texto2 h2 { font-size: 28px; }
  .texto2 p { font-size: 15px; }
  .cena .centro { top: 262px; align-items: start; }

  .dia .relogio { top: 70px; font-size: 40px; }
  .dia .titulo3 { width: auto; right: calc(var(--lado) + 120px); top: 76px; }
  .dia .titulo3 h2 { font-size: 26px; }
  .dia .monte { top: 58%; }
  .dia .item { padding: 11px 13px; font-size: 14.5px; }
  .dia .item small { white-space: nowrap; }
  .dia .final { bottom: 5svh; font-size: 20px; }

  /* o homem mora na metade direita do desenho: no telefone, só essa metade aparece */
  .s4 .desenho { width: 190vw; right: -2vw; top: 32%; }
  .s4 .fala { left: var(--lado); right: var(--lado); width: auto; top: auto; bottom: 6svh; translate: none; gap: 12px; }
  .s4 .aspas { font-size: 28px; }
  .s4 .resposta { font-size: 16px; }

  .s5 .tela video { object-position: 38% 50%; }
  .s5 .sobre { bottom: 168px; width: auto; right: var(--lado); }
  .s5 .sobre h2 { font-size: 34px; }
  /* no telefone a faixa vira uma grade 2 × 2, abaixo do título */
  .s5 .trabalhos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 14px; width: auto; padding: 0 var(--lado); }
  .s5 .trabalhos li { font-size: 14px; line-height: 1.3; align-items: flex-start; }
  .s5 .trabalhos li small { font-size: 12.5px; }
  .s5 .faixa { bottom: 22px; }

  .kanjis { grid-template-columns: 1fr; }
  .kj { min-height: 250px; border-right: 0; border-bottom: 1px solid var(--linha); }

  .gota { height: 520px; }

  .permissoes { grid-template-columns: 1fr; }
  .perm, .perm + .perm { padding: 20px 0; border-left: 0; }
  .perm + .perm { border-top: 1px solid var(--linha); }

  .fecho .palco { inset: 0 0 190px; }
  .fecho svg.enso-branco { width: min(92vw, 56svh); }
  .fecho .centro-fecho { gap: 16px; }
  .fecho .centro-fecho h2 { font-size: 32px; }
  .fecho .centro-fecho .botao { padding: 11px 18px; font-size: 14px; }
  .rodape { justify-content: center; text-align: center; padding-block: 18px; }
  .rodape nav { justify-content: center; }
}