/* Ajustes de 2026-10-25 na página Para escritórios: abertura, Pacotes, Render, prancha viva,
   programas e o hover legível dos botões. Carregado depois de identidade.css e fecho.css. */
/* Pacotes só como apresentação — cada pacote, o que inclui e um
   "Pedir orçamento" que abre o e-mail com o nome do pacote no assunto.
   Saem os controles de tamanho, o "Seu pedido" e a faixa do celular. */
.shop { grid-template-columns: 1fr; }
.cart, .est-barra, .est-barra[hidden] { display: none !important; }
.pkgs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .pkgs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pkgs { grid-template-columns: 1fr; } }
.pkg { display: flex; flex-direction: column; }
.pkg ul { flex: 1; align-content: start; justify-content: start; }
.pkg footer { margin-top: auto; }
.pkg footer > div:empty { display: none; }
.pkg footer .btn { text-decoration: none; }
/* sem a frase de abertura dos Pacotes, a pedido */
#packages [data-shop="lead"] { display: none; }
/* EN / PT por último, depois de Trabalhe comigo */
.bar .lang { margin-left: clamp(20px, 2vw, 32px); }

/* ---------- comparação do topo: legenda de prancha ----------
   Sem etiquetas, pílulas nem desfoque. "Imagem" e "Desenho" acima da
   imagem, em letra pequena; embaixo um fio que se enche no tempo de cada
   projeto, o número, o nome e as setas. A alça redonda continua. */
.hero-compare { grid-template-columns: minmax(0, 1fr) auto !important; width: 100%; row-gap: 0; }
.hero-compare .compare {
  grid-area: auto !important; grid-row: 1 !important; grid-column: 1 / -1 !important; width: 100%;
  overflow: visible; box-shadow: none !important; margin-top: 30px;
}
.compare.sweep .c-img { transition: clip-path 4.4s cubic-bezier(.65, 0, .35, 1) !important; }
.compare.sweep .c-handle { transition: left 4.4s cubic-bezier(.65, 0, .35, 1) !important; }
.compare .c-img, .compare .c-draw { transition: opacity .9s ease !important; }
.hero-compare .compare .c-lab {
  top: -30px !important; bottom: auto !important; padding: 0 !important;
  background: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  font: 400 10.5px/1 var(--font) !important; letter-spacing: .2em !important; color: rgba(252, 251, 249, .62) !important;
}
.hero-compare .compare .c-lab.l { left: 0 !important; } .hero-compare .compare .c-lab.r { right: 0 !important; }
.hero-card [data-hero-dots].hero-dots {
  grid-area: auto !important; grid-row: 2 !important; grid-column: 1 / -1 !important;
  display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  column-gap: 16px; margin: 14px 0 0 !important; padding: 20px 0 0 !important; border-radius: 0 !important;
  background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  justify-self: stretch !important; align-self: auto !important; position: relative;
}
.hc-fio { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(252, 251, 249, .14); overflow: hidden; }
.hc-fio b { position: absolute; inset: 0; background: rgba(252, 251, 249, .7); transform: scaleX(0); transform-origin: left; animation: hero-fio var(--hero-ms, 9000ms) linear forwards; }
.hero-dots.paused .hc-fio b { animation: none; transform: scaleX(0); }
@keyframes hero-fio { to { transform: scaleX(1); } }
.hc-num { font: 400 11px/1 var(--font); letter-spacing: .14em; color: rgb(252, 251, 249); font-variant-numeric: tabular-nums; }
/* 2026-10-26 · auditoria WCAG 1.4.3 — a .45 o contador dava 4,15:1 em texto
   de 11px, abaixo dos 4,5. A .62 passa a 6,1:1. */
.hc-num em { font-style: normal; color: rgba(252, 251, 249, .62); }
.hero-cap {
  grid-row: 2 !important; grid-column: 1 / -1 !important; justify-self: start; align-self: center;
  margin: 34px 0 0 72px !important; z-index: 1;
}
.hero-proj { border-bottom: 0 !important; font-size: 14px; letter-spacing: 0; }
.hc-setas { grid-column: 3; display: flex; gap: 2px; }
.hc-setas button {
  all: unset; touch-action: manipulation; /* `all: unset` zera o touch-action e devolve a espera do duplo-toque */ cursor: pointer; width: 32px; height: 28px; display: grid; place-items: center;
  font: 400 15px/1 var(--font); color: rgba(252, 251, 249, .6); transition: color .2s, transform .25s;
}
.hc-setas button:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; color: rgb(252, 251, 249); }
@media (hover: hover) and (pointer: fine) {
  .hc-ant:hover { color: rgb(252, 251, 249); transform: translateX(-3px); }
  .hc-prox:hover { color: rgb(252, 251, 249); transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) { .hc-fio b { animation: none; } }
.hc-setas button::before, .hc-setas button::after { content: none !important; display: none !important; }
/* Render: abre só com o modelo; arrastar revela o render. A alça fica
   visível na borda e o rótulo "Render" só aparece quando o render aparece. */
.compare.modelo-primeiro .c-handle { left: min(var(--pos), calc(100% - 22px)); }
.compare.modelo-primeiro .c-draw { object-fit: cover; }
/* a alça não segura o clique: quem pega nela arrasta o campo de baixo */
.compare .c-handle, .compare .c-lab { pointer-events: none; }
.compare.modelo-primeiro:not(.aberto) .c-lab.r { opacity: 0; }
.compare.modelo-primeiro .c-lab { transition: opacity .3s; }
/* Pacotes: cartões só com o pacote; um único "Pedir orçamento" abaixo da nota.
   O pacote de projeto e o executivo completo ocupam duas colunas. */
.pkg-ask { align-self: flex-start; margin-top: 4px; }
/* o único "Pedir orçamento" se destaca pela cor terracota e pelo fio cheio, sem caixa */
.pkg-ask { font-size: 13px; letter-spacing: .16em; min-height: 48px; }
.pkg-ask::before { opacity: .9; }
.pkg footer, .pkg-rec { display: none !important; }
/* seis cartões do mesmo tamanho; a seção respira embaixo como em cima,
   para os cartões não encostarem no fechamento escuro */
#packages { padding-bottom: var(--id-respiro); }
.pkg-hora {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px;
  margin: 36px 0 0; padding-top: 18px; border-top: 1px solid var(--id-filete);
  font-size: 14px; color: var(--soft);
}
.pkg-hora strong { font: 400 15px var(--font-display); color: rgb(var(--tinta)); letter-spacing: 0; }
/* ---------- Para escritórios (25/10/2026) ----------
   À direita do título, os programas como índice por tipo de trabalho. Embaixo,
   as etapas e a prancha viva, que ganha uma camada a cada etapa. */
.pitch-grid { align-items: end; }
/* índice dos programas: rótulo pequeno, programas grandes, o serviço embaixo */
.kit2 { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--id-filete); }
.kit2 > li { border-bottom: 1px solid var(--id-filete); }
.kit2 button, .k2-fixo { all: unset; touch-action: manipulation; /* `all: unset` zera o touch-action e devolve a espera do duplo-toque */ box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) auto;
  column-gap: 20px; row-gap: 4px; align-items: baseline; padding: 18px 0; }
.kit2 button { cursor: pointer; }
.k2-lab { grid-row: 1 / span 2; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--soft); padding-top: .45em; }
.k2-tools { font: 400 clamp(1.25rem, 2vw, 1.75rem)/1.15 var(--font-display); letter-spacing: -0.01em; color: rgb(var(--tinta)); transition: color .3s, transform .45s cubic-bezier(.16, 1, .3, 1); }
.k2-sub { grid-column: 2; font-size: 13.5px; color: var(--soft); transition: color .3s; }
.k2-seta { grid-row: 1; grid-column: 3; font-size: 16px; color: var(--soft); transition: color .3s, transform .45s cubic-bezier(.16, 1, .3, 1); }
.k2-langs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.k2-langs li small { font: 500 10.5px/1 var(--font); letter-spacing: .1em; color: var(--accent); margin-left: 6px; vertical-align: .35em; }
.k2-fixo .k2-tools { grid-column: 2 / -1; }
.k2-fixo { padding: 22px 0; }
.k2-fixo .k2-lab { grid-row: auto; }
.kit2 button:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .kit2 > li { transition: opacity .3s; }
  .kit2:has(button:hover) > li { opacity: .45; }
  .kit2 > li:has(button:hover) { opacity: 1; }
  .kit2 button:hover .k2-tools { color: var(--accent); transform: translateX(6px); }
  .kit2 button:hover .k2-seta { color: var(--accent); transform: translate(3px, -3px); }
}
@media (max-width: 480px) {
  .kit2 button, .k2-fixo { grid-template-columns: minmax(0, 1fr) auto; }
  .k2-lab { grid-row: auto; grid-column: 1 / -1; padding: 0 0 4px; }
  .k2-tools, .k2-sub, .k2-fixo .k2-tools { grid-column: 1; }
  .k2-seta { grid-row: 2; grid-column: 2; }
  .k2-fixo .k2-tools { grid-column: 1 / -1; }
}

.pitch-fluxo { margin-top: clamp(80px, 10vw, 140px); }
.pv-grade { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: clamp(32px, 5vw, 80px); align-items: center; margin-top: 28px; }
.fluxo { list-style: none; margin: 0; padding: 0 0 0 30px; position: relative; display: grid; gap: 30px; --fx: 0; }
.fx-fio { position: absolute; left: 4px; top: 8px; bottom: 8px; width: 1px; background: var(--id-filete); }
.fx-fio b { position: absolute; inset: 0; background: var(--accent); transform-origin: top; transform: scaleY(calc((var(--fx) + 1) / 4)); transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
.fluxo button { all: unset; touch-action: manipulation; /* `all: unset` zera o touch-action e devolve a espera do duplo-toque */ box-sizing: border-box; display: grid; gap: 6px; width: 100%; position: relative; cursor: pointer; }
.fluxo button::before { content: ""; position: absolute; left: -30px; top: 6px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--base); border: 1px solid rgba(var(--tinta), .35); transition: background .4s, border-color .4s, transform .4s; }
.fluxo button[aria-pressed="true"]::before, .fluxo button.feito::before { background: var(--accent); border-color: var(--accent); }
.fluxo button[aria-pressed="true"]::before { transform: scale(1.35); }
.fx-num { font-size: var(--id-rotulo); letter-spacing: var(--id-entre); color: var(--soft); transition: color .4s; }
.fluxo strong { font: 400 clamp(1.25rem, 1.8vw, 1.625rem)/1.15 var(--font-display); letter-spacing: -0.01em; color: var(--soft); transition: color .4s; }
.fx-txt { font-size: 0.9375rem; line-height: 1.55; color: var(--soft); max-width: 34ch; transition: color .4s; }
.fluxo button[aria-pressed="true"] .fx-num { color: var(--accent); }
.fluxo button[aria-pressed="true"] strong, .fluxo button[aria-pressed="true"] .fx-txt { color: rgb(var(--tinta)); }
.fluxo button:focus-visible { outline: 1px solid var(--accent); outline-offset: 6px; }

/* a prancha viva: a folha inteira ampliada, com a casa no meio do quadro */
.pv { margin: 0; }
.pv-palco { position: relative; aspect-ratio: 4 / 3; overflow: hidden; --pv-cor: rgb(var(--tinta)); }
/* sem fundo: só as linhas da planta, em terracota (01-floor-plan-linhas.webp, fundo transparente),
   sumindo nas bordas; as marcações de cada etapa vêm em preto */
.pv-folha img { -webkit-mask-image: linear-gradient(to right, transparent 26%, #000 31%, #000 66%, transparent 71%), linear-gradient(to bottom, transparent 37%, #000 42%, #000 81%, transparent 86%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 26%, #000 31%, #000 66%, transparent 71%), linear-gradient(to bottom, transparent 37%, #000 42%, #000 81%, transparent 86%); mask-composite: intersect; }
.pv-folha { position: absolute; width: 213%; left: -53%; top: -70.5%; aspect-ratio: 3600 / 2546; }
.pv-folha img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pv figcaption { margin-top: 12px; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--soft); }
.pv-c { position: absolute; opacity: 0; transition: opacity .6s, transform .6s cubic-bezier(.16, 1, .3, 1); font-style: normal; pointer-events: none; }
.pv-c i, .pv-c { font-family: var(--font); }
.pv-escopo { left: 32.5%; top: 42.5%; width: 32%; height: 37.5%; border: 1.5px dashed var(--pv-cor); }
.pv-escopo i { position: absolute; left: -1px; top: -26px; font: 500 10px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--papel)); background: var(--pv-cor); padding: 6px 8px; white-space: nowrap; font-style: normal; }
.pv-pino { width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--pv-cor); color: rgb(var(--papel)); display: grid; place-items: center; font: 500 11px/1 var(--font); transform: scale(.4); box-shadow: 0 0 0 5px rgba(var(--tinta), .1); }
.pv-selo { left: 48.5%; top: 61%; display: grid; gap: 6px; padding: 14px 20px; border: 2px solid var(--pv-cor); outline: 1px solid var(--pv-cor); outline-offset: 3px;
  background: rgba(var(--papel), .88); color: var(--pv-cor); text-align: center; transform: translate(-50%, -50%) rotate(-5deg) scale(1.25); }
.pv-selo b { font: 500 12px/1 var(--font); letter-spacing: .2em; text-transform: uppercase; }
.pv-selo small { font: 400 15px/1 var(--font-display); letter-spacing: 0; }
.pitch-fluxo[data-etapa="2"] .pv-selo { transform: translate(-50%, -50%) rotate(-5deg) !important; }
.pv-nuvem { border: 1.5px dashed var(--pv-cor); border-radius: 50%; transform: translate(-50%, -50%) scale(.7); }
.pitch-fluxo[data-etapa="3"] .pv-nuvem { transform: translate(-50%, -50%) !important; }
.pv-ok { width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 1.5px solid var(--pv-cor); background: rgb(var(--papel)); color: var(--pv-cor); display: grid; place-items: center; font: 600 11px/1 var(--font); transform: scale(.4); }
.pitch-fluxo[data-etapa="0"] .pv-escopo,
.pitch-fluxo[data-etapa="1"] .pv-escopo, .pitch-fluxo[data-etapa="1"] .pv-pino,
.pitch-fluxo[data-etapa="2"] .pv-selo,
.pitch-fluxo[data-etapa="3"] .pv-nuvem, .pitch-fluxo[data-etapa="3"] .pv-ok { opacity: 1; transform: none; }
.pitch-fluxo[data-etapa="1"] .pv-escopo { opacity: .35; }
.pitch-fluxo[data-etapa="1"] .pv-pino:nth-of-type(2) { transition-delay: .15s; }
.pitch-fluxo[data-etapa="1"] .pv-pino:nth-of-type(3) { transition-delay: .3s; }
.pitch-fluxo[data-etapa="3"] .pv-ok { transition-delay: .35s; }

@media (max-width: 900px) {
  .pitch-grid { align-items: start; }
  .pv-grade { grid-template-columns: 1fr; }
  .pv { order: -1; }
}
}
@media (prefers-reduced-motion: reduce) { .fx-fio b, .fluxo button::before, .fluxo strong, .fx-txt, .fx-num, .pv-c { transition: none; } }
/* "Ver este pacote" (e todo botão terracota): no hover, o atalho background do
   style.css antigo voltava o fio para "repeat" e ele enchia o botão de terracota,
   cobrindo o texto. O fio nunca se repete; no hover e no clique o texto fica preto. */

.btn, .btn:focus-visible, .btn:active { background-repeat: no-repeat !important; background-color: transparent !important; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background-repeat: no-repeat !important; background-color: transparent !important; }
}


.btn-terra:focus-visible, .btn-terra:active { color: rgb(var(--tinta)) !important; }
@media (hover: hover) and (pointer: fine) {
  .btn-terra:hover { color: rgb(var(--tinta)) !important; }
}


.btn-terra:focus-visible::after, .btn-terra:active::after { color: rgb(var(--tinta)) !important; }
@media (hover: hover) and (pointer: fine) {
  .btn-terra:hover::after { color: rgb(var(--tinta)) !important; }
}

/* no hover o rótulo cresce de leve, a partir da esquerda; no clique volta um pouco */
.btn { transform-origin: left center; transition: background-size var(--t-padrao, 700ms) var(--ease, cubic-bezier(.16, 1, .3, 1)), color .2s, transform .35s var(--ease, cubic-bezier(.16, 1, .3, 1)); }
@media (hover: hover) and (pointer: fine) { .btn:hover { transform: scale(1.05); } }
.btn:active { transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) { 
.btn, .btn:active { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: none; }
}
 }
.stage3d.filme{touch-action:pan-y}

/* 2026-10-26 — auditoria de UX/UI: alternativa ao e-mail embaixo do
   "Pedir orçamento", números dos filtros legíveis (4,5:1) e "Voltar ao topo" */
.alt-contato { margin: 14px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--soft); }
.alt-contato a { color: rgb(var(--tinta)); text-decoration: underline; text-decoration-color: rgba(var(--tinta), .3); text-underline-offset: .3em; }
.alt-copiar { all: unset; touch-action: manipulation; /* `all: unset` zera o touch-action e devolve a espera do duplo-toque */ cursor: pointer; margin-left: 6px; padding: 10px 2px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.alt-copiar:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .alt-copiar:hover { color: rgb(var(--tinta)); } .alt-contato a:hover { text-decoration-color: currentColor; } }
.alt-sep { margin: 0 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.shop-head-r .alt-contato { margin-top: 2px; }
.chip .n { opacity: 1; color: rgba(var(--tinta), .68); }
.fecho-rodape .fr-topo { color: inherit; text-decoration: none; padding-block: 12px; margin-block: -12px; }
@media (hover: hover) and (pointer: fine) { .fecho-rodape .fr-topo:hover { color: var(--off-white); } }
.fecho-rodape .fr-topo:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

/* ============================================================
   Pacotes — catálogo em campo escuro (2026-10-26, 4ª versão)
   ------------------------------------------------------------
   As versões anteriores foram: caixa de 1px (fraca), filete e ar
   (leve demais), superfície clara (certa, mas plana) e superfície
   clara com o 01 escuro ancorando. Agora os seis em quase-preto:
   o catálogo vira um bloco, e o bloco é o peso que faltava.

   Três consequências tratadas aqui:
   · o terracota puro dá 2,16:1 sobre o quase-preto. Em vez de
     abandonar o acento, ele é misturado com papel até passar —
     continua sendo terra, só que na versão que o escuro aguenta;
   · o vão fecha para 14px: o papel entre os cartões vira costura
     do bloco, não corredor entre seis objetos soltos;
   · o fio que eu tinha posto antes do catálogo sai. Com um bloco
     escuro embaixo, a própria borda dele já é o fio.
   ============================================================ */
.pkgs {
  align-items: stretch;
  column-gap: 14px;
  row-gap: 14px;
  counter-reset: pkg;
}

.pkg {
  position: relative;
  isolation: isolate;          /* para o véu do hover ficar sob o texto */
  counter-increment: pkg;
  background-color: rgb(var(--tinta));
  /* uma fonte de luz só, de cima. Vinheta nas quatro bordas seria
     volume falso; luz rasante é o que a página já faz nas pranchas */
  background-image: linear-gradient(180deg, rgba(var(--papel), .08), rgba(var(--papel), 0) 44%);
  color: rgb(var(--papel));
  border: 0;
  padding: clamp(28px, 2.4vw, 36px);
  transition: background-color 200ms cubic-bezier(.16, 1, .3, 1);
}

/* O índice. A página inteira numera — as seções (02), as etapas, as
   pranchas (A-01) — e os pacotes não numeravam, por isso a grade não
   tinha por onde começar. É catálogo, não ranking: a ordem é a do
   data.js e nenhum pacote vale mais que o outro. */
.pkg header::before {
  content: counter(pkg, decimal-leading-zero);
  display: block; margin: 0 0 16px;
  font: 600 12px/1 var(--font); letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  color: rgba(var(--papel), .72);                               /* reserva */
  color: color-mix(in srgb, rgb(var(--terra)) 58%, rgb(var(--papel)));
}

/* três tamanhos, três papéis */
.pkg header h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(22px, 1.72vw, 27px);
  line-height: 1.12; letter-spacing: -.02em;
  text-wrap: balance;
}
.pkg header p {
  margin: 10px 0 0; max-width: 34ch;
  font-size: 14px; line-height: 1.55;
  color: rgba(var(--papel), .72);
  text-wrap: pretty;           /* "obra." e "SketchUp." caíam sozinhos */
  /* o subtítulo reserva duas linhas tenha uma ou duas, para o fio
     interno atravessar a fileira no mesmo lugar em todos */
  min-height: calc(2 * 1.55 * 14px);
}

/* um fio por dentro: em cima o que o pacote é, embaixo o que entrega */
.pkg ul {
  margin: 26px 0 0; padding-top: 26px;
  border-top: 1px solid rgba(var(--papel), .2);
  gap: 11px; font-size: 14px; line-height: 1.55;
}
.pkg li { padding-left: 20px; }
.pkg li::before { top: .72em; width: 9px; height: 1px; background: rgb(var(--papel)); opacity: .42; }

/* O hover aprofunda: o cartão vai de #262626 para ~#181818. A 1ª
   tentativa clareava com véu de papel e dava cinza lavado — e, além
   de feio, ia na direção errada: escurecer SOBE o contraste de tudo
   que está escrito em cima (título 14,6 → 17,0; subtítulo 8,3 → 9,3;
   índice 5,4 → 6,7). Quem passa o mouse enxerga melhor, não pior.
   Preto puro aqui é sombra, não cor — a exceção que a regra 2 do
   DIRECAO abre, e por isso está comentada.
   O véu entra na opacidade: fica fora do layout e é barato de animar.
   Nada levanta — o cartão não é clicável desde que o botão por cartão
   saiu (25/10) — e só onde existe ponteiro de verdade (no toque o
   :hover gruda depois do tap). */
.pkg::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(0, 0, 0, .38); opacity: 0;
  transition: opacity 200ms cubic-bezier(.16, 1, .3, 1);
}
@media (hover: hover) and (pointer: fine) {
  .pkg:hover { transform: none; box-shadow: none; }
  .pkg:hover::after { opacity: 1; }
}

/* "ver este pacote" piscava um anel de 3px em volta da caixa antiga;
   agora quem pisca é o véu, no acento */
.pkg.flash { animation: none; }
.pkg.flash::after { opacity: 1; background: rgba(var(--terra), .38); }
@media (prefers-reduced-motion: reduce) { .pkg.flash::after { transition: none; } }

/* ---- o cabeçalho é só o título ----
   A nota e a chamada desceram para o fecho (HTML, 2026-10-26), então
   não há mais coluna 2/3 para ocupar. Um título grande com ar à
   direita é abertura; era o conteúdo encalhado ali que fazia o vazio
   de 738px parecer buraco. */
#packages .section-head { display: block; margin-bottom: 44px; }

/* ---- o fecho da seção ----
   Na mesma grade dos cartões: as duas condições ocupam as colunas 1 e
   2, a chamada cai na 3. Nota e hora técnica são da mesma espécie —
   o que vale para a lista inteira — e agora moram juntas. A chamada
   vem depois do catálogo, que é a ordem em que se decide: primeiro
   ver o que tem, depois pedir. */
.pkg-fecho {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 14px;
  align-items: start;
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid rgba(var(--tinta), .16);
}
/* As duas condições deixam de empilhar e vão lado a lado, cada uma na
   coluna de um cartão, nas mesmas colunas dos cartões acima.
   O "Pedir orçamento" saiu daqui em 2026-10-26: o fecho escuro logo
   abaixo já tem o mesmo botão, com headline, e-mail, WhatsApp e
   LinkedIn ao lado. Dois pedidos iguais a 150px um do outro, e o de
   baixo fazendo o trabalho melhor — este não tinha função própria.
   A seção termina nas condições; o ar da terceira coluna é margem. */
.pkg-condicoes {
  grid-column: 1 / 3;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 14px; align-items: start;
}

/* as duas condições leem igual: é a mesma espécie de informação */
.pkg-fecho .pkg-note,
.pkg-fecho .pkg-hora {
  margin: 0; padding: 0; border: 0;
  font-size: 14px; line-height: 1.6; color: rgba(var(--tinta), .68);
  max-width: 46ch; text-wrap: pretty;
}
/* "Hora técnica" é rótulo e o resto é a explicação: o espaço entre os
   dois vinha do gap do flex original, e com display:block eles grudavam */
.pkg-fecho .pkg-hora { display: grid; gap: 2px; }
.pkg-fecho .pkg-hora strong { display: block; }
.pkg-fecho .pkg-hora strong { color: rgb(var(--tinta)); font-weight: 500; }

@media (max-width: 1000px) {
  .pkg-fecho { grid-template-columns: 1fr; row-gap: 24px; }
  .pkg-condicoes { grid-column: 1; grid-template-columns: 1fr; row-gap: 18px; }
}

/* O respiro de baixo da seção existia porque os cartões eram claros e
   encostavam no fecho escuro (25/10). Com o bloco escuro, a borda dele
   resolve a passagem. */
#packages { padding-bottom: clamp(64px, 6vw, 92px); }

/* ------------------------------------------------------------
   Respiro embaixo de quem pinta o próprio campo (2026-10-26)
   O `.section` do identidade.css dá `padding: respiro margem 0`:
   folga em cima e nenhuma embaixo, contando com o topo da seção
   seguinte para separar. Isso vale enquanto as duas dividem o
   mesmo fundo. A faixa "O que você precisa" pinta o papel-quente,
   e aí o conteúdo dela terminava exatamente na troca de cor — as
   últimas pranchas encostadas na linha de divisão.
   Quem pinta o próprio campo fecha o próprio campo.
   ------------------------------------------------------------ */
.needs-band > .wrap { padding-bottom: var(--id-respiro); }

/* ------------------------------------------------------------
   Barra do topo — alinhamento e faixa (2026-10-26)
   ------------------------------------------------------------ */

/* 1. A marca estava em x=64 e todo o conteúdo da página em x=72: a
      barra usava 64px fixos em vez da margem do site. Oito pixels —
      pouco para se apontar, bastante para o logo não bater com o
      título do banner, com os cartões nem com os títulos de seção. */
/* o seletor acompanha o do identidade.css (`.bar, .bar.on-dark`): com
   só `.bar` a regra de lá, mais específica, ganhava sempre que a barra
   estivesse em modo escuro */
.bar, .bar.on-dark { padding-inline: var(--id-margem); }

/* 2. A faixa atrás da barra tem 195px e ficava opaca só até 107px —
      mas a barra termina em 131px. Os 24px de baixo do cabeçalho
      sentavam em cima do degradê, e era isso que borrava. Agora o
      campo cheio passa da barra e só então começa a sumir, num
      trecho mais curto: borda mais limpa, menos mancha. */
.bar::before {
  background: linear-gradient(180deg,
    rgba(var(--bar-fundo, var(--papel)), .94) 0%,
    rgba(var(--bar-fundo, var(--papel)), .94) calc(100% - 56px),
    rgba(var(--bar-fundo, var(--papel)), 0) 100%);
}

/* ------------------------------------------------------------
   Auditoria WCAG de 2026-10-26
   ------------------------------------------------------------ */

/* 2.2.2 — o topo troca de projeto sozinho a cada poucos segundos e não
   tinha como travar. O botão fica junto das setas, com aria-pressed, e
   a decisão de quem clica sobrevive ao ponteiro sair de cima. */
.hc-pausa { order: -1; }
.hc-pausa svg { width: 13px; height: 13px; display: block; }
.hc-pausa .ic-toca { display: none; }
.hc-pausa[aria-pressed="true"] .ic-pausa { display: none; }
.hc-pausa[aria-pressed="true"] .ic-toca { display: block; }
@media (hover: hover) and (pointer: fine) {
  .hc-pausa:hover { color: rgb(var(--papel)); transform: none; }
}

/* 2.5.8 — alvo mínimo de 24×24. O nome do projeto no topo tinha 23px de
   altura e os links do rodapé, 19. A área cresce por dentro; o texto não
   sai do lugar. */
.hero-proj { display: inline-flex; align-items: center; min-height: 24px; }
.fecho-dados a,
.fecho-menu a,
.fc-icones a,
.fr-links a { display: inline-flex; align-items: center; min-height: 24px; }
.alt-contato a { padding-block: 12px; margin-block: -12px; }

/* ============================================================
   Celular: tirar o que denuncia "site" (2026-10-26)
   O css/style.css do site já tem esta base; a técnica não tinha.
   ============================================================ */

/* O realce cinza que o iOS e o Android pintam em cima de tudo que é
   tocável é o sinal mais alto de "isto é uma página". Sai — e todo
   tocável ganha :active próprio logo abaixo, que é o que substitui. */
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;   /* sem texto inflando com o aparelho deitado */
}

/* touch-action: manipulation diz ao navegador que este alvo nunca dá
   zoom de duplo-toque, então o clique dispara na hora em vez de esperar
   os ~300ms do segundo toque. E rótulo de controle não é texto para
   copiar: o toque longo deixa de selecionar e de abrir o balão. */
button, a[href], [role="button"], summary, .chip, .hn, .svc, .sheet, .thumb {
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
/* texto é conteúdo: continua selecionável */
p, li, h1, h2, h3, dd, dt, .pkg ul, .prow-sum, .alt-contato {
  -webkit-user-select: text; user-select: text;
}

/* O toque responde quando o dedo encosta, não quando sai. Sem isto a
   interface parece atrasada mesmo com 0ms de espera. */
.btn:active, .chip:active, .hn:active, .svc:active,
.sheet:active, .thumb:active, .v-btn:active, .hc-setas button:active {
  transform: scale(.97);
}
@media (prefers-reduced-motion: reduce) {
  .btn:active, .chip:active, .hn:active, .svc:active,
  .sheet:active, .thumb:active, .v-btn:active, .hc-setas button:active { transform: none; }
}

/* iOS dá zoom ao focar campo com fonte abaixo de 16px, e não volta ao
   sair. Os campos do pedido tinham 14. Só onde o ponteiro é grosso,
   para o desenho do computador ficar como está. */
@media (pointer: coarse) {
  input, select, textarea,
  .qform input, .qform textarea, .other-in, .ctl select { font-size: 16px; }
}

/* A tira de miniaturas do visor rola na horizontal: o quique dela fica,
   a página atrás não se mexe. */
.v-strip { overscroll-behavior-x: contain; }