/* =====================================================================
   MÉTIS EMPRESAS · a /empresas na mesa (14/10/2026)
   A base (a mesa, o topo, o bloco de pedido, o varal, o fechamento, o
   rodapé e os carrosséis do celular) vem de /home/mesa.css, carregado
   antes deste arquivo. Aqui fica só o que é desta página. Nada aqui muda
   a home: este arquivo só é chamado pela /empresas.

   Cada parte é um objeto diferente sobre a mesma mesa:
   situações = folhas destacadas de um bloco espiral · varal = etiquetas
   com preço · na prática = impressões presas com fita · resultado = a
   planilha, o celular e o relatório (do protótipo a-v3) · como eu
   trabalho = fichas pautadas · investimento = recibos · perguntas =
   uma folha presa com fita.
   ===================================================================== */

/* ---------------- topo e rodapé: a página atual ---------------- */
.topo-nav a[aria-current="page"]::after { transform: scaleX(1); }
.topo.is-compacto .topo-nav a[aria-current="page"] { background-color: rgba(7, 34, 67, .06); }
.gaveta a[aria-current="page"] { font-weight: 600; box-shadow: inset 3px 0 0 var(--azul); }
.rodape-nav a[aria-current="page"] { color: var(--azul); }

/* =====================================================================
   1. A MESA: o cartão com a pergunta e o pedido de proposta
   ===================================================================== */
.cartao-logo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.cartao-por { font: 500 clamp(11px, .66vw, 13px)/1.2 var(--ff-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); }
.cartao-titulo { font-size: clamp(36px, 3.45vw, 70px); line-height: .98; letter-spacing: -.045em; }
.cartao-sub { max-width: 30em; }

/* o pedido daqui escreve três linhas: o que a pessoa quer, a partir de quanto e o exemplo */
.bloco-escrita { min-height: calc(var(--pauta) * 4); }
.esc-2 { font-size: calc(var(--pauta) * .68); font-weight: 700; color: var(--azul); }
.esc-3 { font-size: calc(var(--pauta) * .6); font-weight: 500; color: var(--tinta-2); }

@media (min-width: 1100px) {
  .mesa { height: 48vw; min-height: 600px; }
  .mesa-lapis { left: 34vw; top: 41.2vw; width: 14vw; transform: rotate(-9deg); }
}
@media (max-width: 1099.98px) {
  .fim .bloco-escrita { min-height: calc(var(--pauta) * 4); }
}
@media (max-width: 520px) {
  .cartao-titulo { font-size: clamp(32px, 9.4vw, 44px); line-height: 1; }
  .cartao-nome { font-size: 25px; }
  /* no celular a assinatura desce para a linha de baixo, sem o ponto solto no começo */
  .cartao-logo { display: block; }
  .cartao-sep { display: none; }
  .cartao-por { display: block; margin-top: 2px; font-size: 10.5px; }
}

/* =====================================================================
   2. SITUAÇÕES: três folhas destacadas do bloco espiral
   ===================================================================== */
.situacoes { padding-top: clamp(84px, 8vw, 150px); }
.sit-cab { max-width: 74rem; }
.sits { list-style: none; margin: clamp(30px, 3.2vw, 60px) 0 0; padding: 0; display: grid; gap: 28px; }
.sit-papel {
  --pad: clamp(22px, 1.9vw, 36px);
  position: relative; display: flex; flex-direction: column; height: 100%;
  padding: clamp(40px, 3vw, 56px) var(--pad) 0;
  background: var(--papel); background-image: var(--grao-papel); border-radius: 2px 2px 4px 4px;
  box-shadow: var(--sh-1), 0 0 0 1px rgba(7, 34, 67, .04); transform: rotate(var(--r, 0deg));
}
/* os furos da espiral, na borda de cima (cor da mesa: a folha foi arrancada) */
.sit-papel::before {
  content: ""; position: absolute; left: 14px; right: 14px; top: 12px; height: 10px;
  background: radial-gradient(circle at 50% 50%, var(--mesa-funda) 0 3px, rgba(7, 34, 67, .18) 3.4px, transparent 4.2px) 0 0 / 18px 10px repeat-x;
}
.sit-papel::after { /* a borda rasgada do picote */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: radial-gradient(circle at 50% 0, var(--mesa) 0 2.6px, transparent 3px) 0 0 / 9px 5px repeat-x;
}
.sit-n { display: block; font: 700 clamp(40px, 3vw, 58px)/.9 var(--ff-mao); color: var(--azul); }
.sit-titulo { margin: 10px 0 0; font-weight: 600; font-size: clamp(24px, 1.8vw, 36px); line-height: 1.05; letter-spacing: -.035em; color: var(--tinta); text-wrap: balance; }
.sit-txt { margin: 14px 0 0; font-size: clamp(15.5px, 1.02vw, 19px); line-height: 1.5; color: var(--tinta-2); text-wrap: pretty; }
.sit-itens { list-style: none; display: grid; gap: 10px; margin: 20px 0 24px; padding: 16px 0 0; border-top: 1px dashed rgba(7, 34, 67, .24); }
.sit-itens li { position: relative; padding-left: 28px; font-weight: 500; font-size: clamp(15px, .98vw, 18px); line-height: 1.35; color: var(--tinta); }
.sit-itens li::before { /* o visto feito à caneta */
  content: ""; position: absolute; left: 3px; top: .2em; width: .72em; height: .38em;
  border-left: 2.2px solid var(--azul); border-bottom: 2.2px solid var(--azul); border-radius: 0 0 0 2px; transform: rotate(-48deg);
}
.sit-link {
  display: flex; align-items: center; justify-content: space-between; gap: .6em; min-height: 58px;
  margin: auto calc(-1 * var(--pad)) 0; padding: 14px var(--pad) 16px;
  border-top: 2px dashed rgba(7, 34, 67, .24);
  font-weight: 600; font-size: clamp(15.5px, 1vw, 18px); line-height: 1.2; letter-spacing: -.01em; text-decoration: none; color: var(--tinta);
  transform-origin: 0 0; transition: transform .5s var(--ease), color .25s;
}
.sit-link .seta { color: var(--azul); }
.sit-link:hover { color: var(--azul); transform: rotate(-1.4deg) translateY(2px); }
.sit-link:hover .seta { transform: translateX(4px); }
@media (min-width: 1100px) {
  .sits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.6vw; align-items: start; max-width: 1640px; }
  .sit:nth-child(2) { margin-top: 3.4vw; }
  .sit:nth-child(3) { margin-top: 1.2vw; }
  .sit-papel { min-height: 100%; }
}

/* =====================================================================
   3. O VARAL: as etiquetas agora com o preço de partida (do a-v3)
   ===================================================================== */
.etiqueta-preco { margin: 10px 0 0; font-weight: 600; font-size: clamp(24px, 1.7vw, 36px); line-height: 1; letter-spacing: -.045em; color: var(--azul); }
.etiqueta-preco small { font: 500 11px/1 var(--ff-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-2); white-space: nowrap; }
.etiqueta-preco small:first-child { display: block; margin-bottom: 6px; }
.etiqueta-preco-so { display: block; font: 600 clamp(15px, 1vw, 18px)/1.2 var(--ff); letter-spacing: -.01em; color: var(--azul); }

/* o recibo no fim do varal: não é link, é o aviso sobre o valor */
.varal-fim--recibo { cursor: default; }
.varal-fim--recibo:hover { transform: rotate(2deg); }
.varal-fim--recibo .varal-fim-papel { margin: 0; }
.varal-fim--recibo .varal-fim-txt { font: 500 clamp(17px, 1.12vw, 21px)/1.4 var(--ff); letter-spacing: -.01em; }
@media (max-width: 1099.98px) {
  .varal-fim--recibo { margin-top: 14px; }
  .varal-fim--recibo:hover { transform: rotate(-.6deg); }
  .varal-fim--recibo .varal-fim-papel { grid-template-columns: minmax(0, 1fr); padding: 14px 18px 26px; }
  .varal-fim--recibo .varal-fim-topo { padding-bottom: 6px; font-size: 11px; }
  .varal-fim--recibo .varal-fim-txt { font-size: 15.5px; }
}

/* =====================================================================
   4. NA PRÁTICA: três impressões presas com fita
   ===================================================================== */
.casos { padding-top: clamp(84px, 8vw, 150px); }
.casos-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 40px; }
.casos-cab > div { max-width: 52rem; }
.casos-todos { margin: 0; }
.casos-todos a { display: inline-flex; align-items: center; gap: .4em; min-height: 46px; font-weight: 600; font-size: clamp(16px, 1.05vw, 19px); color: var(--tinta); text-underline-offset: 5px; }
.casos-todos a:hover { color: var(--azul); }
.casos-todos--fim { display: none; }
.casos-lista { list-style: none; margin: clamp(40px, 3.6vw, 70px) 0 0; padding: 0; display: grid; gap: 34px; }
.caso-papel {
  --pad: clamp(16px, 1.3vw, 26px);
  position: relative; display: flex; flex-direction: column; height: 100%;
  padding: var(--pad) var(--pad) 0; background: #fff;
  box-shadow: var(--sh-1), 0 0 0 1px rgba(7, 34, 67, .05); transform: rotate(var(--r, 0deg)); transition: box-shadow .45s var(--ease);
}
.caso-papel:hover { box-shadow: var(--sh-2), 0 0 0 1px rgba(7, 34, 67, .05); }
.caso-papel .fita-crepe { top: -15px; width: 112px; height: 30px; margin-left: -56px; transform: rotate(-3deg); }
.caso:nth-child(2) .fita-crepe { transform: rotate(4deg); left: 62%; }
.caso-print { display: block; }
.caso-print img { aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; }
.caso-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 20px 0 0; }
.caso-tipo { font: 500 11.5px/1.3 var(--ff-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); }
.caso-nome { margin: 12px 0 0; font-weight: 600; font-size: clamp(24px, 1.75vw, 36px); line-height: 1.04; letter-spacing: -.035em; color: var(--tinta); text-wrap: balance; }
.caso-txt { margin: 10px 0 20px; font-size: clamp(15.5px, 1.02vw, 19px); line-height: 1.5; color: var(--tinta-2); text-wrap: pretty; }
.caso-link {
  display: flex; align-items: center; justify-content: space-between; gap: .6em; min-height: 56px;
  margin: auto calc(-1 * var(--pad)) 0; padding: 14px var(--pad) 16px; border-top: 1px solid var(--linha);
  font-weight: 600; font-size: clamp(15.5px, 1vw, 18px); text-decoration: none; color: var(--tinta); transition: color .25s;
}
.caso-link .seta { color: var(--azul); }
.caso-link:hover { color: var(--azul); }
.caso-link:hover .seta { transform: translateX(4px); }
@media (min-width: 1100px) {
  .casos-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.6vw; align-items: stretch; max-width: 1640px; }
  .caso:nth-child(2) { transform: translateY(-1.4vw); }
}

/* =====================================================================
   5. O RESULTADO: uma ideia por vez (do protótipo a-v3)
   ===================================================================== */
.resultado { padding-top: clamp(80px, 8vw, 150px); }
.res-cena { position: relative; display: grid; gap: 34px; align-items: center; padding: clamp(24px, 4vw, 70px) 0; }
.res-grande { margin: 0; max-width: 13em; font-weight: 600; font-size: clamp(34px, 4.3vw, 86px); line-height: 1; letter-spacing: -.045em; color: var(--tinta); text-wrap: balance; }
.res-grande--menor { font-size: clamp(30px, 3.3vw, 64px); }
.res-sub { margin: 20px 0 0; max-width: 28em; font-size: clamp(18px, 1.35vw, 25px); line-height: 1.4; color: var(--tinta-2); text-wrap: pretty; }
.res-minha { margin: 22px 0 0; max-width: 30em; padding: 14px 18px; background: rgba(255, 255, 255, .6); border-left: 3px solid var(--azul); font-size: clamp(16px, 1.1vw, 20px); line-height: 1.45; color: var(--tinta); }
.res-minha b { font-weight: 600; }
.dor-obj { position: relative; }
.sheet {
  position: relative; display: flex; flex-direction: column; height: clamp(270px, 29vw, 540px);
  background: #fff; border-radius: 8px; overflow: hidden; transform: rotate(-1.6deg);
  box-shadow: var(--sh-2), 0 0 0 1px rgba(7, 34, 67, .08);
}
.sheet-topo { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; background: #eef1f5; border-bottom: 1px solid #dde3ea; font: 500 12px/1 var(--ff); color: #33435a; }
.sheet-ico { flex: none; width: 14px; height: 14px; border-radius: 3px; background: #1d7a46 repeating-linear-gradient(90deg, transparent 0 4px, rgba(255, 255, 255, .55) 4px 5px); }
.sheet-arq { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sheet-salvo { margin-left: auto; flex: none; font-size: 11px; color: #b4231a; }
.sheet-formula { display: flex; gap: 10px; align-items: center; min-height: 28px; padding: 0 10px; border-bottom: 1px solid #dde3ea; font: 400 11.5px/1 var(--ff-mono); color: #33435a; white-space: nowrap; overflow: hidden; }
.sheet-fx { font-style: italic; color: #7a8698; }
.sheet-grade { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sheet-cab { display: grid; grid-template-columns: 28px 22% repeat(5, 1fr); background: #f3f5f8; border-bottom: 1px solid #dde3ea; font: 500 10.5px/22px var(--ff); color: #6b778a; text-align: center; }
.sheet-janela { position: relative; flex: 1; overflow: hidden; }
.sheet-rolo { will-change: transform; }
.motion .sheet-rolo { animation: planilha-rola 30s linear infinite; }
.sheet table { width: 100%; border-collapse: collapse; table-layout: fixed; font: 400 11.5px/1 var(--ff-mono); color: #26364d; }
.sheet td { height: 23px; padding: 0 6px; border: 1px solid #e3e8ee; white-space: nowrap; overflow: hidden; text-align: right; }
.sheet td:nth-child(1) { width: 28px; padding: 0; background: #f3f5f8; color: #8a95a6; text-align: center; }
.sheet td:nth-child(2) { width: 22%; text-align: left; font-family: var(--ff); }
.sheet td.err { color: #c0271b; background: #fde8e6; font-weight: 500; text-align: center; }
.sheet td.neg { color: #c0271b; }
.sheet td.ama { background: #fff3c4; color: #6b5200; text-align: center; font-family: var(--ff); }
.sheet-abas { position: relative; height: 30px; flex: none; border-top: 1px solid #dde3ea; background: #f3f5f8; overflow: hidden; }
.sheet-abas-rolo { display: flex; width: max-content; }
.motion .sheet-abas-rolo { animation: abas-rola 46s linear infinite; }
.aba { padding: 0 12px; font: 500 11px/29px var(--ff); color: #4a5a70; border-right: 1px solid #dde3ea; white-space: nowrap; }
.aba--ativa { background: #fff; color: #12305c; box-shadow: inset 0 -2px 0 #1d7a46; }
.sheet-ilustra { position: absolute; left: 40px; bottom: 40px; padding: 4px 7px; border-radius: 2px; background: #ffe7a6; color: #4a3400; font: 500 10px/1 var(--ff-mono); letter-spacing: .05em; text-transform: uppercase; transform: rotate(-3deg); box-shadow: -2px 3px 6px rgba(7, 34, 67, .18); }
@keyframes planilha-rola { to { transform: translateY(-50%); } }
@keyframes abas-rola { to { transform: translateX(-50%); } }

.zap {
  position: absolute; z-index: 2; right: -3%; bottom: -14%; width: clamp(150px, 12.6vw, 236px); aspect-ratio: 9 / 17.5;
  display: flex; flex-direction: column; padding: 6px; border-radius: 24px; transform: rotate(5deg);
  background: linear-gradient(145deg, #2a3442, #0c1119 60%); box-shadow: var(--sh-2), inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.zap-topo { display: flex; align-items: center; gap: 8px; padding: 14px 10px 8px; background: #12305c; color: #fff; border-radius: 18px 18px 0 0; }
.zap-av { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #85c705; color: #072243; font: 700 12px/1 var(--ff); }
.zap-nome b { display: block; font: 600 12.5px/1.15 var(--ff); }
.zap-nome small { display: block; font: 400 10px/1.2 var(--ff); color: #c9d6ea; }
.zap-conversa { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 10px 8px 6px; background: #e7ecf2; }
.zap-dia { align-self: center; margin: 0 0 auto; padding: 4px 8px; border-radius: 6px; background: #fff; font: 500 9.5px/1 var(--ff); color: #6b778a; }
.zap-msg { align-self: flex-start; max-width: 90%; margin: 0; padding: 7px 9px 5px; border-radius: 2px 10px 10px 10px; background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); font: 500 clamp(12px, .8vw, 14px)/1.3 var(--ff); color: #0d1b2e; transform-origin: 0 0; }
.zap-msg small { display: block; margin-top: 2px; text-align: right; font-size: 9px; font-weight: 400; color: #8a95a6; }
.zap-digitando { display: none; align-self: flex-start; gap: 3px; margin: 0; padding: 8px 10px; border-radius: 2px 10px 10px 10px; background: #fff; }
.zap-digitando i { width: 5px; height: 5px; border-radius: 50%; background: #8a95a6; animation: pisca-ponto 1s ease-in-out infinite; }
.zap-digitando i:nth-child(2) { animation-delay: .15s; }
.zap-digitando i:nth-child(3) { animation-delay: .3s; }
.zap.is-digitando .zap-digitando { display: flex; }
.zap.is-espera .zap-msg { display: none; }
.zap-campo { display: flex; align-items: center; gap: 5px; padding: 6px 6px 10px; background: #e7ecf2; border-radius: 0 0 18px 18px; }
.zap-txt { flex: 1; min-width: 0; min-height: 30px; padding: 8px 10px; border-radius: 16px; background: #fff; font: 400 clamp(12px, .8vw, 14px)/1.1 var(--ff); color: #0d1b2e; white-space: nowrap; overflow: hidden; }
.zap-txt::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -.15em; background: var(--azul); animation: cursor-pisca 1s steps(1) infinite; }
.zap-cursor { display: none; }
.zap-env { flex: none; position: relative; width: 30px; height: 30px; border-radius: 50%; background: #12305c; }
.zap-env::after { content: ""; position: absolute; left: 11px; top: 9px; border-left: 10px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
@keyframes pisca-ponto { 50% { opacity: .25; transform: translateY(-2px); } }
@keyframes cursor-pisca { 50% { opacity: 0; } }

.relatorio {
  position: relative; background: #fff; background-image: var(--grao-papel); border-radius: 2px;
  padding: clamp(24px, 2.6vw, 52px) clamp(22px, 2.8vw, 56px) clamp(26px, 2.6vw, 50px);
  box-shadow: var(--sh-1), 0 0 0 1px rgba(7, 34, 67, .04); transform: rotate(-1.4deg);
}
.clipe { position: absolute; top: -34px; left: 9%; width: 30px; height: 96px; z-index: 3; filter: drop-shadow(-2px 3px 2px rgba(7, 34, 67, .25)); }
.rel-topo { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; padding-bottom: 14px; border-bottom: 1px solid var(--linha); font: 500 12px/1.3 var(--ff-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); }
.rel-titulo { margin: clamp(18px, 1.6vw, 28px) 0 0; font-size: clamp(19px, 1.4vw, 26px); font-weight: 600; letter-spacing: -.02em; }
.rel-num { margin: 6px 0 0; display: flex; align-items: flex-end; flex-wrap: wrap; gap: 4px 22px; }
.rel-num-in { position: relative; isolation: isolate; display: inline-flex; align-items: baseline; font-weight: 700; font-size: clamp(96px, 9.6vw, 190px); line-height: .9; letter-spacing: -.06em; color: var(--tinta); }
.rel-menos { margin-right: .02em; }
.marca-texto { position: absolute; z-index: -1; left: -5%; bottom: 2%; width: 112%; height: 48%; fill: none; stroke: var(--verde); stroke-width: 30; stroke-linecap: round; opacity: .5; overflow: visible; }
.rel-num-leg { padding-bottom: .9em; max-width: 13em; font-size: clamp(16px, 1.1vw, 20px); line-height: 1.35; color: var(--tinta-2); }
.rel-grafico { margin-top: clamp(22px, 2vw, 36px); display: grid; gap: 14px; }
.rel-barra { display: grid; grid-template-columns: 3.2em minmax(0, 1fr) auto; align-items: center; gap: 14px; font-size: clamp(15px, 1vw, 18px); }
.rel-ano { font: 500 13px/1 var(--ff-mono); color: var(--tinta-2); }
.rel-trilho { display: block; height: clamp(20px, 1.6vw, 30px); background: rgba(7, 34, 67, .06); border-radius: 3px; overflow: hidden; }
.rel-fill { display: block; height: 100%; width: calc(var(--v) * 100%); background: #9aa8bb; border-radius: 3px; transform-origin: 0 50%; }
.rel-barra--agora .rel-fill { background: var(--azul); }
.rel-valor { min-width: 7.6em; font-weight: 600; white-space: nowrap; }

.res-obj--quem { position: relative; }
.res-painel { margin: 0; }
.adesivo--esq { right: auto; left: 7%; bottom: 9%; }
.ficha-oferta {
  position: relative; max-width: 380px; padding: 24px 26px 6px; background: var(--papel); background-image: var(--grao-papel);
  border-radius: 3px; box-shadow: var(--sh-1), 0 0 0 1px rgba(7, 34, 67, .04); transform: rotate(2.2deg); margin-top: -30px; margin-left: 8%;
}
.ficha-oferta::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--azul); opacity: .85; }
.ficha-oferta-rot { margin: 0 0 8px; font: 500 12px/1.2 var(--ff-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); }
.ficha-oferta-nome { margin: 0; font-weight: 600; font-size: clamp(19px, 1.3vw, 24px); line-height: 1.15; letter-spacing: -.02em; }
.ficha-oferta-preco { margin: 14px 0 0; font-weight: 600; font-size: clamp(28px, 2vw, 38px); letter-spacing: -.045em; line-height: 1; }
.ficha-oferta-preco small { font: 500 12px var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); }
.ficha-oferta-link {
  display: flex; align-items: center; justify-content: space-between; gap: .5em; min-height: 56px; margin: 18px -26px 0; padding: 12px 26px;
  border-top: 2px dashed rgba(7, 34, 67, .24); font-weight: 600; font-size: 17px; text-decoration: none; transform-origin: 0 0; transition: transform .5s var(--ease), color .25s;
}
.ficha-oferta-link .seta { color: var(--azul); }
.ficha-oferta-link:hover { color: var(--azul); transform: rotate(-1.4deg) translateY(2px); }
.ficha-oferta-ver { display: inline-flex; align-items: center; gap: .3em; min-height: 46px; margin-bottom: 4px; font-size: 15px; color: var(--tinta-2); text-underline-offset: 4px; }
.ficha-oferta-ver:hover { color: var(--azul); }

@media (min-width: 1100px) {
  .res-cena { grid-template-columns: minmax(0, 40vw) minmax(0, 1fr); gap: 5vw; min-height: 60vh; }
  .res-cena--prova .res-obj { padding-right: 2vw; }
  .res-obj--quem { padding-left: 2vw; }
  .ficha-oferta { position: absolute; left: -4vw; bottom: -4vw; margin: 0; width: min(380px, 25vw); }
  .res-cena--quem { padding-bottom: 8vw; }
  /* com movimento: um palco de 100vh e as cenas trocando com a rolagem */
  .resultado.is-palco { padding: 0; }
  .resultado.is-palco .res-palco { position: relative; height: 100vh; min-height: 640px; overflow: clip; }
  .resultado.is-palco .res-cena { position: absolute; inset: 0; padding: 70px var(--g) 0; min-height: 0; }
  .resultado.is-palco .res-cena--quem { padding-bottom: 0; }
}

/* =====================================================================
   6. COMO EU TRABALHO: fichas pautadas que se escrevem (do a-v3)
   ===================================================================== */
.processo { padding-top: clamp(84px, 8vw, 150px); }
.processo-cab { display: grid; gap: 0 6vw; }
.como { position: relative; margin-top: clamp(40px, 4.4vw, 84px); }
.como-linha { display: none; }
.fichas { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.ficha {
  position: relative; display: flex; flex-direction: column; padding: 20px 22px 18px; background: #fff;
  box-shadow: var(--sh-1), 0 0 0 1px rgba(7, 34, 67, .04); transform: rotate(var(--r, 0deg));
}
.ficha-n { display: block; font: 500 13px/1 var(--ff-mono); letter-spacing: .1em; color: var(--azul); }
.ficha h3 { margin: 8px 0 0; padding-bottom: 12px; border-bottom: 1.5px solid rgba(3, 83, 250, .4); font-size: clamp(21px, 1.5vw, 29px); font-weight: 600; letter-spacing: -.03em; line-height: 1.08; text-wrap: balance; }
.ficha p {
  flex: 1; margin: 0; padding-top: 3px; min-height: calc(28px * 4 + 3px); font-size: clamp(15px, 1vw, 17px); line-height: 28px; color: var(--tinta);
  background-image: repeating-linear-gradient(transparent 0 27px, rgba(3, 83, 250, .13) 27px 28px); background-position: 0 3px;
}
@media (min-width: 1100px) {
  .processo-cab { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; }
  .processo-cab .zona-sub { margin: 0 0 .4em; }
  .fichas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.2vw; }
  .ficha:nth-child(even) { margin-top: 3vw; }
  .ficha p { min-height: calc(28px * 5 + 3px); }
  .como-linha { display: block; position: absolute; left: -2vw; right: -2vw; top: 3.6vw; width: calc(100% + 4vw); height: 9vw; fill: none; stroke: #6b7789; stroke-width: 1.7; stroke-linecap: round; opacity: .6; z-index: 0; overflow: visible; }
}

/* =====================================================================
   7. INVESTIMENTO: três recibos
   ===================================================================== */
.investimento { display: grid; gap: 30px; }
.recibos { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.recibo { filter: drop-shadow(-6px 10px 12px rgba(7, 34, 67, .16)) drop-shadow(-1px 2px 2px rgba(7, 34, 67, .08)); transform: rotate(var(--r, 0deg)); }
.recibo-papel {
  padding: 22px 24px 40px; background: #fff; color: var(--tinta);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%;
}
.recibo-topo { display: flex; justify-content: space-between; gap: 1em; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px dashed rgba(7, 34, 67, .3); font: 500 12px/1.2 var(--ff-mono); letter-spacing: .14em; color: var(--tinta-2); }
.recibo-nome { margin: 0; font-weight: 600; font-size: clamp(23px, 1.65vw, 32px); line-height: 1.05; letter-spacing: -.035em; }
.recibo-txt { margin: 12px 0 0; padding-top: 12px; border-top: 1px dotted rgba(7, 34, 67, .25); font-size: clamp(15.5px, 1.02vw, 18.5px); line-height: 1.5; color: var(--tinta-2); text-wrap: pretty; }
@media (min-width: 1100px) {
  .investimento { gap: clamp(34px, 3.2vw, 60px); }
  .inv-cab { max-width: 78rem; }
  .recibos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.8vw; align-items: start; max-width: 1640px; padding: 0 2vw; }
  .recibo:nth-child(2) { margin-top: 2.6vw; }
  .recibo:nth-child(3) { margin-top: .6vw; }
  .recibo-papel { padding: 26px 30px 46px; }
}

/* =====================================================================
   8. PERGUNTAS: uma folha presa com fita
   ===================================================================== */
.perguntas { display: grid; gap: 28px; }
.perg-folha {
  position: relative; padding: clamp(14px, 1.2vw, 22px) clamp(20px, 2.4vw, 46px);
  background: var(--papel); background-image: var(--grao-papel); border-radius: 3px;
  box-shadow: var(--sh-1), 0 0 0 1px rgba(7, 34, 67, .04); transform: rotate(.5deg);
}
.perg-folha .fita-crepe { top: -16px; left: 18%; width: 120px; transform: rotate(-4deg); }
.perg + .perg { border-top: 1px solid var(--linha); }
.perg summary {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 66px; padding: 12px 0;
  list-style: none; cursor: pointer; font-weight: 600; font-size: clamp(17px, 1.22vw, 23px); line-height: 1.25; letter-spacing: -.02em; color: var(--tinta);
}
.perg summary::-webkit-details-marker { display: none; }
.perg summary:hover .perg-q { color: var(--azul); }
.perg-n { font: 500 12px/1 var(--ff-mono); letter-spacing: .08em; color: var(--tinta-2); }
.perg-q { transition: color .25s; }
.perg-mais { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid rgba(7, 34, 67, .24); transition: border-color .3s, background-color .3s; }
.perg-mais::before, .perg-mais::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.8px; margin: -.9px 0 0 -6px; border-radius: 2px; background: var(--tinta); transition: transform .45s var(--ease); }
.perg-mais::after { transform: rotate(90deg); }
.perg[open] .perg-mais { border-color: var(--azul); background: #eef3ff; }
.perg[open] .perg-mais::after { transform: rotate(0deg); }
.perg-r p { margin: 0; padding: 0 0 20px calc(12px * 2 + 16px); max-width: 40em; font-size: clamp(16px, 1.05vw, 19px); line-height: 1.55; color: var(--tinta-2); text-wrap: pretty; }
.motion .perg[open] .perg-r { animation: perg-abre .55s var(--ease) both; }
@keyframes perg-abre { from { opacity: 0; transform: translateY(-6px); } }
@media (min-width: 1100px) {
  .perguntas { grid-template-columns: minmax(0, 27vw) minmax(0, 1fr); gap: 5vw; align-items: start; padding-left: 6vw; padding-right: 9vw; }
  .perg-cab { position: sticky; top: 18vh; }
}

/* =====================================================================
   9. FECHAMENTO: o link simples ao lado do bloco
   ===================================================================== */
.fim-link { margin: 22px 0 0; }
.fim-link a {
  display: inline-flex; align-items: center; gap: .45em; min-height: 48px; font-weight: 600; font-size: clamp(16px, 1.1vw, 20px); color: var(--tinta);
  text-underline-offset: 6px; text-decoration-thickness: 1.5px; text-decoration-color: rgba(3, 83, 250, .5);
}
.fim-link a .seta { color: var(--azul); }
.fim-link a:hover { color: var(--azul); }
.fim-link a:hover .seta { transform: translateX(4px); }

/* =====================================================================
   CELULAR (até 1099 px): carrosséis curtos, seções com menos ar
   ===================================================================== */
@media (max-width: 1099.98px) {
  .situacoes, .casos, .resultado, .processo { padding-top: 48px; }
  .sits[data-carrossel] { padding-top: 26px; align-items: stretch; }
  .sit { width: min(82vw, 360px); }
  .sit-papel { padding-top: 38px; --pad: 20px; }
  .sit-n { font-size: 38px; }
  .sit-titulo { margin-top: 6px; font-size: 23px; }
  .sit-txt { margin-top: 10px; font-size: 15px; }
  .sit-itens { gap: 8px; margin: 14px 0 18px; padding-top: 12px; }
  .sit-itens li { font-size: 14.5px; }
  .sit-link { min-height: 52px; padding: 12px 20px 14px; font-size: 15.5px; }

  .casos-cab .casos-todos { display: none; }
  .casos-todos--fim { display: block; margin-top: 4px; }
  .casos-lista[data-carrossel] { padding-top: 30px; align-items: stretch; }
  .caso { width: min(82vw, 360px); }
  .caso-papel { --pad: 14px; }
  .caso-meta { margin-top: 14px; }
  .caso-nome { margin-top: 8px; font-size: 22px; }
  .caso-txt { margin: 8px 0 14px; font-size: 15px; }
  .caso-link { min-height: 50px; padding: 12px 14px 14px; font-size: 15.5px; }

  .resultado { padding-bottom: 32px; }
  .res-cena > * { min-width: 0; }
  .res-cena { gap: 20px; padding: 10px 0 24px; }
  .res-grande { font-size: clamp(30px, 8.6vw, 46px); }
  .res-grande--menor { font-size: clamp(26px, 7.4vw, 40px); }
  .res-sub { margin-top: 12px; font-size: 16.5px; }
  .res-minha { margin-top: 14px; padding: 10px 14px; font-size: 15.5px; }
  .dor-obj { margin: 0 0 26px; }
  .sheet { height: 250px; }
  .zap { width: 40%; max-width: 180px; aspect-ratio: 9 / 15; right: -6px; bottom: -26px; padding: 5px; border-radius: 20px; }
  .zap-topo { padding: 10px 8px 6px; }
  .zap-dia { display: none; }
  .relatorio { padding: 22px 18px 20px; }
  .rel-num-in { font-size: clamp(80px, 24vw, 130px); }
  .rel-grafico { gap: 10px; }
  .ficha-oferta { margin: 0; max-width: none; padding: 16px 18px 4px; transform: rotate(1deg); }
  .ficha-oferta-rot { display: none; }
  .ficha-oferta-preco { margin-top: 6px; font-size: 26px; }
  .ficha-oferta-link { min-height: 50px; margin: 10px -18px 0; padding: 10px 18px; font-size: 16px; }
  .ficha-oferta-ver { min-height: 44px; }
  .res-cena--prova { padding-top: 6px; }

  .processo-cab .zona-sub { margin-top: 10px; }
  .como { margin-top: 6px; }
  .fichas[data-carrossel] { padding-top: 26px; }
  .fichas[data-carrossel] .ficha { width: min(74vw, 300px); margin: 0; }

  .investimento { gap: 14px; }
  .recibos { gap: 0; }
  /* no celular os recibos se empilham, um encostado no outro */
  .recibo + .recibo { margin-top: -6px; }
  .recibo:nth-child(2) { margin-left: 14px; margin-right: -4px; }
  .recibo-papel { padding: 12px 16px 26px; }
  .recibo-topo { display: none; }
  .recibo-nome { font-size: 20px; }
  .recibo-txt { margin-top: 6px; padding-top: 6px; font-size: 14.5px; line-height: 1.45; }

  .perguntas { gap: 12px; }
  .perg-folha { padding: 6px 16px; transform: rotate(.3deg); }
  .perg summary { gap: 12px; min-height: 58px; font-size: 16.5px; }
  .perg-r p { padding: 0 0 16px; font-size: 15.5px; }
  .fim-link { margin-top: 14px; }
}
@media (max-width: 400px) {
  /* "Acompanhamento" cabe na caixa dos dois pedidos também em 360 (medido: sobrava -5 px) */
  .bloco-ops { gap: 5px; padding: 0 10px; }
  .bloco-op, .bloco--grande .bloco-op { gap: .4em; padding: 6px 7px; font-size: 13.5px; letter-spacing: -.01em; }
}
@media (max-width: 370px) {
  .bloco-op, .bloco--grande .bloco-op { font-size: 13px; }
}
@media (max-width: 759.98px) {
  .res-cena--prova .res-sub { display: none; }
  .res-obj--quem .res-painel { display: none; }
  .rel-topo span:first-child { display: none; }
  .clipe { left: auto; right: 14%; }
  .perg-n { display: none; }
  .perg summary { grid-template-columns: minmax(0, 1fr) auto; }
}