/* Estilos do site da Mugido Labs, compartilhados por todas as páginas */
  :root { --tinta: #000000; --leite: #FFFFFF; --linha: rgba(0,0,0,.13); --apoio: #6B6B6B; --texto: #262626; --focinho: #EDB4A0; }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 90px; }
  body { background: var(--leite); color: var(--tinta); font-family: 'IBM Plex Mono', Menlo, monospace; -webkit-font-smoothing: antialiased; }
  a { color: inherit; }
  img { max-width: 100%; height: auto; display: block; }
  .wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
  section { padding: 110px 0; }
  @media (max-width: 600px) { section { padding: 76px 0; } }   /* celular: menos vão entre as seções */
  .rotulo { font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--apoio); }
  h2 { font-size: clamp(36px, 4.4vw, 64px); line-height: .98; letter-spacing: -.045em; font-weight: 700; margin: 18px 0 22px; }
  .lead { font-size: clamp(16px, 1.4vw, 20px); line-height: 1.6; color: var(--texto); max-width: 640px; }

  /* cabeçalho: o nome escrito, sem logo */
  .cabecalho { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .3s; }
  .cabecalho.rolou { border-bottom-color: var(--linha); }
  .cabecalho .wrap { display: flex; align-items: center; justify-content: space-between; height: 80px; }
  .nome { font-weight: 700; font-size: 22px; letter-spacing: -.03em; text-decoration: none; }
  .nome span { font-weight: 500; color: var(--apoio); }
  .cabecalho nav { display: flex; gap: 30px; align-items: center; font-size: 15px; }
  .cabecalho nav a { text-decoration: none; color: var(--texto); }
  .cabecalho nav a:hover { color: var(--tinta); }
  .botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 600 15px 'IBM Plex Mono', monospace; text-decoration: none; color: var(--leite);
    background: var(--tinta); border: 2px solid var(--tinta); border-radius: 14px; padding: 14px 22px; box-shadow: 0 5px 0 var(--focinho); transition: transform .15s, box-shadow .15s; cursor: pointer; text-align: left; }
  .botao:hover { transform: translateY(2px); box-shadow: 0 3px 0 var(--focinho); }
  .botao:disabled { opacity: .6; cursor: default; }
  .botao.claro { background: var(--leite); color: var(--tinta); box-shadow: 0 5px 0 var(--tinta); }
  .botao.claro:hover { box-shadow: 0 3px 0 var(--tinta); }
  .cabecalho nav a.botao { color: var(--leite); padding: 10px 18px; font-size: 14px; }
  /* menu do celular: botão com três barrinhas que viram X, abre um painel com os links */
  .menu-bt { display: none; width: 44px; height: 44px; border: 2px solid var(--tinta); border-radius: 12px; background: var(--leite); cursor: pointer; position: relative; flex: none; }
  .menu-bt i { position: absolute; left: 11px; right: 11px; height: 2.5px; background: var(--tinta); border-radius: 2px; transition: transform .25s, opacity .2s; }
  .menu-bt i:nth-child(1) { top: 13px; } .menu-bt i:nth-child(2) { top: 19.5px; } .menu-bt i:nth-child(3) { top: 26px; }
  .menu-aberto .menu-bt i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .menu-aberto .menu-bt i:nth-child(2) { opacity: 0; }
  .menu-aberto .menu-bt i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .painel-menu { display: none; }
  @media (max-width: 900px) {
    .cabecalho nav a:not(.botao) { display: none; }
    .cabecalho nav { gap: 10px; }
    .menu-bt { display: block; }
    .painel-menu { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--leite); border-bottom: 1px solid var(--linha);
      box-shadow: 0 24px 40px -24px rgba(0,0,0,.35); padding: 8px 20px 22px; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .2s, transform .25s, visibility 0s .25s; }
    .menu-aberto .painel-menu { opacity: 1; transform: none; visibility: visible; transition: opacity .2s, transform .25s; }
    .painel-menu a { display: flex; justify-content: space-between; align-items: center; padding: 16px 4px; font-size: 18px; font-weight: 600; text-decoration: none; color: var(--tinta); border-bottom: 1px solid var(--linha); }
    .painel-menu a::after { content: "→"; color: var(--apoio); font-weight: 400; }
    .painel-menu a:last-child { border-bottom: 0; }
  }
  .cabecalho nav a.botao { white-space: nowrap; }
  @media (max-width: 560px) { .cabecalho nav a.botao { display: none; } }   /* celular: "bora montar" fica no painel do menu e no topo da página */

  /* topo: título gigante no meio, peças soltas em volta */
  .topo { position: relative; overflow: hidden; min-height: calc(100vh - 80px); display: flex; align-items: center; padding: 70px 0 90px; }
  .topo .wrap { position: static; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; }
  .topo h1 { font-weight: 700; margin: 26px 0 30px; }
  .topo-pergunta { display: block; font-size: clamp(22px, 3vw, 44px); line-height: 1.1; letter-spacing: -.04em; }
  .topo-grande { display: block; font-size: clamp(64px, 10.5vw, 160px); line-height: .9; letter-spacing: -.07em; margin-top: .08em; }
  .topo .lead { max-width: 640px; text-wrap: balance; }
  .acoes { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 36px; }
  .topo .acoes { justify-content: center; }
  .provas { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 44px; font-size: 14px; color: var(--apoio); }
  .topo .provas { justify-content: center; gap: 40px; }
  .provas b { display: block; font-size: 15px; color: var(--tinta); margin-bottom: 2px; }
  .topo-3d { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  @media (max-width: 900px) { .topo { min-height: 0; padding: 160px 0 150px; } }
  @media (max-width: 600px) { .topo-grande { font-size: 22vw; } .topo-grande > span { display: block; } .topo .provas { flex-direction: column; gap: 16px; } }

  /* como a gente monta: estilo Apple. A seção é alta; a cena fica presa na tela e a rolagem dirige tudo, quadro a quadro */
  .como { border-top: 1px solid var(--linha); padding: 110px 0 0; }
  .como .intro { text-align: center; }
  .como .intro h2 { margin-bottom: 0; }
  .trilho { position: relative; height: 320vh; margin-top: -16vh; }   /* 5 capítulos em ~2 telas e meia de rolagem (era 520vh: longo demais) */   /* a cena encosta no título, sem o vão em branco */
  .cena { position: sticky; top: 80px; height: calc(100vh - 80px); overflow: hidden; }
  .cena .wrap { position: relative; height: 100%; display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
  .textos { position: relative; height: 340px; }
  .cap { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; will-change: opacity, transform; }
  .cap .num { font-size: 14px; letter-spacing: .2em; color: var(--apoio); }
  .cap h3 { font-size: clamp(32px, 3.6vw, 56px); line-height: .98; letter-spacing: -.045em; margin: 18px 0 18px; }
  .cap p { font-size: 18px; line-height: 1.6; color: var(--texto); max-width: 480px; }
  .barra { position: absolute; left: 32px; right: 32px; bottom: 40px; height: 3px; background: var(--linha); border-radius: 2px; overflow: hidden; }
  .barra b { display: block; height: 100%; width: 100%; background: var(--tinta); transform-origin: left; transform: scaleX(0); }
  .marcos { position: absolute; left: 32px; right: 32px; bottom: 54px; display: flex; justify-content: space-between; font-size: 12px; color: var(--apoio); letter-spacing: .1em; }
  .marcos span { transition: color .3s; } .marcos span.on { color: var(--tinta); }
  .fotos { position: relative; aspect-ratio: 1398 / 752; }
  .fotos img { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: multiply; opacity: 0; will-change: opacity, transform; }
  .esfuma-esq { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%); mask-image: linear-gradient(to right, transparent 0, #000 9%); }
  /* celular e quem pediu menos movimento: capítulos empilhados, cada um com a sua foto */
  .pilha { display: none; }
  /* celular: a mesma cena guiada pela rolagem, com a foto em cima e o texto embaixo */
  @media (max-width: 900px) {
    .trilho { height: 340vh; margin-top: -6vh; }
    .cena { top: 80px; height: calc(100vh - 80px); height: calc(100svh - 80px); }
    .cena .wrap { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; gap: 18px; padding-bottom: 70px; }
    .fotos { order: -1; width: 124%; margin-left: -12%; }   /* as fotos têm muita margem branca: amplia pra peça ocupar a tela */
    .textos { height: 230px; }
    .cap h3 { font-size: 30px; margin: 10px 0 10px; }
    .cap p { font-size: 15px; }
    .marcos { left: 20px; right: 20px; bottom: 34px; font-size: 12px; letter-spacing: 0; }
    .barra { left: 20px; right: 20px; bottom: 24px; }
  }
  /* quem pediu menos movimento: capítulos empilhados, cada um com a sua foto */
  @media (prefers-reduced-motion: reduce) {
    .trilho { display: none; }
    .pilha { display: block; padding-bottom: 40px; }
    .pilha .item { padding: 40px 0; }
    .pilha h3 { font-size: 32px; line-height: 1; letter-spacing: -.04em; margin: 14px 0; }
    .pilha p { font-size: 17px; line-height: 1.6; color: var(--texto); }
    .pilha img { margin-top: 22px; mix-blend-mode: multiply; }
  }

  /* o que a gente monta (seção #laboratorio) */
  /* peças soltas nas bordas (bordas-3d.js): atrás do conteúdo, cortadas pela borda da seção */
  .com-bordas { position: relative; overflow: hidden; }
  .com-bordas > .wrap { position: relative; z-index: 1; }
  .bordas-3d { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
  .cartoes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 44px; }
  .cartao { border: 2px solid var(--tinta); border-radius: 20px; padding: 28px 26px 30px; box-shadow: 0 7px 0 var(--tinta); background: var(--leite); }
  .cartao .n { font-size: 14px; letter-spacing: .2em; color: var(--apoio); }
  .cartao h3 { font-size: 24px; line-height: 1.15; letter-spacing: -.03em; margin: 14px 0 10px; }
  .cartao p { font-size: 16px; line-height: 1.6; color: var(--texto); }
  .nota { margin-top: 34px; font-size: 16px; color: var(--apoio); }
  @media (max-width: 1000px) { .cartoes { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .cartoes { grid-template-columns: 1fr; } }
  .laboratorio .lead { margin-top: 22px; max-width: 760px; text-wrap: pretty; }
  .laboratorio .cartoes { grid-template-columns: repeat(3, 1fr); }
  .nota a { color: inherit; }
  @media (max-width: 1000px) { .laboratorio .cartoes { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .laboratorio .cartoes { grid-template-columns: 1fr; } }

  /* portfólio · caso Casagrup */
  .portfolio { background: var(--tinta); color: var(--leite); }
  .portfolio .rotulo { color: #9a9a9a; }
  .portfolio .lead { color: #c9c9c9; }
  .caso-topo { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: end; }
  .caso-topo > * { min-width: 0; }
  .fatos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 56px 0 44px; }
  .fato { border-top: 1px solid #333; padding-top: 16px; }
  .fato b { display: block; font-size: clamp(30px, 3.4vw, 46px); letter-spacing: -.04em; line-height: 1; }
  .fato span { display: block; margin-top: 8px; font-size: 14px; color: #a8a8a8; line-height: 1.45; }
  .vitrine { display: grid; grid-template-columns: 1fr 230px; gap: 28px; align-items: end; }
  .vitrine > * { min-width: 0; }
  .navegador { border-radius: 14px; overflow: hidden; background: #121212; border: 1px solid #2c2c2c; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8); }
  .navegador .barra-nav { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid #2c2c2c; }
  .navegador .barra-nav i { width: 11px; height: 11px; border-radius: 50%; background: #3a3a3a; }
  .navegador .barra-nav span { margin-left: 14px; font-size: 12px; color: #8a8a8a; }
  .telas { position: relative; aspect-ratio: 1440 / 900; }
  .telas img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; }
  .telas img.on { opacity: 1; transition: opacity .45s ease .3s; }   /* a nova entra só depois que a anterior saiu */
  .abas { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
  .aba { font: 500 14px 'IBM Plex Mono', monospace; color: #cfcfcf; background: transparent; border: 1px solid #3a3a3a; border-radius: 999px; padding: 9px 16px; cursor: pointer; transition: background .2s, color .2s; }
  .aba.on, .aba:hover { background: var(--leite); color: var(--tinta); border-color: var(--leite); }
  .celular { border-radius: 32px; overflow: hidden; border: 8px solid #2a2a2a; background: #000; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8); aspect-ratio: 600 / 1298; position: relative; }
  .celular img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity .3s ease; }
  .celular img.on { opacity: 1; transition: opacity .45s ease .3s; }
  .entregas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 80px; }
  .entrega { background: #121212; border: 1px solid #2c2c2c; border-radius: 18px; padding: 24px; }
  .entrega h3 { font-size: 20px; letter-spacing: -.02em; margin-bottom: 10px; }
  .entrega p { font-size: 14px; line-height: 1.6; color: #b5b5b5; }
  .posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
  .posts img { border-radius: 10px; aspect-ratio: 4 / 5; object-fit: cover; }
  .redes-linha { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: center; margin-top: 80px; }
  .redes-linha > * { min-width: 0; }
  .redes-linha h3 { font-size: clamp(26px, 2.6vw, 38px); letter-spacing: -.04em; line-height: 1.05; margin: 14px 0 14px; }
  .redes-linha p { font-size: 16px; line-height: 1.6; color: #c9c9c9; }
  @media (max-width: 1000px) { .caso-topo, .vitrine, .redes-linha { grid-template-columns: 1fr; } .celular { max-width: 230px; } .fatos, .entregas { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .fatos, .entregas { grid-template-columns: 1fr; } }

  /* por que montar com a gente */
  .porque { border-top: 1px solid var(--linha); }
  .motivos { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 56px; margin-top: 44px; }
  .motivo { border-top: 2px solid var(--tinta); padding-top: 22px; }
  .motivo h3 { font-size: 24px; letter-spacing: -.03em; margin-bottom: 10px; }
  .motivo p { font-size: 16px; line-height: 1.6; color: var(--texto); max-width: 520px; }
  @media (max-width: 760px) { .motivos { grid-template-columns: 1fr; } }

  /* quais peças você tem */
  .pecas { background: #F6F5F2; }
  .pecas .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
  .pecas .wrap > * { min-width: 0; }
  .chips { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .chip { border-radius: 14px; padding: 13px 16px; border: 2px solid var(--tinta); background: var(--leite); font: 500 15px 'IBM Plex Mono', monospace; text-align: left;
    display: flex; align-items: center; gap: 12px; box-shadow: 0 5px 0 var(--tinta); transition: transform .15s, background .15s, box-shadow .15s; cursor: pointer; color: var(--tinta); }
  .chip::before { content: ""; flex: none; width: 15px; height: 15px; border: 2px solid var(--tinta); border-radius: 4px; }
  .chip.on { background: var(--tinta); color: var(--leite); transform: translateY(5px); box-shadow: 0 0 0 var(--tinta); }
  .chip.on::before { background: var(--focinho); border-color: var(--focinho); }
  /* a mesa fica logo acima das peças: quem clica vê a vaca se montar na hora */
  .mesa { margin-top: 26px; background: var(--leite); border: 1.5px solid var(--linha); border-radius: 18px; padding: 18px 20px 14px; }
  #mini { width: 100%; height: 210px; display: block; }
  .estado { display: flex; justify-content: space-between; font-size: 14px; color: var(--apoio); margin-top: 8px; }
  .estado #miniPct { font-weight: 600; color: var(--tinta); }
  .mesa.pulou { animation: pula .35s cubic-bezier(.3,1.6,.5,1); }
  @keyframes pula { 40% { transform: translateY(-5px); } }
  .chips { margin-top: 18px; }
  .pecas .formulario { position: sticky; top: 100px; }
  .formulario { background: var(--leite); border: 2px solid var(--tinta); border-radius: 22px; padding: 30px; box-shadow: 0 8px 0 var(--tinta); }
  .formulario h3 { font-size: 26px; letter-spacing: -.03em; margin-bottom: 18px; }
  .campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
  .campo label { font-size: 14px; font-weight: 600; }
  .campo input, .campo textarea { font: 400 16px 'IBM Plex Mono', monospace; padding: 12px 14px; border: 1.5px solid #bdbab3; border-radius: 12px; background: var(--leite); color: var(--tinta); width: 100%; }
  .campo input:focus, .campo textarea:focus { outline: none; border-color: var(--tinta); }
  .campo textarea { min-height: 130px; resize: vertical; line-height: 1.5; }
  .dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .dupla > * { min-width: 0; }
  .consentimento { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--texto); margin: 6px 0 20px; }
  .consentimento input { margin-top: 3px; width: 16px; height: 16px; flex: none; accent-color: var(--tinta); }
  .isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .aviso { margin-top: 14px; font-size: 14px; line-height: 1.5; min-height: 21px; }
  .aviso.ok { color: #1e7a46; } .aviso.erro { color: #b3261e; }
  @media (max-width: 900px) { .pecas .wrap { grid-template-columns: 1fr; } }
  @media (max-width: 520px) { .chips, .dupla { grid-template-columns: 1fr; } .dupla { row-gap: 0; } }

  /* rodapé */
  .rodape { background: var(--tinta); color: #bdbdbd; padding: 70px 0 40px; }
  .rodape .wrap { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; align-items: flex-end; }
  .rodape .nome { color: var(--leite); font-size: 30px; }
  .rodape .nome span { color: #9a9a9a; }
  .rodape p { font-size: 15px; line-height: 1.7; margin-top: 12px; }
  .rodape .links { display: flex; gap: 0 24px; font-size: 14px; flex-wrap: wrap; }
  .rodape .links a { color: #d9d9d9; display: inline-block; padding: 12px 0; }   /* área de toque confortável no celular */
  .rodape small { display: block; width: 100%; margin-top: 40px; font-size: 13px; color: #8a8a8a; }

  /* entra subindo quando aparece na tela */
  .sobe { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
  .sobe.visivel { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .sobe { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

  /* chamada do portfólio na página inicial e cartões de caso */
  .destaque { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0; margin-top: 56px; text-decoration: none; color: inherit; border-radius: 22px; overflow: hidden; background: #121212; border: 1px solid #2c2c2c; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
  .destaque:hover { transform: translateY(-4px); }
  .destaque img { width: 100%; height: 100%; object-fit: cover; }
  .destaque-texto { padding: 40px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
  .destaque-texto h3 { font-size: clamp(32px, 3.4vw, 52px); letter-spacing: -.045em; line-height: 1; }
  .destaque-texto p { font-size: 16px; line-height: 1.6; color: #c9c9c9; }
  .destaque-texto .botao { align-self: flex-start; margin-top: 8px; }
  .nota-escura { margin-top: 28px; font-size: 16px; }
  .nota-escura a { color: #d9d9d9; display: inline-block; padding: 10px 0; }
  @media (max-width: 900px) { .destaque { grid-template-columns: 1fr; } .destaque-texto { padding: 28px; } }
  /* portfólio da home: caixas de kit que viram e mostram o site */
  .kits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 56px; }
  .kit { display: block; aspect-ratio: 4 / 5; perspective: 1400px; text-decoration: none; color: inherit; transition-delay: var(--atraso, 0s); }
  .kit-giro { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
  .kit-frente, .kit-verso { position: absolute; inset: 0; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
  .kit-frente { background: var(--leite); color: var(--tinta); box-shadow: inset -14px 0 0 rgba(0,0,0,.06); }
  .kit-faixa { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; background: var(--tinta); color: var(--leite); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; border: 3px solid var(--leite); border-radius: 16px 16px 0 0; }
  .kit-faixa span { color: #9a9a9a; }
  .kit-frente img { flex: 1; min-height: 0; width: 100%; object-fit: contain; padding: 10px 14px 0; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
  .kit-nome { padding: 0 22px; font-weight: 700; font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -.04em; line-height: 1.05; }
  .kit-rotulo { padding: 6px 22px 0; font-size: 13px; color: var(--apoio); }
  .kit-rodape { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 16px 22px 20px; padding-top: 14px; border-top: 2px solid var(--tinta); font-size: 13px; }
  .kit-rodape b { padding: 4px 10px; border: 2px solid var(--tinta); border-radius: 999px; white-space: nowrap; }
  .kit-verso { transform: rotateY(180deg); background: #121212; border: 1px solid #2c2c2c; padding: 18px; gap: 16px; }
  .kit-verso img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 10px; }
  .kit-verso .kit-nome { padding: 0; color: var(--leite); }
  .kit-frase { flex: 1; font-size: 15px; line-height: 1.6; color: #c9c9c9; }
  .kit-verso .botao { align-self: flex-start; }
  .kits-dica { display: none; margin-top: 10px; font-size: 13px; color: #9a9a9a; text-align: center; }
  .kits-dica b { color: var(--leite); font-weight: 600; }
  .kits-nav { display: none; align-items: center; justify-content: center; gap: 18px; margin-top: 18px; }
  .kits-seta { width: 48px; height: 48px; border-radius: 14px; border: 2px solid #3a3a3a; background: transparent; color: var(--leite); font: 600 20px 'IBM Plex Mono', monospace; cursor: pointer; transition: opacity .2s, border-color .2s; }
  .kits-seta:disabled { opacity: .3; }
  .kits-pontos { display: flex; gap: 8px; }
  /* cada ponto é um tijolinho: o da caixa que está na tela fica aceso e mais comprido */
  .kits-pontos button { position: relative; width: 22px; height: 12px; padding: 0; border: 0; border-radius: 3px; background: #3a3a3a; cursor: pointer; transition: width .3s, background .3s; }
  .kits-pontos button::before { content: ""; position: absolute; left: 4px; right: 4px; top: -4px; height: 4px; background: radial-gradient(ellipse 3px 4px at 4px 4px, #3a3a3a 98%, transparent) 0 0 / 8px 4px repeat-x; transition: background .3s; }
  .kits-pontos button.on { width: 38px; background: var(--leite); }
  .kits-pontos button.on::before { background: radial-gradient(ellipse 3px 4px at 4px 4px, var(--leite) 98%, transparent) 0 0 / 8px 4px repeat-x; }
  .kits-pontos button::after { content: ""; position: absolute; inset: -16px -4px; }   /* área de toque maior que o desenho */
  @media (hover: none) and (max-width: 900px) { .kits-dica { display: block; } .kits-nav { display: flex; } }
  .kit.virada .kit-giro { transform: rotateY(180deg); }
  @media (hover: hover) {
    .kit:hover .kit-giro, .kit:focus-visible .kit-giro { transform: rotateY(180deg); }
  }
  .kit:focus-visible { outline: none; }
  .kit:focus-visible .kit-verso { outline: 3px solid var(--leite); outline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) {
    .kit-giro { transition: none; }
  }
  @media (max-width: 900px) {
    .kits { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(72vw, 340px); overflow-x: auto; scroll-snap-type: x mandatory; margin: 40px -32px 0; padding: 0 32px 8px; scroll-padding: 0 32px; scrollbar-width: none; }
    .kits::-webkit-scrollbar { display: none; }
    .kit { scroll-snap-align: center; }
  }
  /* páginas internas */
  .abertura { padding: 90px 0 40px; }
  .abertura h1 { font-size: clamp(42px, 5.4vw, 80px); line-height: .95; letter-spacing: -.05em; margin: 20px 0 24px; max-width: 980px; }
  .casos { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding-bottom: 110px; }
  .caso-card { text-decoration: none; color: inherit; border: 2px solid var(--tinta); border-radius: 22px; overflow: hidden; box-shadow: 0 8px 0 var(--tinta); background: var(--leite); transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; }
  .caso-card:hover { transform: translateY(3px); box-shadow: 0 5px 0 var(--tinta); }
  .caso-card img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
  .caso-card .corpo { padding: 26px 28px 30px; }
  .caso-card h2 { font-size: 34px; margin: 10px 0 10px; }
  .caso-card p { font-size: 16px; line-height: 1.6; color: var(--texto); }
  .tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
  .tags span { font-size: 12px; border: 1px solid var(--linha); border-radius: 999px; padding: 5px 12px; color: var(--texto); }
  /* a vaga vazia: uma peça faltando, esperando o próximo projeto */
  .caso-card.vaga { border-style: dashed; box-shadow: none; background: #F6F5F2; justify-content: center; align-items: center; text-align: center; min-height: 420px; padding: 40px; cursor: default; }
  .caso-card.vaga:hover { transform: none; }
  .pino { width: 120px; height: 120px; border: 2px dashed #b9b5ad; border-radius: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 22px; margin-bottom: 26px; }
  .pino i { border: 2px dashed #b9b5ad; border-radius: 50%; }
  @media (max-width: 860px) { .casos { grid-template-columns: 1fr; } }
  /* caso: blocos de texto */
  .capitulo-caso { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; padding: 70px 0; border-top: 1px solid #2c2c2c; }
  .capitulo-caso > * { min-width: 0; }
  .capitulo-caso h3 { font-size: clamp(26px, 2.6vw, 38px); letter-spacing: -.04em; line-height: 1.05; }
  .capitulo-caso p, .capitulo-caso li { font-size: 17px; line-height: 1.7; color: #c9c9c9; }
  .capitulo-caso ul { padding-left: 20px; display: grid; gap: 8px; }
  @media (max-width: 900px) { .capitulo-caso { grid-template-columns: 1fr; gap: 18px; } }
  .voltar { display: inline-block; margin-top: 30px; padding: 10px 0; font-size: 15px; color: #d9d9d9; }

  /* segredos */
  .cabecalho .nome { position: relative; }
  .cabecalho .nome i { font-style: normal; display: inline-block; transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
  .cabecalho .nome:hover i { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); }
  .balao-muu { position: absolute; left: 100%; top: -6px; margin-left: 6px; background: var(--tinta); color: var(--leite); font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 10px 10px 10px 2px; white-space: nowrap; animation: muu 1.3s ease forwards; pointer-events: none; }
  @keyframes muu { 0% { opacity: 0; transform: translateY(6px) scale(.6); } 15% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
  #aviso-solto { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--tinta); color: var(--leite); border-radius: 999px; padding: 12px 22px; font-size: 14px; opacity: 0; transition: .35s; pointer-events: none; z-index: 60; }
  #aviso-solto.on { opacity: 1; transform: translate(-50%, 0); }
  #danca { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 55; pointer-events: none; }
  @media (prefers-reduced-motion: reduce) { .cabecalho .nome:hover i { transform: none; } }
  /* 404: a vaca foi pro brejo */
  .brejo { text-align: center; padding: 60px 0 110px; }
  .vaca-404 { display: block; width: min(380px, 80%); height: auto; margin: 0 auto 26px; }
  .brejo h1 { font-size: clamp(40px, 5.6vw, 80px); line-height: .95; letter-spacing: -.05em; margin: 16px 0 18px; }
  .brejo .lead { margin: 0 auto; }

  /* animações e dinâmicas */
  .palavras .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
  .palavras .w > span { display: inline-block; transform: translateY(105%); transition: transform .8s cubic-bezier(.22,.68,.32,1); }
  .palavras.visivel .w > span { transform: none; }
  .revela { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s cubic-bezier(.7,0,.2,1); }
  .revela.visivel { clip-path: inset(0 0 0 0); }
  img.revela { transform: scale(1.08); transition: clip-path 1.1s cubic-bezier(.7,0,.2,1), transform 1.6s cubic-bezier(.2,.8,.2,1); }
  img.revela.visivel { transform: none; }
  .inclina { transition: transform .25s ease-out, opacity .7s cubic-bezier(.2,.8,.2,1); will-change: transform; }
  .leitura { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--focinho); transform-origin: left; transform: scaleX(0); display: block; }
  @media (prefers-reduced-motion: reduce) { .palavras .w > span, img.revela { transform: none; transition: none; } .revela { clip-path: none; transition: none; } }

  .peca-vaga { width: 190px; height: 170px; margin-bottom: 10px; }
  .peca-vaga canvas { display: block; width: 100%; height: 100%; }

  /* caso: a vaca de peças chega montada quando o capítulo "como a gente montou" aparece */
  .vaca-chega { width: min(340px, 100%); height: auto; margin-top: 34px; opacity: 0; transform: translateY(-70px) rotate(-6deg); filter: drop-shadow(0 26px 18px rgba(0,0,0,.45)); }
  .visivel .vaca-chega { animation: chega 1.1s cubic-bezier(.3,1.5,.5,1) .35s forwards; }
  @keyframes chega { 0% { opacity: 0; transform: translateY(-70px) rotate(-6deg); } 55% { opacity: 1; transform: translateY(8px) rotate(1.5deg); } 75% { transform: translateY(-6px) rotate(-.5deg); } 100% { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .vaca-chega { opacity: 1; transform: none; animation: none !important; } }

  /* a vaca </> antes do nome no cabeçalho */
  .nome { display: inline-flex; align-items: center; gap: 10px; }
  .nome-texto { font-weight: inherit; white-space: nowrap; }
  .nome-vaca { height: 30px; width: auto; display: block; flex: none; transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
  .cabecalho .nome:hover .nome-vaca { transform: rotate(-6deg) translateY(-1px); }
  .rodape .nome-vaca { height: 40px; filter: brightness(0) invert(1); }
  @media (max-width: 560px) { .nome-vaca { height: 24px; } }

  /* caso: as peças soltas viram o objeto montado enquanto o capítulo passa (pequeno, no fundo escuro) */
  .peca-caso { margin-top: 28px; max-width: 420px; }
  .peca-palco { position: relative; aspect-ratio: 900 / 520; }
  .peca-palco img { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; will-change: opacity, transform; }
  .peca-palco .peca-montada { opacity: 0; }
  .peca-caso .leg { display: block; margin-top: 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8a8a8a; }
  @media (prefers-reduced-motion: reduce) { .peca-palco .peca-solta { opacity: 0; } .peca-palco .peca-montada { opacity: 1; } }

  /* portfólio: passando o mouse, o cartão mostra a peça montada do cliente */
  .caso-card { position: relative; }
  .capa-caso { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 16 / 10; background: #fff; opacity: 0; transition: opacity .35s ease; z-index: 1; pointer-events: none; }
  .caso-card .capa-caso img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; transform: scale(.96); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
  @media (hover: hover) { .caso-card:hover .capa-caso { opacity: 1; } .caso-card:hover .capa-caso img { transform: none; } }

  /* ===== caso no formato "manual de montagem" ===== */
  .manual { background: #000; color: #fff; }
  .manual .rotulo { color: #9a9a9a; }
  .manual .lead { color: #c9c9c9; }
  /* fundo de pinos bem sutil, como a base de montar */
  .manual-capa, .caixa, .pronto { background-image: radial-gradient(circle at 12px 12px, rgba(255,255,255,.045) 0 5px, transparent 5.5px); background-size: 24px 24px; }
  .manual-capa { padding: 110px 0 70px; }
  .manual-capa h1 { font-size: clamp(64px, 12vw, 180px); line-height: .85; letter-spacing: -.06em; margin: 16px 0 22px; }
  .capa-rodape { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 34px; }
  .selo { border: 1.5px solid #3a3a3a; border-radius: 999px; padding: 9px 16px; font-size: 14px; color: #c9c9c9; }
  .selo b { color: #fff; font-size: 16px; }
  .caixa { padding: 40px 0 100px; }
  .caixa-titulo { font-size: clamp(26px, 3vw, 40px); margin-bottom: 30px; }
  .pecas-lista { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
  .peca-item { background: #121212; border: 1px solid #2c2c2c; border-radius: 16px; padding: 22px 18px; display: flex; flex-direction: column; gap: 10px; }
  .peca-item b { font-size: 40px; letter-spacing: -.04em; line-height: 1; }
  .peca-item b::after { content: "×"; font-size: 22px; color: #8a8a8a; margin-left: 2px; }
  .peca-item span { font-size: 14px; color: #b5b5b5; line-height: 1.4; }
  /* tijolinho desenhado em CSS: a quantidade de pinos vem do --pinos */
  .tijolo { display: block; height: 22px; width: calc(var(--pinos) * 14px + 8px); max-width: 100%; background: #f2f0eb; border-radius: 3px; position: relative; margin-top: 10px; box-shadow: inset 0 -4px 0 #d6d2c8; }
  .tijolo::before { content: ""; position: absolute; left: 4px; right: 4px; top: -6px; height: 6px;
    background: radial-gradient(ellipse 5px 6px at 7px 6px, #f2f0eb 98%, transparent) 0 0 / 14px 6px repeat-x; }
  .tijolo.verde { background: #2ea84a; box-shadow: inset 0 -4px 0 #1f8436; }
  .tijolo.verde::before { background: radial-gradient(ellipse 5px 6px at 7px 6px, #2ea84a 98%, transparent) 0 0 / 14px 6px repeat-x; }
  /* o tijolo em 3D que entra no lugar do de CSS (caixa-3d.js) */
  .tijolo-3d { display: block; width: 100%; height: 88px; margin: -16px 0 -12px; }
  @media (max-width: 1000px) { .pecas-lista { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 560px) { .pecas-lista { grid-template-columns: repeat(2, 1fr); } }
  .passos { padding: 40px 0 60px; position: relative; }
  .passo { display: grid; grid-template-columns: .75fr 1.25fr; gap: 56px; align-items: center; padding: 70px 0; border-top: 1px dashed #333; }
  .passo > * { min-width: 0; }
  .passo.inverte .passo-texto { order: 2; }
  .passo-n { display: inline-grid; place-items: center; width: 64px; height: 64px; border: 3px solid #fff; border-radius: 14px; font-size: 32px; font-weight: 700; margin-bottom: 20px; }
  .passo h3 { font-size: clamp(28px, 3vw, 44px); line-height: 1; letter-spacing: -.04em; margin-bottom: 14px; }
  .passo p { font-size: 18px; line-height: 1.55; color: #c9c9c9; max-width: 420px; }
  .pecas-passo { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .pecas-passo .rotulo { width: 100%; font-size: 12px; }
  .tag-peca { font-size: 13px; background: #f2f0eb; color: #000; border-radius: 6px; padding: 5px 10px; font-weight: 600; }
  .passo-tela .navegador img { display: block; width: 100%; height: auto; }
  .celulares { display: flex; gap: 22px; justify-content: center; }
  .celulares .celular { width: min(230px, 44%); }
  @media (max-width: 900px) { .passo { grid-template-columns: 1fr; gap: 26px; padding: 50px 0; } .passo.inverte .passo-texto { order: 0; } }
  .contador-passo { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 20px); background: #fff; color: #000; border-radius: 999px; padding: 9px 18px; font-size: 13px; opacity: 0; transition: .3s; pointer-events: none; z-index: 20; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
  .contador-passo.on { opacity: 1; transform: translate(-50%, 0); }
  /* celular: embaixo ele tapava texto e etiquetas; sobe pro canto, logo abaixo do cabeçalho */
  @media (max-width: 600px) { .contador-passo { left: auto; right: 14px; bottom: auto; top: 92px; transform: translateY(-10px); padding: 7px 14px; font-size: 12px; } .contador-passo.on { transform: none; } }
  .pronto { text-align: center; padding: 110px 0 120px; border-top: 1px dashed #333; }
  .pronto .check { display: inline-grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: #2ea84a; color: #fff; font-size: 44px; font-weight: 700; margin-bottom: 26px; }
  .pronto h2 { font-size: clamp(40px, 6vw, 84px); }
  .pronto .lead { margin: 0 auto; }
  .pronto .voltar { display: inline-block; margin-top: 30px; }

  .tijolo.madeira { background: #c89a62; box-shadow: inset 0 -4px 0 #a97c46; }
  .tijolo.madeira::before { background: radial-gradient(ellipse 5px 6px at 7px 6px, #c89a62 98%, transparent) 0 0 / 14px 6px repeat-x; }
  .forms-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .form-card { background: #f2f0eb; color: #000; border-radius: 16px; padding: 22px; box-shadow: 0 6px 0 #c9c4b8; display: flex; flex-direction: column; gap: 8px; }
  .form-card b { font-size: 20px; letter-spacing: -.02em; }
  .form-card span { font-size: 13px; color: #555; }
  .form-card::after { content: "enviar →"; align-self: flex-start; margin-top: 8px; font-size: 12px; font-weight: 700; background: #000; color: #fff; border-radius: 8px; padding: 6px 10px; }
  .passo-tela .posts { margin-top: 0; }

  /* desenhos de "o que a gente monta" (servicos-iso.js): o desenho técnico do portal Mugido, com a peça de destaque no focinho */
  .il-servico { height: 170px; margin: -6px 0 18px; display: flex; align-items: center; justify-content: center; }
  .il-servico .il { width: 100%; height: 100%; overflow: visible; }
  .il-servico .iso-peca polygon, .il-servico .iso-peca path, .il-servico .iso-peca ellipse { stroke: var(--tinta); stroke-width: 1.3; stroke-linejoin: round; fill: #fff; }
  .il-servico .iso-peca .d { fill: #f4f4f4; }
  .il-servico .iso-peca.cor .t { fill: color-mix(in srgb, var(--focinho) 45%, #fff); }
  .il-servico .iso-peca.cor .e { fill: color-mix(in srgb, var(--focinho) 75%, #fff); }
  .il-servico .iso-peca.cor .d { fill: var(--focinho); }
  .il-servico .iso-guia { stroke: var(--tinta); stroke-width: .9; stroke-dasharray: 3 3; stroke-opacity: .55; }
  /* antes de aparecer: as peças que caem ficam no alto, invisíveis; ao montar, descem e encaixam com um tranco */
  .il-servico .cai { opacity: 0; transform: translateY(calc(var(--queda) * -1)); }
  .il-servico .guias { opacity: 0; }
  .il-servico.montado .cai { animation: encaixa .9s cubic-bezier(.3, 1.45, .55, 1) var(--atraso) both; }
  .il-servico.montado .guias { animation: guia 1.4s ease var(--atraso) both; }
  .il-servico.montado .cai.loop { animation: encaixa-loop 3.2s cubic-bezier(.3, 1.45, .55, 1) var(--atraso) infinite both; }
  .il-servico.montado .cai.loop ~ .guias, .il-servico.montado .guias:has(+ .loop) { animation: guia-loop 3.2s ease var(--atraso) infinite both; }
  @keyframes encaixa { from { opacity: 0; transform: translateY(calc(var(--queda) * -1)); } 25% { opacity: 1; } to { opacity: 1; transform: none; } }
  @keyframes guia { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: .35; } }
  @keyframes encaixa-loop { 0% { opacity: 0; transform: translateY(calc(var(--queda) * -1)); } 8% { opacity: 1; } 30%, 82% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateY(calc(var(--queda) * -1)); } }
  @keyframes guia-loop { 0% { opacity: 0; } 8% { opacity: 1; } 40%, 82% { opacity: .35; } 94%, 100% { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .il-servico .cai, .il-servico .guias { animation: none !important; opacity: 1; transform: none; } .il-servico .guias { opacity: .35; } }

  /* "Corre, vaca!" (jogo-vaca.js): a surpresa no topo do rodapé, em pixel claro sobre o preto */
  .jogo-faixa { max-width: 1280px; margin: -30px auto 56px; padding: 0 32px; }
  .jogo-vaca { border-bottom: 1px solid #2a2a2a; padding-bottom: 8px; }
  .jogo-vaca canvas { display: block; width: 100%; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; border-radius: 10px; }
  .jogo-vaca canvas:focus { outline: none; }
  .jogo-vaca canvas:focus-visible { outline: 2px dashed #6b6b6b; outline-offset: 6px; }
  @media (max-width: 600px) { .jogo-faixa { padding: 0 20px; margin-bottom: 40px; } }

  /* topo: atalho "do que você precisa?" leva direto ao serviço (no lugar dos selos, que repetiam o "por que") */
  .atalhos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 46px; max-width: 760px; }
  .atalhos span { width: 100%; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--apoio); margin-bottom: 4px; }
  .atalhos a { font-size: 14px; text-decoration: none; color: var(--tinta); border: 1.5px solid var(--tinta); border-radius: 999px; padding: 9px 16px; background: var(--leite); transition: background .2s, color .2s, transform .2s; }
  .atalhos a:hover { background: var(--tinta); color: var(--leite); transform: translateY(-2px); }
  @media (max-width: 600px) { .atalhos { gap: 8px; margin-top: 34px; } .atalhos a { font-size: 13px; padding: 8px 13px; } }
  /* serviços: "quero isso" no pé de cada caixa, alinhado entre elas */
  .laboratorio .cartao { display: flex; flex-direction: column; scroll-margin-top: 110px; }
  .cartao .quero { margin-top: auto; padding-top: 18px; font-size: 14px; font-weight: 600; color: var(--tinta); text-decoration: none; align-self: flex-start; border-bottom: 2px solid var(--focinho); }
  .cartao .quero:hover { border-bottom-color: var(--tinta); }
  .cartao:target { outline: 3px solid var(--focinho); outline-offset: 4px; }

  /* botão de WhatsApp (zap-vaca.js): a vaca do logo, virada, espiando pela borda direita com o ícone de conversa */
  .zap { position: fixed; right: 0; bottom: 0; z-index: 60; display: flex; align-items: flex-end; gap: 10px; transition: transform .5s cubic-bezier(.3, 1.4, .5, 1), opacity .3s; }
  .zap.escondida { transform: translateX(130%); opacity: 0; pointer-events: none; }
  .zap-bt { position: relative; display: block; width: 156px; height: 104px; -webkit-tap-highlight-color: transparent; }
  .zap-vaca { position: absolute; right: 0; bottom: 0; width: 110px; height: 104px; overflow: hidden; }   /* só cabeça e peito, encostados no fim da tela: ela espia de baixo, pelo canto */
  .zap-vaca img { position: absolute; left: 0; top: 2px; width: 330px; max-width: none; transform: scaleX(-1); transform-origin: 50% 50%;
    margin-left: -1px; transition: transform .45s cubic-bezier(.3, 1.5, .5, 1); animation: espia 5.5s ease-in-out infinite; }
  .zap-bt:hover .zap-vaca img, .zap-bt:focus-visible .zap-vaca img { animation: none; transform: scaleX(-1) translateX(-14px) rotate(4deg); }
  .zap-icone { position: absolute; left: 0; bottom: 16px; width: 46px; height: 46px; border-radius: 50%; background: var(--leite); color: var(--tinta);
    border: 2px solid var(--tinta); box-shadow: 0 4px 0 var(--focinho); display: grid; place-items: center; transition: transform .3s; }
  .zap-icone svg { width: 26px; height: 26px; }
  .zap-bt:hover .zap-icone { transform: translateY(-3px) rotate(-8deg); }
  .zap-bt:focus-visible { outline: 2px dashed var(--tinta); outline-offset: 4px; border-radius: 12px; }
  .zap-balao { position: relative; max-width: 230px; margin-bottom: 70px; background: var(--leite); color: var(--tinta); font-size: 13px; line-height: 1.4;
    border: 2px solid var(--tinta); border-radius: 14px 14px 4px 14px; padding: 9px 13px; box-shadow: 0 4px 0 var(--tinta);
    opacity: 0; transform: translateY(8px) scale(.9); transform-origin: right bottom; transition: opacity .25s, transform .35s cubic-bezier(.3, 1.5, .5, 1); pointer-events: none; }
  .zap.falando .zap-balao { opacity: 1; transform: none; }
  .zap.pulou .zap-bt { animation: pulinho .5s cubic-bezier(.3, 1.6, .5, 1); }
  /* rolando: só o ícone fica na borda; a vaca e o balão saem do caminho do conteúdo */
  .zap-bt { transition: transform .45s cubic-bezier(.3, 1.3, .5, 1); }
  .zap.rolando .zap-bt { transform: translateX(110px); }
  .zap.rolando .zap-balao { opacity: 0; transform: translateY(8px) scale(.9); }
  @keyframes espia { 0%, 70%, 100% { transform: scaleX(-1) translateX(0) rotate(0); } 78% { transform: scaleX(-1) translateX(-8px) rotate(3deg); } 86% { transform: scaleX(-1) translateX(-8px) rotate(-2deg); } }
  @keyframes pulinho { 0% { transform: none; } 40% { transform: translateY(-14px); } 100% { transform: none; } }
  @media (max-width: 600px) { .zap { bottom: 16px; } .zap-bt { transform: scale(.82); transform-origin: right bottom; } .zap.rolando .zap-bt { transform: scale(.82) translateX(110px); } .zap-balao { max-width: 190px; margin-bottom: 58px; font-size: 12px; } }
  @media (prefers-reduced-motion: reduce) { .zap-vaca img { animation: none; } .zap.pulou .zap-bt { animation: none; } }
  /* no fundo escuro (portfólio, manual), a vaca e o ícone ficam brancos */
  .zap-vaca img, .zap-icone { transition: filter .3s, background .3s, color .3s, border-color .3s; }
  .zap.no-escuro .zap-vaca img { filter: invert(1); }
  .zap.no-escuro .zap-icone { background: var(--tinta); color: var(--leite); border-color: var(--leite); }
  .zap.no-escuro .zap-balao { border-color: var(--leite); box-shadow: 0 4px 0 var(--focinho); }