/* RD Custom Work — conceito "acabamento": grafite, freijó e marfim; o metal flake é a assinatura.
   Revelações nativas (animation-timeline: view()) e tudo parado com prefers-reduced-motion. */
@font-face { font-family: "Bricolage Grotesque"; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; src: url(/fontes/bricolage-grotesque.woff2) format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 400 600; font-display: swap; src: url(/fontes/geist-mono.woff2) format("woff2"); }

:root {
  --ink: #111212;
  --carvao: #18191A;
  --grafite: #222324;
  --marfim: #ECE8E0;
  --papel: #F6F3EE;
  --freijo: #6E4529;
  --vermelho: #B5372A;
  --aco: #9EA2A6;
  --txt2: #57544E;
  --linha-c: rgba(17, 18, 18, .14);
  --linha-d: rgba(236, 232, 224, .14);
  --f: "Bricolage Grotesque", system-ui, -apple-system, sans-serif;
  --m: "Geist Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --gutter: 16px;
  --max: 82rem;
  interpolate-size: allow-keywords;
}
@media (min-width: 700px) { :root { --gutter: 32px; } }
@media (min-width: 1200px) { :root { --gutter: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 40px; font-size: clamp(100%, .3vw + .65rem, 130%); }
body { margin: 0; background: var(--marfim); color: var(--ink); font: 400 1rem/1.6 var(--f); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a[href^="tel:"] { white-space: nowrap; }
h1, h2, h3 { margin: 0; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 3px; }
::selection { background: var(--vermelho); color: var(--marfim); }
.in { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pular { position: absolute; left: 8px; top: -60px; z-index: 120; background: var(--marfim); color: var(--ink); padding: 10px 14px; font-weight: 600; border-radius: 6px; }
.pular:focus { top: 8px; }

/* tipografia */
.tit { font: 700 clamp(2.3rem, 5.2vw, 4.8rem)/.96 var(--f); font-stretch: 86%; letter-spacing: -.02em; text-wrap: balance; }
.tit i { font-style: normal; font-weight: 300; color: var(--freijo); }
.escuro .tit i, .grafite .tit i, .hero .tit i, .abre .tit i, .cta .tit i { color: var(--aco); }
.rot { font: 500 .72rem/1.4 var(--m); text-transform: uppercase; letter-spacing: .14em; color: var(--freijo); margin: 0 0 1rem; }
.escuro .rot, .grafite .rot, .hero .rot, .abre .rot { color: var(--aco); }
.lede { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.55; color: var(--txt2); max-width: 58ch; margin-top: 1.3rem; }
.escuro .lede, .grafite .lede, .hero .lede, .abre .lede { color: #C9C5BD; }
.nota { font-size: .875rem; color: var(--txt2); max-width: 70ch; }

/* superfícies */
.sec { padding-block: clamp(84px, 11vw, 160px); }
.claro { background: var(--marfim); }
.escuro { background: var(--ink); color: var(--marfim); }
.grafite { background: var(--grafite); color: var(--marfim); }
.borda { border-top: 1px solid var(--linha-c); }
.cab { max-width: 54rem; margin-bottom: clamp(40px, 5vw, 72px); }
.mais-link { margin: clamp(32px, 4vw, 48px) 0 0; }

/* botões: pílula com a seta num círculo que gira */
.btn {
  display: inline-flex; align-items: center; gap: 14px; min-height: 52px; padding: 6px 6px 6px 22px; border-radius: 999px;
  font: 600 .95rem/1.2 var(--f); text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background-color .35s, color .35s, border-color .35s;
}
.btn .seta { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 1.05rem; transition: transform .5s var(--ease), background-color .35s; }
.btn:hover .seta, .btn:focus-visible .seta { transform: rotate(-45deg); }
.btn-claro { background: var(--marfim); color: var(--ink); }
.btn-claro .seta { background: var(--ink); color: var(--marfim); }
.btn-claro:hover { background: #fff; }
.btn-cheio { background: var(--ink); color: var(--marfim); }
.btn-cheio .seta { background: var(--vermelho); color: var(--marfim); }
.btn-cheio:hover { background: #000; }
.btn-linha { border-color: currentColor; color: inherit; background: transparent; }
.btn-linha .seta { background: var(--marfim); color: var(--ink); }
.claro .btn-linha .seta { background: var(--ink); color: var(--marfim); }
.btn-linha:hover { background: rgba(236, 232, 224, .08); }
.claro .btn-linha:hover { background: rgba(17, 18, 18, .05); }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.link { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.link::after { content: " →"; display: inline-block; transition: transform .4s var(--ease); }
.link:hover::after { transform: translateX(4px); }

/* topo e doca */
.topo { position: absolute; inset: 0 0 auto; z-index: 30; display: flex; justify-content: space-between; align-items: center; padding: 18px var(--gutter); color: var(--marfim); max-width: calc(var(--max)); margin-inline: auto; }
.marca { display: inline-flex; align-items: baseline; gap: .4em; text-decoration: none; line-height: 1; }
.marca b { font: 800 1.7rem/1 var(--f); font-stretch: 78%; letter-spacing: -.04em; }
.marca span { font: 300 1.05rem/1 var(--f); letter-spacing: .01em; }
.topo-wa { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--linha-d); text-decoration: none; font-weight: 600; font-size: .9rem; background: rgba(17, 18, 18, .35); backdrop-filter: blur(10px); transition: background-color .3s, border-color .3s; }
.topo-wa i { width: 8px; height: 8px; border-radius: 50%; background: var(--vermelho); }
.topo-wa:hover { background: rgba(17, 18, 18, .7); border-color: rgba(236, 232, 224, .4); }
.doca {
  position: fixed; z-index: 60; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px; padding: 6px; border-radius: 999px; max-width: calc(100vw - 16px);
  background: rgba(17, 18, 18, .78); border: 1px solid var(--linha-d); box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
}
.doca a { padding: 10px 14px; border-radius: 999px; font: 500 .86rem/1 var(--f); color: #CFCAC0; text-decoration: none; white-space: nowrap; transition: background-color .3s, color .3s; }
.doca a:hover { color: var(--marfim); background: rgba(236, 232, 224, .08); }
.doca a[aria-current="page"] { background: var(--marfim); color: var(--ink); }
.doca .doca-rd { font-weight: 800; font-stretch: 78%; letter-spacing: -.03em; font-size: 1rem; }
@media (max-width: 559px) {
  .doca .doca-rd { display: none; }
  .doca a { padding: 10px 8px; font-size: .76rem; }
}

/* metal flake (canvas desenhado no app.js) */
.flake { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -1; background: #0d0e10; }

/* hero */
.hero { position: relative; isolation: isolate; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; background: var(--ink); color: var(--marfim); overflow: hidden; }
.hero::after, .abre::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, rgba(17, 18, 18, .88) 0%, rgba(17, 18, 18, .5) 48%, rgba(17, 18, 18, .05) 85%), linear-gradient(0deg, rgba(17, 18, 18, .85) 0%, transparent 38%); }
.hero-in { align-self: end; width: 100%; padding-top: 120px; }
.hero-tit { font-size: clamp(2.9rem, 7.2vw, 7.4rem); font-stretch: 84%; max-width: 13ch; letter-spacing: -.03em; }
.hero-pe { display: grid; gap: 28px; margin-top: 28px; align-items: end; }
.hero-pe .lede { margin: 0; }
@media (min-width: 960px) { .hero-pe { grid-template-columns: minmax(0, 1fr) auto; } }
.hero-base { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; padding-top: 44px; padding-bottom: 104px; }
.acab .rot { margin-bottom: 10px; }
.amostras { display: flex; flex-wrap: wrap; gap: 8px; }
.amostra { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 7px; border-radius: 999px; border: 1px solid var(--linha-d); background: rgba(17, 18, 18, .4); color: var(--marfim); font: 500 .85rem/1 var(--f); cursor: pointer; backdrop-filter: blur(8px); transition: border-color .3s, background-color .3s; }
.amostra i { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); }
.amostra-sparkle i { background: radial-gradient(circle at 30% 30%, #fff 0 1px, transparent 2px), radial-gradient(circle at 65% 60%, #dfe3ea 0 1px, transparent 2px), radial-gradient(circle at 45% 80%, #fff 0 .8px, transparent 1.6px), #0d0e10; }
.amostra-flake i { background: radial-gradient(circle at 35% 35%, #bcd6ff 0 1px, transparent 2px), radial-gradient(circle at 60% 65%, #7fb0ff 0 1px, transparent 2px), radial-gradient(circle at 50% 50%, #1f4fa3, #0b1a33); }
.amostra-ouro i { background: linear-gradient(135deg, #8a6424, #f0cf86 45%, #a9792c 60%, #5a3c12); }
.amostra:hover { border-color: rgba(236, 232, 224, .45); }
.amostra[aria-pressed="true"] { border-color: var(--marfim); background: rgba(236, 232, 224, .12); }
.acab-nota { margin: 10px 0 0; font-size: .85rem; color: #BDB8AF; min-height: 1.4em; }
.na-bancada { display: flex; align-items: center; gap: 14px; padding: 8px 18px 8px 8px; border-radius: 12px; border: 1px solid var(--linha-d); background: rgba(17, 18, 18, .55); backdrop-filter: blur(10px); text-decoration: none; transition: border-color .3s, transform .5s var(--ease); }
.na-bancada img { width: 60px; height: 80px; object-fit: cover; border-radius: 6px; }
.na-bancada > span { display: grid; gap: 2px; }
.na-bancada .rot { margin: 0; }
.na-bancada b { font: 700 1.2rem/1.1 var(--f); }
.na-bancada > span > span:last-child { font-size: .85rem; color: #BDB8AF; }
.na-bancada:hover { border-color: rgba(236, 232, 224, .5); transform: translateY(-3px); }
@media (max-width: 599px) { .na-bancada { display: none; } }

/* duas frentes: painéis que se expandem */
.frentes { display: flex; flex-direction: column; }
.frente { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: clamp(28px, 5vw, 64px) var(--gutter); color: var(--marfim); text-decoration: none; transition: flex-grow .9s var(--ease); flex: 1 1 0; min-width: 0; }
.frente-luth { background: var(--freijo); }
.frente-ped { background: var(--grafite); }
.frente .rot { color: rgba(236, 232, 224, .72); margin: 0; }
.frente-tit { font: 800 clamp(3rem, 8vw, 8rem)/.88 var(--f); font-stretch: 80%; letter-spacing: -.03em; }
.frente-txt { max-width: 32ch; color: rgba(236, 232, 224, .85); }
.frente-foto { width: min(62%, 260px); aspect-ratio: 4 / 5; overflow: hidden; border-radius: 6px; transform: rotate(-3deg); transition: transform .9s var(--ease); box-shadow: 0 24px 50px rgba(0, 0, 0, .35); margin-block: 10px; }
.frente-foto img { width: 100%; height: 100%; object-fit: cover; }
.frente-ped .frente-foto { transform: rotate(3deg); }
.frente-ir { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; margin-top: auto; }
.frente-ir .seta { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--marfim); color: var(--ink); transition: transform .5s var(--ease); }
.frente:hover .frente-ir .seta { transform: rotate(-45deg); }
@media (min-width: 900px) {
  .frentes { flex-direction: row; min-height: 88vh; }
  .frente { padding: clamp(40px, 5vw, 72px); }
  .frente-foto { position: absolute; right: clamp(28px, 4vw, 64px); bottom: clamp(28px, 4vw, 64px); width: clamp(160px, 16vw, 250px); margin: 0; }
  .frente-txt { max-width: 26ch; }
}
@media (min-width: 900px) and (hover: hover) {
  .frentes:hover .frente { flex-grow: .75; }
  .frentes .frente:hover { flex-grow: 1.35; }
  .frente:hover .frente-foto { transform: rotate(0) scale(1.06); }
}

/* bento de serviços com micro-ilustrações */
.bento { display: grid; gap: 12px; }
@media (min-width: 640px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) {
  .bento { grid-template-columns: repeat(4, 1fr); }
  .tile-cordas, .tile-acabamento { grid-column: span 2; }
}
.tile { display: flex; flex-direction: column; gap: 20px; padding: 14px; border-radius: 10px; background: var(--papel); border: 1px solid var(--linha-c); transition: border-color .3s, transform .6s var(--ease); }
.tile:hover { border-color: var(--ink); transform: translateY(-4px); }
.tile-ilu { position: relative; isolation: isolate; height: 150px; border-radius: 7px; background: var(--ink); color: var(--marfim); overflow: hidden; display: grid; place-items: center; }
.tile-txt { padding: 0 8px 10px; }
.tile-txt .rot { margin-bottom: .6rem; }
.tile h3 { font: 700 1.55rem/1.05 var(--f); font-stretch: 86%; letter-spacing: -.02em; margin-bottom: .5rem; }
.tile p { color: var(--txt2); margin: 0; font-size: .97rem; }
.ilu { width: 100%; height: 100%; }
svg.ilu { padding: 8px 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
svg.ilu text { fill: var(--aco); stroke: none; font: 500 11px var(--m); letter-spacing: .08em; }
.ilu-acab { position: absolute; inset: 0; }
.ilu-acab .flake { z-index: 0; }

.pestana { fill: #d8d2c4; stroke: none; }
.corda { stroke-width: 1.4; transform-box: fill-box; transform-origin: center; vector-effect: non-scaling-stroke; }
.regua { stroke: var(--aco); stroke-width: 1; }
.escala { fill: #3a281c; stroke: none; }
.traste { fill: #8d9196; stroke: none; }
.arco-fixo { stroke: var(--aco); stroke-width: 1.2; stroke-dasharray: 3 6; }
.arco { stroke: var(--marfim); stroke-width: 2.4; transform-box: fill-box; transform-origin: 50% 100%; }
.marcas { stroke: var(--aco); stroke-width: 1.4; }
.knob { fill: var(--grafite); stroke: var(--marfim); }
.ponteiro { transform-origin: 125px 64px; transform: rotate(-135deg); stroke: var(--vermelho); stroke-width: 3; }
.engrenagem { transform-origin: 125px 60px; }
.dentes { stroke-width: 7; stroke-dasharray: 4 3.1; stroke: #b9bcc0; }
.engrenagem circle:not(.dentes):not(.eixo) { fill: var(--grafite); stroke: #d8d2c4; }
.eixo { fill: var(--marfim); stroke: none; }
.corda-t { stroke: var(--marfim); stroke-width: 1.4; }

/* pilha de projetos: no desktop as fichas grudam e empilham */
.pilha { display: grid; gap: 20px; }
.cartao { display: grid; border-radius: 12px; overflow: hidden; background: var(--carvao); border: 1px solid var(--linha-d); color: var(--marfim); }
.grafite .cartao { background: #2b2c2d; }
.cartao-foto { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; background: var(--ink); }
.cartao-foto img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.cartao-txt { display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 3.5vw, 44px); }
.cartao-topo { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 8px; border-bottom: 1px solid var(--linha-d); }
.cartao-topo .rot { margin: 0; }
.cartao h3 { font: 700 clamp(2rem, 4vw, 3.6rem)/.96 var(--f); font-stretch: 84%; letter-spacing: -.025em; }
.cartao .ctx { font: 500 .8rem/1.5 var(--m); color: #d9b38c; margin: 0; }
.cartao p { color: #C9C5BD; max-width: 46ch; }
.tags { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { font: 500 .7rem/1 var(--m); text-transform: uppercase; letter-spacing: .08em; padding: 8px 10px; border-radius: 999px; background: rgba(236, 232, 224, .08); border: 1px solid var(--linha-d); }
@media (min-width: 900px) {
  .pilha { gap: 0; }
  .cartao {
    position: sticky; top: calc(28px + var(--k, 0) * 14px); height: min(78vh, 660px); margin-bottom: 9vh;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); transform-origin: 50% 0;
    transform: scale(calc(1 - var(--enc, 0) * .06)); filter: brightness(calc(1 - var(--enc, 0) * .55));
  }
  .cartao:last-child { margin-bottom: 0; }
  .cartao-foto img { aspect-ratio: auto; }
}

/* índice de pedais: linhas que abrem */
.indice { border-top: 1px solid var(--linha-d); }
.item { border-bottom: 1px solid var(--linha-d); }
.item summary {
  list-style: none; cursor: pointer; display: grid; align-items: center; gap: 4px 16px; padding: 22px 4px;
  grid-template-columns: 2.4rem minmax(0, 1fr) 34px; grid-template-areas: "n nome mais" ". linha mais" ". status mais";
  transition: padding .5s var(--ease), background-color .3s;
}
.item summary::-webkit-details-marker { display: none; }
.item .n { grid-area: n; font: 500 .78rem/1 var(--m); color: var(--aco); }
.item .nome { grid-area: nome; font: 700 clamp(1.6rem, 3.6vw, 3rem)/1 var(--f); font-stretch: 84%; letter-spacing: -.02em; }
.item .linha { grid-area: linha; color: #BDB8AF; font-size: .95rem; }
.item .status { grid-area: status; font: 500 .7rem/1 var(--m); letter-spacing: .1em; text-transform: uppercase; color: var(--aco); }
.item .mais { grid-area: mais; position: relative; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--linha-d); transition: transform .5s var(--ease), background-color .3s; }
.item .mais::before, .item .mais::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: currentColor; }
.item .mais::after { transform: rotate(90deg); }
.item summary:hover { padding-left: 16px; }
.item summary:hover .mais { background: var(--marfim); color: var(--ink); }
.item[open] .mais { transform: rotate(45deg); background: var(--marfim); color: var(--ink); }
.item::details-content { height: 0; overflow: clip; transition: height .6s var(--ease), content-visibility .6s allow-discrete; }
.item[open]::details-content { height: auto; }
.item-corpo { display: grid; gap: 22px; padding: 4px 4px 32px; }
.item[open] .item-corpo { animation: abre .7s var(--ease); }
.item-foto { position: relative; width: min(100%, 320px); aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--ink); }
.item-foto img { width: 100%; height: 100%; object-fit: cover; }
.item-txt p { color: #D3CFC7; max-width: 46ch; }
@media (min-width: 760px) {
  .item summary { grid-template-columns: 3rem minmax(0, 1.1fr) minmax(0, 1fr) 8.5rem 34px; grid-template-areas: "n nome linha status mais"; }
  .item-corpo { grid-template-columns: 3rem 320px minmax(0, 1fr); align-items: start; }
  .item-foto { grid-column: 2; }
}
.video { display: block; height: 100%; }
.play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: var(--vermelho); transition: transform .4s var(--ease); }
.play::after { content: ""; position: absolute; left: 26px; top: 20px; border-left: 18px solid var(--marfim); border-block: 12px solid transparent; }
.video:hover .play { transform: scale(1.1); }
.item-foto iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* mural de nomes */
.mural { font: 650 clamp(1.5rem, 3.4vw, 3.1rem)/1.2 var(--f); font-stretch: 86%; letter-spacing: -.018em; text-wrap: pretty; margin: 0 0 40px; }
.mural-item > span { font-weight: 300; color: #75706A; transition: color .4s; }
.mural-item:hover > span { color: var(--ink); }
.mural sup { font: 500 .3em/1 var(--m); letter-spacing: .1em; text-transform: uppercase; color: var(--freijo); margin-left: .35em; vertical-align: super; }
.mural .barra { color: var(--vermelho); font-weight: 200; }

/* processo */
.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 640px) { .passos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .passos { grid-template-columns: repeat(4, 1fr); } }
.passo { display: flex; flex-direction: column; gap: 10px; min-height: 260px; padding: 22px; border-radius: 10px; background: var(--papel); border: 1px solid var(--linha-c); }
.passo-n { font: 700 clamp(4.6rem, 9vw, 7.6rem)/.8 var(--f); font-stretch: 80%; letter-spacing: -.04em; color: var(--vermelho); margin-bottom: auto; }
.passo h3 { font: 700 1.4rem/1.1 var(--f); font-stretch: 86%; letter-spacing: -.02em; }
.passo p { margin: 0; color: var(--txt2); }

/* chamada final com a ficha */
.cta-grade { display: grid; gap: 56px; align-items: center; }
@media (min-width: 960px) { .cta-grade { grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr); } }
.cta .tit { font-size: clamp(2.4rem, 5.6vw, 5rem); margin-bottom: 36px; }
.ficha-mini, .ficha-papel {
  --furo: radial-gradient(circle 13px at 0 62%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 13px at 100% 62%, #0000 97%, #000) right / 51% 100% no-repeat;
  display: flex; flex-direction: column; gap: 16px; padding: 28px; border-radius: 12px; background: var(--papel); color: var(--ink); text-decoration: none;
  -webkit-mask: var(--furo); mask: var(--furo);
}
.ficha-mini { transform: rotate(2.5deg); transition: transform .8s var(--ease); max-width: 420px; justify-self: center; width: 100%; }
.ficha-mini:hover { transform: rotate(0) translateY(-6px); }
.ficha-mini-topo, .ficha-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 14px; border-bottom: 1.5px dashed var(--linha-c); }
.ficha-mini-topo b, .ficha-topo b { font: 700 1.35rem/1 var(--f); font-stretch: 84%; letter-spacing: -.02em; }
.ficha-mini-topo span, .ficha-topo span { font: 500 .75rem/1 var(--m); color: var(--txt2); }
.ficha-mini-linha { display: grid; gap: 8px; }
.ficha-mini-linha span { font: 500 .7rem/1 var(--m); text-transform: uppercase; letter-spacing: .1em; color: var(--txt2); }
.ficha-mini-linha i { display: block; height: 22px; border-bottom: 1px solid var(--linha-c); }
.ficha-mini-pe { padding-top: 14px; border-top: 1.5px dashed var(--linha-c); font: 500 .75rem/1 var(--m); text-transform: uppercase; letter-spacing: .1em; color: var(--vermelho); }

/* páginas internas */
.abre { position: relative; isolation: isolate; min-height: 74svh; display: flex; align-items: flex-end; padding: 130px 0 clamp(56px, 8vw, 96px); background: var(--ink); color: var(--marfim); overflow: hidden; }
.abre-in { width: 100%; }
.abre .tit { font-size: clamp(2.8rem, 7vw, 6.6rem); font-stretch: 84%; max-width: 15ch; letter-spacing: -.03em; }
.abre .acoes { margin-top: 30px; }
.grupos { display: grid; gap: 12px; }
@media (min-width: 760px) { .grupos { grid-template-columns: 1fr 1fr; } }
.grupo { padding: 26px; border-radius: 10px; background: var(--papel); border: 1px solid var(--linha-c); }
.grupo h3 { font: 700 1.6rem/1 var(--f); font-stretch: 84%; letter-spacing: -.02em; margin-bottom: 14px; }
.grupo ul { list-style: none; margin: 0; padding: 0; }
.grupo li { padding: 11px 0; border-top: 1px solid var(--linha-c); }
.sinal { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 640px) { .sinal { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .sinal { grid-template-columns: repeat(3, 1fr); } }
.sinal li { padding: 24px; border-radius: 10px; background: var(--papel); border: 1px solid var(--linha-c); }
.sinal h3 { font: 700 1.4rem/1.05 var(--f); font-stretch: 86%; margin-bottom: 8px; }
.sinal p { margin: 0; color: var(--txt2); }

/* sobre */
.sobre-grade { display: grid; gap: 24px 64px; }
.sobre-grade .cab { margin-bottom: 0; }
.sobre-grade .texto { max-width: 62ch; font-size: 1.08rem; }
@media (min-width: 900px) { .sobre-grade { grid-template-columns: 1fr 1fr; align-items: start; } }
.ficha { margin: 0; }
.ficha .linha { display: grid; grid-template-columns: minmax(130px, 40%) 1fr; gap: 12px; padding: 15px 0; border-top: 1px solid var(--linha-c); }
.ficha dt { font: 500 .72rem/1.8 var(--m); text-transform: uppercase; letter-spacing: .1em; color: var(--txt2); }
.ficha dd { margin: 0; font-weight: 500; }
.pendente { display: inline-block; font: 500 .7rem/1.3 var(--m); text-transform: uppercase; letter-spacing: .08em; color: var(--vermelho); border: 1px dashed var(--vermelho); padding: 5px 9px; border-radius: 999px; }

/* orçamento: formulário + ficha que se preenche ao vivo */
.orc-grade { display: grid; gap: 48px; }
@media (min-width: 960px) { .orc-grade { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 72px; align-items: start; } }
.orc { display: grid; gap: 26px; }
.orc fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.orc legend, .orc label { font: 500 .72rem/1.4 var(--m); text-transform: uppercase; letter-spacing: .1em; color: var(--txt2); }
.orc legend { margin-bottom: 12px; padding: 0; }
.orc label { display: grid; gap: 10px; }
.orc label.op { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--linha-c); font: 500 .95rem/1 var(--f); text-transform: none; letter-spacing: 0; color: var(--ink); cursor: pointer; transition: border-color .3s, background-color .3s; }
.orc label.op:has(input:checked) { border-color: var(--ink); background: var(--ink); color: var(--marfim); }
.orc input[type="radio"] { accent-color: var(--vermelho); width: 16px; height: 16px; margin: 0; }
.orc input[type="text"], .orc select, .orc textarea {
  font: 400 1.05rem/1.4 var(--f); /* ≥16px: o iOS não dá zoom no campo */
  color: var(--ink); background: transparent; border: 0; border-bottom: 1.5px solid rgba(17, 18, 18, .35); border-radius: 0; padding: 10px 0; width: 100%;
  text-transform: none; letter-spacing: 0; transition: border-color .3s;
}
.orc input[type="text"]:focus, .orc select:focus, .orc textarea:focus { outline: none; border-bottom-color: var(--vermelho); }
.orc textarea { resize: vertical; }
.orc .btn { justify-self: start; }
.orc .nota { margin: 0; }
.ficha-viva { display: grid; gap: 22px; }
@media (min-width: 960px) { .ficha-viva { position: sticky; top: 40px; } }
.ficha-papel { padding: 30px; box-shadow: 0 30px 60px rgba(17, 18, 18, .12); border: 1px solid var(--linha-c); transform: rotate(-1.2deg); }
.ficha-campo { display: grid; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--linha-c); }
.ficha-campo span { font: 500 .68rem/1 var(--m); text-transform: uppercase; letter-spacing: .1em; color: var(--txt2); }
.ficha-campo b { font: 600 1.2rem/1.3 var(--f); min-height: 1.3em; overflow-wrap: anywhere; border-radius: 4px; transition: background-color .6s; }
.ficha-campo b.muda { background: rgba(181, 55, 42, .14); transition: none; }
.ficha-desc b { font-weight: 400; font-size: 1rem; }
.ficha-pe { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 6px; font: 500 .7rem/1.2 var(--m); color: var(--txt2); }
.carimbo { padding: 6px 10px; border: 1.5px solid var(--vermelho); border-radius: 6px; color: var(--vermelho); text-transform: uppercase; letter-spacing: .1em; transform: rotate(-6deg) scale(.6); opacity: 0; transition: transform .5s var(--ease), opacity .3s; }
.ficha-viva.pronta .carimbo { transform: rotate(-6deg) scale(1); opacity: 1; }
.dicas { margin: 0; padding-left: 1.1em; color: var(--txt2); font-size: .95rem; }
.dicas li { margin-bottom: .5rem; }
.dicas li::marker { color: var(--vermelho); }

/* rodapé */
.rodape { background: var(--ink); color: #CFCAC0; padding: 72px 0 120px; }
.rod-grade { display: grid; gap: 36px; }
@media (min-width: 760px) { .rod-grade { grid-template-columns: 1.4fr 1fr 1fr; } }
.rodape nav, .rod-grade > div:last-child { display: grid; gap: 9px; align-content: start; }
.rodape a { text-decoration: none; }
.rodape a:hover { color: var(--marfim); text-decoration: underline; text-underline-offset: .25em; }
.rodape .marca { color: var(--marfim); margin-bottom: 14px; }
.rodape .rot { color: var(--aco); }
.rod-grade p { color: var(--aco); max-width: 30ch; }
.rodape .copy { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--linha-d); font: 400 .75rem/1.4 var(--m); color: var(--aco); }

/* ---------- motion ---------- */
@keyframes abre { from { opacity: 0; transform: translateY(-10px); } }
@keyframes foco { from { opacity: 0; filter: blur(14px); transform: translateY(24px) scale(.985); } }
@keyframes pesa { from { font-weight: 200; color: var(--aco); } }
@keyframes vibra { 0% { transform: scaleY(1); } 12% { transform: scaleY(-.85); } 24% { transform: scaleY(.66); } 36% { transform: scaleY(-.5); } 48% { transform: scaleY(.34); } 60% { transform: scaleY(-.2); } 74% { transform: scaleY(.1); } 88% { transform: scaleY(-.04); } 100% { transform: scaleY(.02); } }
@keyframes vibra2 { 0% { transform: scaleY(.02); } 10% { transform: scaleY(-.7); } 25% { transform: scaleY(.5); } 40% { transform: scaleY(-.32); } 60% { transform: scaleY(.16); } 80% { transform: scaleY(-.06); } 100% { transform: scaleY(.02); } }
@keyframes brilha { 0%, 100% { fill: #8d9196; } 45% { fill: #f6f3ea; } }
@keyframes brilha2 { 0%, 100% { fill: #8d9196; } 45% { fill: #f6f3ea; } }
@keyframes achata { to { transform: scaleY(.6); } }
@keyframes gira-pot { to { transform: rotate(95deg); } }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes escreve { from { transform: scaleX(0); } }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .foco { animation: foco linear both; animation-timeline: view(); animation-range: entry 0% entry 75%; }
    .passo-n { animation: pesa linear both; animation-timeline: view(); animation-range: entry 20% cover 50%; }
  }
  .tile.on .corda { animation: vibra 1.8s cubic-bezier(.3, .6, .4, 1) both; animation-delay: calc(var(--i) * 90ms); }
  .tile:not(.on) .corda { transform: scaleY(1); }
  .tile.on:hover .corda { animation: vibra2 1.3s cubic-bezier(.3, .6, .4, 1) both; animation-delay: calc(var(--i) * 60ms); }
  .tile.on .traste { animation: brilha 1.1s ease-in-out both; animation-delay: calc(var(--i) * 110ms + 200ms); }
  .tile.on:hover .traste { animation: brilha2 1.1s ease-in-out infinite; animation-delay: calc(var(--i) * 110ms); }
  .tile.on .arco { animation: achata 1.6s var(--ease) .3s both; }
  .tile.on .ponteiro { animation: gira-pot 1.6s var(--ease) .2s both; }
  .tile-eletrica:hover .ponteiro { transform: rotate(135deg); }
  .tile.on .engrenagem { animation: gira 1.6s var(--ease) .2s; }
  .tile-tarraxa:hover .engrenagem { animation: gira 3s linear infinite; }
  .ficha-mini-linha i { transform-origin: 0 50%; }
  .ficha-mini.on .ficha-mini-linha i { animation: escreve 1s var(--ease) both; }
  .ficha-mini.on .ficha-mini-linha:nth-of-type(3) i { animation-delay: .15s; }
  .ficha-mini.on .ficha-mini-linha:nth-of-type(4) i { animation-delay: .3s; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .corda { transform: scaleY(.02); }
}