/* Identidade editorial do site (01/11/2026), no molde dos vídeos do @zachex.
   Usada pelas páginas com $editorial = true (head.php troca o site.css e o
   identidade-2026.css por este). As outras seguem no visual anterior. */
  :root {
    /* 04/11/2026: paleta nova, White #FCFFFF e Matte black #28282B (antes #ffffff e #161616).
       O fio escuro subiu de #3a3a3a para #4a4a4e para manter o contraste sobre o preto mais claro. */
    --preto: #28282B; --branco: #FCFFFF;
    --cinza: #8a8a8a; --fio-claro: #d9d9d9; --fio-escuro: #4a4a4e;
    --titulo: 'Jost', 'Helvetica Neue', Arial, sans-serif;
    --texto: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
    --mono: 'DM Mono', ui-monospace, Consolas, monospace;
    --gutter: clamp(16px, 4vw, 48px);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { background: var(--branco); color: var(--preto); font-family: var(--texto); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
  a { color: inherit; text-decoration: none; }
  img { display: block; max-width: 100%; }
  h1, h2, p, li { text-wrap: pretty; }

  .tela { padding: 0 var(--gutter); }
  .tela--preta { background: var(--preto); color: var(--branco); }
  .mono { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
  .cinza { color: var(--cinza); }

  /* ---------- barra fixa: difference para ler em cima do branco e do preto ---------- */
  .barra { position: fixed; inset: 0 0 auto 0; z-index: 20; display: flex; justify-content: space-between; align-items: center;
    padding: 16px var(--gutter); color: #fff; mix-blend-mode: difference; pointer-events: none; }
  .barra > * { pointer-events: auto; }
  /* 02/11/2026: o nome escrito volta ao lado do símbolo, pedido do Renato */
  .marca { display: flex; align-items: center; gap: 12px; }
  .barra button { background: none; border: 0; color: inherit; cursor: pointer; font: inherit; text-transform: inherit; letter-spacing: inherit; }

  /* ---------- regra 1: o nome ocupa o terço de cima ---------- */
  .abre { min-height: 100svh; display: flex; flex-direction: column; padding-top: 64px; padding-bottom: 24px; }
  .abre-nome { font-family: var(--titulo); font-weight: 800; text-transform: uppercase; line-height: .86; letter-spacing: -.035em;
    font-size: clamp(64px, 21vw, 280px); margin-top: 2vh; }
  .abre-nome > span { display: block; }
  .abre-nome > span + span { padding-left: .9em; } /* escalonado, como o Vale Works */
  .abre-nome sup { font-size: .32em; vertical-align: top; position: relative; top: .25em; margin-left: .06em; }

  .duas { display: grid; grid-template-columns: minmax(84px, 1fr) 2.6fr; gap: 12px 20px; }
  .abre .duas { margin-top: clamp(28px, 6vh, 64px); max-width: 900px; }
  .abre h1 { font-family: var(--texto); font-weight: 700; font-size: clamp(20px, 2.6vw, 30px); line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
  .abre .promessa { margin-top: 12px; font-size: 15px; max-width: 46ch; }

  .prova { margin-top: auto; padding-top: 40px; max-width: 900px; }
  .prova li { list-style: none; border-top: 1px solid var(--fio-claro); padding: 10px 0; }
  .prova li:last-child { border-bottom: 1px solid var(--fio-claro); }
  .prova strong { font-weight: 700; }

  .botao { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding: 14px 20px; border: 1px solid currentColor;
    font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
  .botao:hover { background: var(--preto); color: var(--branco); }
  .tela--preta .botao:hover { background: var(--branco); color: var(--preto); }

  /* ---------- regra 2: cantos e parágrafo grande ---------- */
  .manifesto { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; padding-top: 64px; padding-bottom: 20px; }
  .cantos { display: flex; justify-content: space-between; gap: 16px; font-family: var(--texto); font-weight: 700; font-size: 12px;
    line-height: 1.25; text-transform: uppercase; letter-spacing: .01em; }
  .cantos > :last-child { text-align: right; }
  .cantos--meio { margin-top: 28px; }
  .manifesto-texto { align-self: center; padding: 48px 0; font-family: var(--texto); font-weight: 700; text-transform: uppercase;
    font-size: clamp(22px, 5.2vw, 56px); line-height: 1.06; letter-spacing: -.015em; }
  .manifesto-texto span { display: block; }

  /* ---------- regra 3: uma palavra abre cada tela ---------- */
  .palavra { font-family: var(--titulo); font-weight: 800; text-transform: uppercase; line-height: .82; letter-spacing: -.04em;
    font-size: min(19vw, 230px); padding-top: 72px; }
  #jobs .palavra { padding-left: .07em; } /* o J da Jost passa da margem e cortava */
  .sub { margin: 14px 0 28px; }

  .lista-casos li { list-style: none; border-top: 1px solid var(--fio-claro); padding: 18px 0; }
  .lista-casos li:last-child { border-bottom: 1px solid var(--fio-claro); }
  .lista-casos .cliente { font-family: var(--titulo); font-weight: 800; text-transform: uppercase; font-size: 15px; letter-spacing: -.01em; line-height: 1.1; }
  .lista-casos p { font-size: 17px; line-height: 1.35; }
  .lista-casos strong { font-family: var(--titulo); font-weight: 800; }

  .dizem { padding-bottom: 72px; }
  .dizem figure { border-top: 1px solid var(--fio-claro); padding: 24px 0; }
  .dizem img { width: 100%; max-width: 96px; aspect-ratio: 1; height: auto; object-fit: cover; filter: grayscale(1); }
  .dizem blockquote { font-size: 17px; line-height: 1.45; }
  .dizem figcaption { margin-top: 10px; }
  .dizem figcaption b { display: block; font-family: var(--texto); font-weight: 700; font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--preto); }

  .time { display: grid; grid-template-columns: repeat(3, minmax(0, 150px)); gap: 20px; }
  .time img { width: 100%; max-width: 140px; aspect-ratio: 1; object-fit: cover; filter: grayscale(1) contrast(1.05); }
  .time b { display: block; margin-top: 10px; font-size: 14px; line-height: 1.2; }
  .time span { display: block; margin-top: 4px; }
  .time-frase { margin: 32px 0 0; padding-bottom: 72px; font-weight: 700; font-size: clamp(20px, 2.6vw, 30px); line-height: 1.15; letter-spacing: -.02em; max-width: 26ch; text-wrap: balance; }

  .jobs { padding-bottom: 72px; }
  /* parede de logos: grade com fio, logo em branco chapado, frentes embaixo */
  .jobs ul { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--fio-escuro); }
  .jobs li { list-style: none; border-bottom: 1px solid var(--fio-escuro); } /* 05/11/2026: só as linhas entre as fileiras, sem as verticais (pedido do Renato) */
  .jobs a { display: grid; grid-template-rows: 64px auto; place-items: center; gap: 12px; height: 100%; padding: 24px 12px 14px; }
  /* --l vem do index.php: largura que iguala a área de tinta entre logos de formatos diferentes */
  .job-logo { --esc: 1; width: calc(var(--l, 100) * var(--esc) * 1px); max-width: 100%; height: auto; filter: brightness(0) invert(1); opacity: .9; transition: opacity .25s, transform .25s; }
  .jobs a:hover .job-logo { opacity: 1; transform: scale(1.05); }
  .jobs a .mono { text-align: center; font-size: 10px; line-height: 1.5; }
  .jobs li:last-child:nth-child(odd) { grid-column: span 2; } /* nove em duas colunas: a última ocupa a linha */
  @media (min-width: 1024px) { .jobs li:last-child:nth-child(odd) { grid-column: auto; } .jobs ul { grid-template-columns: repeat(3, 1fr); } .jobs a { grid-template-rows: 74px auto; } .job-logo { --esc: 1.15; } }

  .foto { margin-top: 20px; }
  .foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 45%; }
  .foto .cantos { margin-top: 8px; font-size: 10px; }
  .endereco { margin-top: 32px; font-weight: 700; text-transform: uppercase; font-size: clamp(18px, 4.4vw, 34px); line-height: 1.1; letter-spacing: -.01em; }
  .contato { padding-bottom: 48px; }

  .pe { padding-top: 20px; padding-bottom: 20px; } /* embaixo, alinhado com os cantos da metade esquerda */
  .pe .cantos { padding-right: 84px; } /* folga lateral para o botão flutuante do WhatsApp não cobrir o canto direito */
  /* .subir: ver o bloco de 05/11/2026 no fim do arquivo */

  /* ---------- regra 4: menu em tela cheia ---------- */
  .menu { position: fixed; inset: 0; z-index: 1000; background: var(--preto); color: var(--branco); display: flex; flex-direction: column;
    padding: 16px var(--gutter) 20px; transform: translateY(-100%); transition: transform .45s cubic-bezier(.7, 0, .2, 1); overflow-y: auto; }
  .menu.aberto { transform: none; }
  .menu-topo { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--fio-escuro); }
  .menu-topo button { background: none; border: 0; color: inherit; font-size: 26px; line-height: 1; cursor: pointer; }
  /* 02/11/2026: um menu só para o site inteiro, no desenho do menu antigo que o Renato preferiu:
     dois grupos numerados (o que fazemos, para o seu mercado), botão do WhatsApp e endereço.
     Time, Jobs e Dizem saíram (não fazem falta no menu, Renato). */
  .menu-corpo { counter-reset: item; display: grid; grid-template-columns: 1fr; row-gap: 40px; padding-top: 40px; }
  .menu-titulo { display: block; margin-bottom: 18px; color: var(--cinza); letter-spacing: .2em; }
  .menu-grupo li { list-style: none; counter-increment: item; display: flex; align-items: baseline; gap: 16px; }
  .menu-grupo li + li { margin-top: 10px; }
  .menu-grupo li::before { content: counter(item, decimal-leading-zero); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--cinza); min-width: 20px; }
  .menu-grupo a { font-family: var(--titulo); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; line-height: 1.05;
    font-size: clamp(24px, 6.4vw, 34px); white-space: nowrap; transition: opacity .2s; }
  .menu-grupo a:hover { opacity: .55; }
  .menu-grupo a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .14em; }
  .menu-fim { border-top: 1px solid var(--fio-escuro); padding-top: 28px; display: flex; flex-direction: column; gap: 24px; }
  .menu-fim .botao { margin-top: 0; align-self: flex-start; }
  .menu-fim .botao:hover { background: var(--branco); color: var(--preto); }
  .menu-pe { line-height: 1.8; text-transform: none; letter-spacing: .06em; }
  @media (min-width: 900px) {
    .menu { padding-top: 24px; }
    .menu-corpo { grid-template-columns: repeat(3, 1fr); column-gap: 70px; padding-top: 12vh; max-width: 1280px; width: 100%; margin: 0 auto; }
    .menu-grupo a { font-size: clamp(22px, 1.9vw, 30px); }
    .menu-fim { grid-column: 3; grid-row: 1; border-top: 0; padding-top: 0; }
  }
  /* 01/11/2026: a marca no topo é só o símbolo das bolinhas; o texto repetia o DESIGN IDEAL da abertura */
  .simbolo { display: block; height: 38px; width: auto; fill: currentColor; }

  /* tela larga, 02/11/2026, versão dividida (escolhida pelo Renato depois de recusar o grid de 12):
     a metade esquerda fica parada com a palavra da tela atual, que troca ao rolar;
     a metade direita é o celular aprovado, rolando igual. */
  .lado { display: none; }
  @media (min-width: 900px) {
    .lado { display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; width: 50vw; z-index: 5;
      padding: 64px var(--gutter) 20px; background: var(--branco); color: var(--preto); transition: background .35s, color .35s; }
    .lado.escuro { background: var(--preto); color: var(--branco); }
    .lado-palavra { font-family: var(--titulo); font-weight: 800; text-transform: uppercase; letter-spacing: -.04em; line-height: .84;
      font-size: 9.4vw; padding-left: .06em; transition: opacity .25s, transform .25s; }
    .lado-palavra > span { display: block; }
    .lado-palavra > span + span { padding-left: .9em; }
    .lado-palavra sup { font-size: .32em; vertical-align: top; position: relative; top: .25em; margin-left: .06em; }
    .lado-palavra.troca { opacity: 0; transform: translateY(14px); }
    .lado .cantos { margin-top: auto; font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: .08em; }
    .lado-fio { position: absolute; top: 0; bottom: 0; right: 0; width: 1px; background: var(--fio-claro); }
    .lado.escuro .lado-fio { background: var(--fio-escuro); }

    .tela { margin-left: 50vw; }
    .abre, .manifesto, .sec { min-height: 100vh; }
    .sec { padding-top: 64px; }
    .abre-nome, .sec .palavra { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .abre .duas { margin-top: auto; }
    .prova { margin-top: 40px; }
    .abre h1 { font-size: clamp(24px, 2.2vw, 34px); }
    .manifesto-texto { font-size: clamp(28px, 3.3vw, 50px); }
    .sec .sub { margin-top: 0; }
    .time-frase, .dizem, .jobs { padding-bottom: 64px; }
    .jobs .mono { flex-basis: 40%; }
    .foto { max-width: 480px; }
  }

  /* entrada: a palavra sobe de baixo, os blocos em cascata */
  .js .surge { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
  .js .surge.entrou { opacity: 1; transform: none; }
  /* a primeira tela não espera o JS: escondida, ela empurrava o LCP para ~7 s no 4G lento */
  .js .abre .surge { opacity: 1; transform: none; transition: none; }
  @media (prefers-reduced-motion: reduce) { .js .surge { opacity: 1; transform: none; transition: none; } .menu { transition: none; } }

  /* ---------- chat do WhatsApp (includes/chat.php): o mesmo bloco do identidade-2026.css,
     com as variáveis de lá mapeadas para as daqui ---------- */
  .zap { --tinta-clara: #28282B; --tinta: #f2f2f2; --tinta-3: #8c8c8c; --tinta-clara-3: #8a8a8a; --linha-clara: #e6e6e6; --linha-clara-forte: #c4c4c4; --display: var(--texto); }
.zap { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 990; }
.zap-bt {
  width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--branco); color: var(--tinta-clara); display: grid; place-items: center;
  box-shadow: 0 10px 28px rgba(0,0,0,.28); transition: transform .2s ease;
}
.zap-bt:hover { transform: translateY(-2px); }
.zap-bt .wa-icone { width: 27px; height: 27px; }
.zap-dica {
  position: absolute; right: 70px; bottom: 9px; white-space: nowrap; width: max-content; display: flex; align-items: center; gap: 9px;
  background: var(--branco); color: var(--tinta-clara); border: 1px solid var(--tinta-clara);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 12px 8px 8px; opacity: 0; translate: 8px 0; transition: opacity .3s ease, translate .3s ease; pointer-events: none;
}
.zap.dica .zap-dica { opacity: 1; translate: none; }
.zap-dica img { width: 24px; height: 24px; object-fit: cover; filter: grayscale(1); }
.zap-card {
  position: absolute; right: 0; bottom: 72px; width: min(330px, calc(100vw - 32px)); display: none;
  background: var(--branco); color: var(--tinta-clara); border: 1px solid var(--tinta-clara); box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.zap.aberto .zap-card { display: block; }
.zap.aberto .zap-dica { display: none; }
.zap-topo { background: var(--preto); color: var(--tinta); padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.zap-ava { width: 42px; height: 42px; object-fit: cover; filter: grayscale(1); flex: none; }
.zap-topo b { display: block; font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -.01em; color: var(--tinta); }
.zap-topo small { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); margin-top: 3px; }
.zap-fecha { margin-left: auto; background: none; border: 0; color: var(--tinta); font-size: 24px; line-height: 1; cursor: pointer; padding: 4px; }
.zap-corpo { background: #f2f2f2; padding: 16px; }
.zap-msg { background: var(--branco); border: 1px solid var(--linha-clara); padding: 11px 13px; max-width: 94%;
  font-family: var(--display); font-size: 14.5px; line-height: 1.45; color: var(--tinta-clara); }
.zap-form { padding: 14px 16px 16px; }
.zap-form input {
  width: 100%; font-family: var(--display); font-size: 16px; padding: 11px 12px; margin-bottom: 8px;
  border: 1px solid var(--linha-clara-forte); border-radius: 0; background: var(--branco); color: var(--tinta-clara);
}
.zap-form input:focus { outline: none; border-color: var(--tinta-clara); }
.zap-isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.zap-erro { color: #c0392b; font-family: var(--display); font-size: 13px; font-weight: 600; margin: -2px 0 8px; }
.zap-erro:empty { display: none; }
.zap-ir {
  display: flex; width: 100%; align-items: center; justify-content: center; gap: 9px; padding: 14px; cursor: pointer;
  border: 0; border-radius: 0; background: var(--preto); color: var(--tinta);
  font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
}
.zap-ir:hover { background: #1c1c1e; }
.zap-lgpd { font-family: var(--display); font-size: 11.5px; line-height: 1.4; color: var(--tinta-clara-3); margin-top: 9px; text-align: center; }
@media (min-width: 760px) { .zap { right: 24px; bottom: 24px; } }


  .wa-icone { flex: none; }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* ---------- páginas internas ---------- */
  /* nome do serviço: menor que o da home (TRÁFEGO tem sete letras) e sem o degrau do IDEAL */
  .abre--interna .abre-nome { font-size: clamp(56px, 17.5vw, 280px); }
  .abre--interna .abre-nome > span + span, .lado--interna .lado-palavra > span + span { padding-left: 0; }

  .entregas { counter-reset: e; }
  .entregas li { list-style: none; display: flex; gap: 16px; align-items: baseline; border-top: 1px solid var(--fio-escuro); padding: 12px 0; counter-increment: e; }
  .entregas li:last-child { border-bottom: 1px solid var(--fio-escuro); }
  .entregas li::before { content: counter(e, decimal-leading-zero); font-family: var(--mono); font-size: 11px; color: var(--cinza); min-width: 2.4em; }
  .entregas span { font-family: var(--titulo); font-weight: 800; text-transform: uppercase; letter-spacing: -.015em; line-height: 1.05; font-size: clamp(20px, 5.4vw, 34px); }
  .entregas, .passos, .texto-longo, .duvidas { padding-bottom: 72px; }

  .passos > div { border-top: 1px solid var(--fio-claro); padding: 20px 0; }
  .passos > div:last-child { border-bottom: 1px solid var(--fio-claro); }
  .passos h3 { font-family: var(--titulo); font-weight: 800; text-transform: uppercase; letter-spacing: -.015em; font-size: 22px; line-height: 1.05; margin-bottom: 8px; }
  .passos p { font-size: 17px; }

  .texto-longo .duas p { font-size: 18px; line-height: 1.45; }
  .texto-longo .duas p + p { margin-top: 16px; }
  .texto-longo strong { font-weight: 700; }

  /* ---------- dúvidas (includes/editorial-duvidas.php) ---------- */
  .duvidas details { border-top: 1px solid var(--fio-claro); }
  .duvidas details:last-of-type { border-bottom: 1px solid var(--fio-claro); }
  .duvidas summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 16px 0;
    font-weight: 700; font-size: 18px; line-height: 1.25; letter-spacing: -.01em; }
  .duvidas summary::-webkit-details-marker { display: none; }
  .duvidas summary h3 { font: inherit; text-transform: inherit; letter-spacing: inherit; margin: 0; }
  .duvidas summary::after { content: '+'; font-family: var(--mono); font-weight: 400; font-size: 20px; line-height: 1; }
  .duvidas details[open] summary::after { content: '−'; }
  .duvidas details p { padding: 0 0 18px; font-size: 16px; max-width: 58ch; }

  /* ---------- contato: formulário e veja também (includes/editorial-contato.php) ---------- */
  .contato .botao svg { width: 16px; height: 16px; }
  .form { margin-top: 48px; max-width: 560px; }
  .form-ou { margin-bottom: 8px; }
  .form label { display: block; margin-top: 18px; }
  .form label > span { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--cinza); }
  .form label em { font-style: normal; text-transform: none; }
  .form input, .form textarea { width: 100%; border: 0; border-bottom: 1px solid var(--preto); border-radius: 0; background: none; padding: 8px 0;
    font-family: var(--texto); font-size: 17px; color: inherit; resize: vertical; }
  .form input:focus, .form textarea:focus { outline: none; border-bottom-width: 2px; }
  .form button { cursor: pointer; background: var(--preto); color: var(--branco); border-color: var(--preto); margin-top: 24px; }
  .form button:hover { background: var(--branco); color: var(--preto); }
  .form-isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .aviso { margin-top: 48px; padding: 14px 16px; border: 1px solid var(--preto); font-weight: 700; }

  .veja { margin-top: 56px; }
  .veja ul { margin-top: 10px; }
  .veja li { list-style: none; border-top: 1px solid var(--fio-claro); }
  .veja li:last-child { border-bottom: 1px solid var(--fio-claro); }
  .veja a { display: flex; justify-content: space-between; padding: 10px 0; font-weight: 700; transition: padding .2s; }
  .veja a::after { content: '→'; font-family: var(--mono); font-weight: 400; }
  .veja a:hover { padding-left: 8px; }

  /* ---------- casos das páginas internas (fundo preto, um por linha) ---------- */
  .lista-grandes { padding-bottom: 72px; }
  .lista-grandes li { list-style: none; border-top: 1px solid var(--fio-escuro); padding: 18px 0 22px; }
  .lista-grandes li:last-child { border-bottom: 1px solid var(--fio-escuro); }
  .lista-grandes .cantos { font-size: 12px; }
  .lista-grandes .cantos a:hover { color: var(--cinza); }
  .caso-frase { margin: 14px 0 10px; font-weight: 700; font-size: clamp(20px, 4.4vw, 28px); line-height: 1.2; letter-spacing: -.015em; max-width: 34ch; }
  .caso-mais { margin: 0 0 10px; font-size: 16px; line-height: 1.45; color: #d4d4d4; max-width: 58ch; }
  .passos h3 a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
  .texto-longo a, .caso-frase a, .caso-mais a { text-decoration: underline; text-underline-offset: 3px; }

  /* palavra gigante nunca quebra: o editorial.js diminui a fonte quando ela não cabe */
  .palavra, .abre-nome span, .lado-palavra span { white-space: nowrap; }

  /* ---------- link na bio: preço, celulares e planos ---------- */
  .botao--cheio { background: var(--preto); color: var(--branco); border-color: var(--preto); }
  .botao--cheio:hover { background: var(--branco); color: var(--preto); }
  .botao svg { width: 16px; height: 16px; }
  .lb-preco { margin-top: 16px; font-size: 15px; }
  .lb-preco b { font-weight: 700; }
  .lb-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
  .lb-ver { margin-top: 20px; text-decoration: underline; text-underline-offset: 3px; }
  /* 02/11/2026: os dois prints soltos, lado a lado e cortados em alturas diferentes, não
     funcionaram (Renato). Voltam a ser celulares: moldura escura, cantos arredondados, um
     na frente do outro, como na versão anterior da página. */
  .celulares { position: relative; margin: 36px 0 0; width: 100%; max-width: 340px; }
  .cel { display: block; border: 6px solid var(--preto); border-radius: 26px; overflow: hidden; background: #000; line-height: 0;
    box-shadow: 0 22px 44px rgba(0, 0, 0, .28); }
  .cel img { display: block; width: 100%; height: auto; }
  .cel--frente { position: relative; z-index: 2; width: 72%; margin-left: auto; }
  .cel--tras { position: absolute; z-index: 1; left: 0; top: 34px; width: 58%; }
  .celulares figcaption { margin-top: 14px; text-align: right; }

  .inclui { font-size: 17px; line-height: 1.45; max-width: 56ch; margin-bottom: 28px; color: #d4d4d4; }
  .inclui b { color: var(--branco); }
  .plano { border-top: 1px solid var(--fio-escuro); padding: 18px 0 26px; }
  .plano .cantos { font-size: 12px; }
  .plano-preco { font-family: var(--titulo); font-weight: 800; text-transform: uppercase; letter-spacing: -.03em; line-height: 1; font-size: clamp(44px, 12vw, 72px); margin: 14px 0 8px; }
  .plano-preco span { font-family: var(--mono); font-weight: 400; font-size: 13px; letter-spacing: .06em; margin-left: 6px; color: var(--cinza); }
  .plano-para { font-weight: 700; font-size: 17px; margin-bottom: 10px; }
  .plano ul li { list-style: none; padding: 6px 0; border-bottom: 1px solid var(--fio-escuro); font-size: 15px; color: #d4d4d4; }
  .plano ul b { color: var(--branco); }
  .plano-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
  .plano-acoes .mono { margin-top: 20px; text-decoration: underline; text-underline-offset: 3px; }
  .botao--claro { background: var(--branco); color: var(--preto); border-color: var(--branco); }
  .botao--claro:hover { background: var(--preto); color: var(--branco); }
  .tela--preta .botao:not(.botao--claro):hover { background: var(--branco); color: var(--preto); }
  .plano-nota { border-top: 1px solid var(--fio-escuro); padding: 18px 0 72px; line-height: 1.6; text-transform: none; letter-spacing: .02em; max-width: 70ch; }
  .texto-longo .palavra + .duas { margin-top: 32px; }

  /* ================================================================
     Transições (05/11/2026), mecânica do reel do @franchu.web a partir de 1:13.
     Laboratório com as cinco isoladas em testes/transicoes-2026-11/.
     Regra do commit 3d79bde mantida: nada aqui esconde o H1 nem a primeira tela.
     Tudo escopado em .js: sem JS a página fica como antes.
     ================================================================ */
  :root { --sai: cubic-bezier(.2, .7, .1, 1); --cruza: cubic-bezier(.7, 0, .2, 1); }
  @keyframes tr-sobe { to { transform: none; } }
  @keyframes tr-letra { to { opacity: 1; transform: none; } }
  @keyframes tr-letra-de { from { opacity: 0; transform: translateY(.35em); } }

  /* 01 · manifesto linha por linha (ref. 1:13): cada linha sobe de trás de uma máscara.
     A folga em cima e embaixo é para o acento e a cedilha não serem cortados pela máscara. */
  .js .manifesto-texto.surge { opacity: 1; transform: none; }
  .js .manifesto-texto > span { overflow: hidden; padding: .12em 0 .14em; margin: -.12em 0 -.14em; }
  .js .manifesto-texto .ln { display: block; transform: translateY(115%); }
  .js .manifesto-texto.roda .ln { animation: tr-sobe .95s var(--sai) forwards; animation-delay: calc(var(--i) * 90ms + 120ms); }

  /* 02 · contato, o nome que se abre (ref. 1:22): DESIGN e IDEAL se afastam,
     uma janela arredondada abre entre os dois e cresce até virar a foto inteira;
     as palavras terminam nos cantos. Medidas em cqw, relativas à largura da foto. */
  .foto-abre { position: relative; overflow: hidden; container-type: inline-size; }
  .foto-abre .w { position: absolute; z-index: 2; left: 50%; top: 50%; opacity: 0; pointer-events: none; white-space: nowrap; color: var(--branco);
    font-family: var(--titulo); font-weight: 800; text-transform: uppercase; letter-spacing: -.035em; line-height: .86; font-size: 11cqw; }
  .js .foto.surge { opacity: 1; transform: none; }
  .js .foto-abre { background: var(--preto); }
  .js .foto-abre::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(rgba(0,0,0,.38), rgba(0,0,0,0) 32%, rgba(0,0,0,0) 62%, rgba(0,0,0,.42)); }
  .js .foto-abre img { clip-path: inset(50% 50% 50% 50% round 999px); transform: scale(1.18); }
  .js .foto-abre.roda img { animation: tr-janela 3.4s var(--cruza) forwards; }
  .js .foto-abre.roda .w1 { animation: tr-w1 3.4s var(--cruza) forwards; }
  .js .foto-abre.roda .w2 { animation: tr-w2 3.4s var(--cruza) forwards; }
  @keyframes tr-janela {
    0%, 34%  { clip-path: inset(50% 50% 50% 50% round 999px); transform: scale(1.18); }
    50%, 60% { clip-path: inset(40% 43% 40% 43% round 4cqw); transform: scale(1.12); }
    100%     { clip-path: inset(0 0 0 0 round 0); transform: none; }
  }
  @keyframes tr-w1 {
    0%       { opacity: 0; left: 50%; top: 50%; transform: translate(calc(-100% - .1em), -30%); }
    16%, 30% { opacity: 1; left: 50%; top: 50%; transform: translate(calc(-100% - .1em), -50%); }
    48%, 60% { opacity: 1; left: 50%; top: 50%; transform: translate(calc(-100% - 7cqw), -50%); }
    100%     { opacity: 1; left: 0%; top: 0%; transform: translate(5cqw, 5cqw); }
  }
  @keyframes tr-w2 {
    0%       { opacity: 0; left: 50%; top: 50%; transform: translate(.1em, -30%); }
    16%, 30% { opacity: 1; left: 50%; top: 50%; transform: translate(.1em, -50%); }
    48%, 60% { opacity: 1; left: 50%; top: 50%; transform: translate(7cqw, -50%); }
    100%     { opacity: 1; left: 100%; top: 100%; transform: translate(calc(-100% - 5cqw), calc(-100% - 5cqw)); }
  }

  /* 03 · contador nos casos (ref. 1:33): o número conta do zero quando o caso entra.
     Algarismo de largura fixa para a linha não tremer enquanto conta. */
  .conta { font-variant-numeric: tabular-nums; }

  /* 04 · palavra que se parte (ref. 1:38).
     Desktop: a palavra da metade esquerda se abre ao meio (metade sai para cada lado)
     e a próxima chega letra por letra. Celular: a palavra de cada seção entra letra por letra. */
  .lado-palavra .ch { display: inline-block; transition: transform .3s var(--cruza), opacity .3s ease; }
  .lado-palavra.parte .esq { transform: translateX(-.55em); opacity: 0; }
  .lado-palavra.parte .dir { transform: translateX(.55em); opacity: 0; }
  /* 05/11/2026 (Renato): o efeito do COMO, letra por letra subindo solta, vale para
     todos os títulos grandes. A palavra de seção roda quando chega a um quarto da tela. */
  .lado-palavra.chega .ch { animation: tr-letra-de .6s var(--sai) backwards; animation-delay: calc(var(--d) * 1ms); }
  .js .palavra.surge { opacity: 1; transform: none; }
  .js .palavra .ch { display: inline-block; opacity: 0; transform: translateY(.35em); }
  .js .palavra.roda .ch { animation: tr-letra .6s var(--sai) forwards; animation-delay: calc(var(--d) * 1ms); }

  /* ---------- hero que se monta (05/11/2026, Renato) ----------
     A tela abre em branco e se monta: nome letra por letra (o efeito do COMO), depois
     o rótulo, o H1, a promessa e o botão; as bolinhas do símbolo caem uma de cada vez
     e o nome e o MENU da barra aparecem por último.
     Só CSS e sem .js: começa no primeiro quadro, não espera o script (regra do 3d79bde).
     Desde 05/11/2026 o H1 e a promessa não animam (eram o LCP). */
  .abre-nome .ch, .lado-palavra .ch { display: inline-block; }
  .abre-nome .ch, .lado-palavra .ch { animation: tr-letra-de .6s var(--sai) backwards; animation-delay: calc(var(--b, 0ms) + 120ms + var(--d) * 1ms); }
  .abre .duas > .mono { animation: tr-entra .7s var(--sai) .55s backwards; }
  /* 05/11/2026 (Renato): letra por letra só nas palavras gigantes. Fora delas o efeito é
     simples: o H1 sobe inteiro, e os subtítulos entram junto com o bloco (.surge). */
  /* 05/11/2026: o H1 e a promessa deixaram de entrar animados. Eram o LCP da página e o atraso
     de 0,65 s e 0,8 s levava o LCP de ~1,2 s para ~2 s no 4G lento. Agora aparecem no primeiro quadro. */
  /* o editorial.js dá um text-indent à linha para a tinta encostar na margem (rente);
     text-indent é herdado e cada letra em inline-block aplicava o recuo de novo.
     No J o recuo é grande e o JOBS abria (05/11/2026). Só a linha recua, a letra não. */
  .ch { text-indent: 0; }
  .abre .botao        { animation: tr-entra .7s var(--sai) .95s backwards; }
  .lado .cantos       { animation: tr-aparece .6s ease 1s backwards; }
  .barra .marca > span, #abre-menu { animation: tr-aparece .5s ease 1.6s backwards; }
  @keyframes tr-entra { from { opacity: 0; transform: translateY(14px); } }
  @keyframes tr-aparece { from { opacity: 0; } }

  /* 05 · símbolo que se monta (ref. 1:42): uma bolinha de cada vez (Renato, 05/11/2026),
     na barra quando a página abre e no topo do menu toda vez que ele abre. */
  .simbolo { overflow: visible; }
  .simbolo circle { transform-box: fill-box; transform-origin: 50% 100%; }
  .barra .simbolo circle { animation: tr-cai .5s cubic-bezier(.3, 0, .3, 1) both; animation-delay: calc(var(--i) * 350ms + 150ms); }
  .menu.aberto .menu-topo .simbolo circle { animation: tr-cai .5s cubic-bezier(.3, 0, .3, 1) both; animation-delay: calc(var(--i) * 300ms + 300ms); }
  @keyframes tr-cai {
    0%   { transform: translateY(-260%); opacity: 0; }
    10%  { opacity: 1; }
    62%  { transform: translateY(0) scale(1.08, .9); opacity: 1; }
    80%  { transform: translateY(-9%) scale(.97, 1.03); }
    100% { transform: none; opacity: 1; }
  }

  /* sem movimento: tudo direto no estado final */
  @media (prefers-reduced-motion: reduce) {
    .js .manifesto-texto .ln, .js .foto-abre img, .js .palavra .ch, .lado-palavra .ch, .abre-nome .ch, .simbolo circle,
    .ch, .abre .duas > .mono, .abre h1, .abre .promessa, .abre .botao, .lado .cantos, .barra .marca > span, #abre-menu { animation: none !important; transition: none !important; transform: none !important; opacity: 1 !important; clip-path: none !important; }
    .js .foto-abre .w { display: none; }
  }

/* ---------- 05/11/2026: mar no fundo da primeira tela ----------
   Camada atrás do conteúdo do .abre. O vídeo entra transparente e sobe para 12% quando começa a tocar;
   o grayscale garante o P&B mesmo se o arquivo for trocado por um colorido.
   No desktop a camada recua 50vw para passar por trás da metade esquerda, que fica sem fundo
   (.sobre-mar, posto pelo editorial.js) enquanto a primeira tela manda nela. */
.abre { position: relative; isolation: isolate; }
.mar { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.mar video { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: 0; transition: opacity 1.6s ease; }
.mar.tocando video { opacity: .12; }
@media (min-width: 900px) {
  .mar { left: -50vw; }
  .lado.sobre-mar { background: transparent; }
  .lado.sobre-mar .lado-fio { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mar { display: none; } }

/* 05/11/2026: o H1 da home em caixa alta, pedido do Renato. Só a home (#topo); as internas seguem como estão.
   Feito no CSS para o texto do H1 continuar normal para o Google. */
#topo h1 { text-transform: uppercase; letter-spacing: -.01em; }

/* 05/11/2026: no depoimento a coluna da foto tem a largura da foto. Com o 1fr do .duas ela crescia
   e a foto ficava longe do texto e do nome (pedido do Renato). */
.dizem .duas { grid-template-columns: 96px 1fr; gap: 12px 28px; align-items: start; }
.dizem img { width: 96px; }

/* 05/11/2026: no celular a seção Dizem fica preta, para separar melhor da seção Time logo abaixo
   (pedido do Renato). No desktop segue branca: lá a metade esquerda já marca a troca de seção. */
@media (max-width: 899px) {
  .dizem { background: var(--preto); color: var(--branco); }
  .dizem figure { border-top-color: var(--fio-escuro); }
  .dizem figcaption b { color: var(--branco); }
}

/* 05/11/2026: troca do nome pequeno da barra, só na home. As duas frases ocupam a mesma célula
   e a máscara (overflow) esconde a que está fora; cada letra sobe com o seu atraso (--d). */
.marca-troca { display: inline-grid; overflow: hidden; line-height: 1.25; }
.marca-troca > span { grid-area: 1 / 1; white-space: nowrap; }
.marca-troca .mc { display: inline-block; transition: transform .55s var(--sai); transition-delay: calc(var(--d) * 1ms); }
.marca-troca .mt-b .mc { transform: translateY(110%); }
.barra.com-nome .mt-a .mc { transform: translateY(-110%); }
.barra.com-nome .mt-b .mc { transform: none; }
@media (prefers-reduced-motion: reduce) { .marca-troca .mc { transition: none; } }

/* 05/11/2026: playlist do escritório, na abertura (coluna da esquerda do .duas, no lugar do Desde 2006). As quatro bolinhas do símbolo, do maior
   para o menor como no desenho, viram barras de som: cada uma estica e volta no seu tempo.
   Classe .playlist, não .tocando: .tocando já é o estado do vídeo do mar (.mar.tocando) e a
   margem e o padding vazavam para o fundo da abertura, que encurtava e deixava uma faixa branca. */
.playlist { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; align-self: start; }
.playlist .eq { margin-bottom: 6px; }
.playlist b { font-weight: 500; color: var(--preto); white-space: nowrap; }
.playlist-ir { display: inline-block; font-size: 13px; transition: transform .25s var(--sai); }
.playlist:hover .playlist-ir, .playlist:focus-visible .playlist-ir { transform: translate(2px, -2px); }
.playlist:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 26px; }
.eq i { display: block; background: var(--preto); border-radius: 999px; width: var(--w); height: var(--w); animation: eq-sobe var(--t) ease-in-out infinite alternate; animation-delay: var(--a); }
.eq i:nth-child(1) { --w: 10px; --t: .62s; --a: -.2s; --h: 26px; }
.eq i:nth-child(2) { --w: 8px;  --t: .48s; --a: -.35s; --h: 20px; }
.eq i:nth-child(3) { --w: 6px;  --t: .7s;  --a: -.1s; --h: 24px; }
.eq i:nth-child(4) { --w: 4px;  --t: .55s; --a: -.45s; --h: 16px; }
@keyframes eq-sobe { to { height: var(--h); } }
@media (prefers-reduced-motion: reduce) { .eq i { animation: none; } }

/* 05/11/2026: sem o fio do meio, a playlist ficava solta no alto da coluna. Ela desce para a linha de
   baixo da abertura: a última linha (Chillhop'78) assenta na mesma altura de "01 / 08" e "Niterói, RJ"
   da metade esquerda, como mais uma informação de rodapé (pedido do Renato). */
@media (min-width: 900px) {
  .abre .playlist { align-self: end; margin-bottom: -6px; }
}

/* 05/11/2026: no desktop a metade esquerda é fixa e a direita rola. Se a rolagem parava alguns pixels antes
   ou depois do começo de uma tela, a direita ficava desencontrada da esquerda (faixa da tela anterior no alto,
   rodapés em alturas diferentes). Ímã leve (proximity): perto do começo de uma tela, a rolagem assenta nele;
   no meio das telas longas (Casos, Jobs) a rolagem segue livre. */
@media (min-width: 900px) {
  html { scroll-snap-type: y proximity; }
  .tela { scroll-snap-align: start; }
}

/* 05/11/2026: rodapé no registro dos cantos da metade esquerda (mono fina), com "Topo" como texto à esquerda.
   A letra é pequena, mas a área de toque tem 44px de altura (mínimo para dedo); a margem negativa
   devolve a altura extra para a linha não engordar. */
.pe .cantos { font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: .08em; align-items: flex-end; }
.subir { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: -15px 0 -15px; padding-right: 16px; font-weight: 500; }
.subir-seta { display: inline-block; transition: transform .25s var(--sai); }
.subir:hover .subir-seta, .subir:focus-visible .subir-seta { transform: translateY(-3px); }
.subir:hover { text-decoration: underline; text-underline-offset: 4px; }
.subir:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
/* no celular a segunda linha do rodapé encurta para "Desde 2006": a frase inteira quebrava em três linhas
   na folga deixada para o botão do WhatsApp */
.so-estreito { display: none; }
@media (max-width: 599px) { .so-largo { display: none; } .so-estreito { display: inline; } }