/* Página de contato (/contato): apresentação + formulário único (todos os campos abertos) que envia para /api/contato (api/contato.js).
   Estados: default, foco, preenchido, erro, enviando, sucesso e falha (MOTION-SYSTEM.md · Formulário).
   Nada se desloca em hover ou pressão; o erro aparece sem tremer e fica parado para leitura. */
.cp { padding: calc(var(--header-h) + env(safe-area-inset-top) + 56px) max(var(--gutter), env(safe-area-inset-right)) 120px max(var(--gutter), env(safe-area-inset-left)); }
.cp__eyebrow, .cp__k, .cf__k { margin: 0; font: 500 12px/1.4 "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.cp__eyebrow { color: var(--copper-l); }
.cp__title { margin: 20px 0 0; font-weight: 700; font-size: clamp(46px, 10.4vw, 156px); line-height: .92; letter-spacing: -.055em; }
.cp__title .ln { display: block; overflow: hidden; padding-bottom: .07em; margin-bottom: -.07em; }
.cp__title .ln > span { display: inline-block; animation: cp-rise .9s var(--ease-out) both; }
.cp__title .ln:nth-child(2) > span { animation-delay: .07s; } .cp__title .ln:nth-child(3) > span { animation-delay: .14s; }
@keyframes cp-rise { from { transform: translateY(105%); } }
/* fundo (luz ambiente, desde 06/11): base escura em degradê no próprio <main> e duas luzes muito largas e fracas por trás
   do conteúdo, sem pontos, grade ou textura. Só no <main> (o footer e as outras páginas não mudam).
   - ::after, cobre no alto à direita: deriva devagar (34 s) e respira um pouco na opacidade.
   - ::before, azul-ardósia neutro à esquerda, mais abaixo: deriva em outro ritmo (27 s), para nunca andarem juntas nem
     com a luz da borda do cartão.
   Cada luz é um elemento do tamanho do próprio degradê (closest-side = mesmo desenho do fundo estático anterior) e só
   transform/opacity animam: nada de pintura nem layout por quadro. O pico de cada luz é o mesmo do fundo estático, então o
   contraste no pior momento não muda. overflow: clip corta a deriva nas bordas sem criar rolagem (o sticky continua).
   Tamanhos em px: a página é alta e uma porcentagem esticaria as luzes. Movimento reduzido: o mesmo desenho, parado. */
.cp { position: relative; isolation: isolate; overflow: clip; background: linear-gradient(180deg, #0e131a 0, var(--ink) 1400px); }
.cp::before, .cp::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.cp::after { left: calc(88% - 770px); top: -412px; width: 1540px; height: 1064px;
  background: radial-gradient(closest-side, rgb(222 156 107 / .075), rgb(222 156 107 / 0)); animation: cp-glow 34s ease-in-out infinite; }
.cp::before { left: calc(6% - 630px); top: calc(62% - 630px); width: 1260px; height: 1260px;
  background: radial-gradient(closest-side, rgb(110 140 180 / .05), rgb(110 140 180 / 0)); animation: cp-depth 27s ease-in-out infinite; }
/* deslocamentos em px (≈ 9–15% do tamanho de cada luz): translate em % depende da caixa e o Chrome não anima isso no compositor */
@keyframes cp-glow { 0%, 100% { transform: translate3d(0, 0, 0); opacity: 1; } 30% { transform: translate3d(-139px, 74px, 0); opacity: .86; }
  60% { transform: translate3d(-231px, 21px, 0); opacity: .95; } 80% { transform: translate3d(-77px, 106px, 0); opacity: .9; } }
@keyframes cp-depth { 0%, 100% { transform: translate3d(0, 0, 0); opacity: 1; } 40% { transform: translate3d(126px, -76px, 0); opacity: .8; }
  70% { transform: translate3d(63px, 88px, 0); opacity: .92; } }
@keyframes cp-glow-m { 0%, 100% { transform: translate3d(0, 0, 0); opacity: 1; } 30% { transform: translate3d(-66px, 41px, 0); opacity: .86; }
  60% { transform: translate3d(-109px, 12px, 0); opacity: .95; } 80% { transform: translate3d(-36px, 59px, 0); opacity: .9; } }
/* alinhamento: a primeira linha do texto da esquerda na mesma altura do título do cartão (40px de padding + 1px de borda) */
.cp__aside { padding-top: 41px; }
@keyframes cp-in { from { opacity: 0; transform: translateY(var(--shift-md)); } }

/* o formulário ficou mais alto: ele ganha mais largura e a coluna da esquerda acompanha a rolagem (sticky) quando cabe na tela */
.cp__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px 7%; align-items: start; margin-top: 88px; }
.cp__aside { animation: cp-in .8s .2s var(--ease-out) both; }
@media (min-width: 1024px) and (min-height: 840px) { .cp__aside { position: sticky; top: calc(var(--header-h) + 24px); } }
/* desktop (≥ 1280 px, desde 06/11): o cartão sobe para o lado do título, com o topo na altura do topo das letras do H1.
   O próprio <main> vira a grade e .cp__top/.cp__grid saem do caminho (display: contents), sem mudar o HTML nem a ordem
   de leitura. A coluna da esquerda tem a largura da linha mais longa do H1 (tamanho e quebras intactos); a coluna de
   texto não entra nessa conta (contain). O formulário fica com o resto, na altura natural; a sobra dele vai para a
   última linha da grade, então o texto da esquerda começa logo abaixo do título, como antes (88 + 41 px).
   O deslocamento do cartão: margem do H1 (20 px) + espaço acima das letras dentro da linha (.11 do corpo do título). */
@media (min-width: 1280px) {
  .cp { display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: clamp(56px, 5vw, 96px); align-items: start; }
  .cp__top, .cp__grid { display: contents; }
  .cp__eyebrow { grid-area: 1 / 1; }
  .cp__title { grid-area: 2 / 1; }
  .cp__aside { grid-area: 3 / 1; contain: inline-size; margin-top: 88px; }
  .cf { grid-area: 2 / 2 / 4 / 3; margin-top: calc(20px + clamp(46px, 10.4vw, 156px) * .11); }
}
.cp__lead { margin: 0; max-width: 24ch; font-size: clamp(22px, 2.3vw, 32px); font-weight: 600; line-height: 1.22; letter-spacing: -.02em; }
.cp__lead .dim { color: rgb(245 242 237 / .5); }
.cp__aside > .cp__k { margin-top: 64px; color: rgb(245 242 237 / .6); }
.cp__why { margin: 20px 0 0; padding: 0; list-style: none; border-top: 1px solid rgb(245 242 237 / .14); }
.cp__why li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 22px 0; border-bottom: 1px solid rgb(245 242 237 / .14); }
.cp__why .n { padding-top: 4px; color: var(--copper-l); font: 500 12px/1.4 "JetBrains Mono", monospace; letter-spacing: .08em; }
.cp__why h3 { margin: 0; font-size: 18px; line-height: 1.3; letter-spacing: -.01em; }
.cp__why p { margin: 6px 0 0; max-width: 46ch; color: rgb(245 242 237 / .7); font-size: 15px; line-height: 1.55; }
.cp__mail { display: grid; gap: 6px; margin: 40px 0 0; }
.cp__mail .cp__k { color: rgb(245 242 237 / .55); }
.cp__mail .mail { justify-self: start; font-size: 20px; font-weight: 600; text-decoration: underline; text-decoration-color: rgb(245 242 237 / .3); }

/* cartão do formulário */
.cf { position: relative; padding: 40px; border: 1px solid rgb(245 242 237 / .14); border-radius: 20px; background: rgb(16 21 28 / .92); container-type: inline-size; animation: cp-in .8s .3s var(--ease-out) both; }
/* contorno com luz (contato.js): anel do tamanho exato da borda, recortado por máscara; dentro dele um brilho redondo
   anda pelo perímetro só com transform. Sem suporte, sem JS ou com movimento reduzido: fica a borda neutra acima. */
.cf__beam { position: absolute; inset: -1px; z-index: 1; padding: 1px; border-radius: inherit; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 1.6s var(--ease-out);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.cf.has-beam .cf__beam { opacity: .9; }
.cf__beam i { position: absolute; left: 0; top: 0; width: 280px; height: 280px; margin: -140px 0 0 -140px; border-radius: 50%; will-change: transform;
  background: radial-gradient(closest-side, rgb(246 206 172 / .95), rgb(222 156 107 / .5) 42%, rgb(222 156 107 / 0)); }
.cf__title { margin: 0 0 32px; font-size: 28px; letter-spacing: -.03em; }
/* grupos: dados de contato, depois o projeto; separados por um fio, sem numeração */
.cf__group { display: grid; gap: 16px; min-width: 0; margin: 0; padding: 0; border: 0; }
.cf__group + .cf__group { margin-top: 40px; padding-top: 32px; border-top: 1px solid rgb(245 242 237 / .1); }
.cf__legend { float: left; width: 100%; margin: 0 0 8px; padding: 0; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.cf__legend + * { clear: both; }
.cf__row { display: grid; gap: 16px; }
@container (min-width: 560px) { .cf__row { grid-template-columns: 1fr 1fr; } }
.cf__q { float: left; width: 100%; margin: 8px 0 12px; padding: 0; color: var(--off); font-size: 16px; font-weight: 600; }
.cf__q .opt { display: block; margin-top: 2px; font-weight: 500; font-size: 14px; }
.cf__q + * { clear: both; }

/* campo com rótulo flutuante: o rótulo sobe quando há foco ou conteúdo; a borda muda de cor (sem mover o campo) */
.fld { position: relative; }
.fld input, .fld textarea { display: block; width: 100%; min-height: 60px; padding: 26px 16px 10px; border: 1px solid rgb(245 242 237 / .2); border-radius: 12px; background: rgb(245 242 237 / .04); color: var(--off); font: 500 16px/1.4 "Manrope", "Manrope Fallback", sans-serif; transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.fld textarea { min-height: 148px; resize: vertical; }
/* rótulo numa linha só: em tela estreita, os longos terminam em reticências e aparecem inteiros quando sobem (escala .74) */
.fld label { position: absolute; left: 17px; top: 19px; max-width: calc(100% - 34px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: rgb(245 242 237 / .62); font-size: 16px; pointer-events: none; transform-origin: 0 0; transition: transform var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.fld input:focus + label, .fld textarea:focus + label, .fld input:not(:placeholder-shown) + label, .fld textarea:not(:placeholder-shown) + label { transform: translateY(-11px) scale(.74); max-width: calc((100% - 24px) / .74); }
.fld input:focus, .fld textarea:focus { outline: none; border-color: var(--copper-l); background: rgb(245 242 237 / .07); box-shadow: 0 0 0 3px rgb(222 156 107 / .16); }
.fld input:focus + label, .fld textarea:focus + label { color: var(--copper-l); }
@media (hover: hover) and (pointer: fine) { .fld input:hover:not(:focus), .fld textarea:hover:not(:focus) { border-color: rgb(245 242 237 / .38); } }
.opt { color: rgb(245 242 237 / .6); }
.fld__h { margin: 6px 2px 0; color: rgb(245 242 237 / .55); font-size: 14px; line-height: 1.4; }
.fld__e { margin: 6px 2px 0; color: #f0a07a; font-size: 14px; line-height: 1.4; }
.fld__e:empty { display: none; }
.fld.is-bad input, .fld.is-bad textarea { border-color: #f0a07a; }
.fld.is-bad label { color: #f0a07a; }

/* opções em cápsula: o marcador (círculo/quadrado) vira visto sem mudar a largura da cápsula */
.chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.chips .fld__e { flex-basis: 100%; }
/* orçamento "Outro": campo do valor aparece abaixo das opções só quando "Outro" está marcado */
.fld--other { display: none; flex-basis: 100%; width: 100%; margin-top: 6px; }
.chips:has(input[value="outro"]:checked) .fld--other { display: block; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px 0 14px; border: 1px solid rgb(245 242 237 / .22); border-radius: 999px; color: rgb(245 242 237 / .86); font-size: 14px; line-height: 1.25; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.chip i { position: relative; flex: none; width: 14px; height: 14px; border: 1.5px solid currentColor; border-radius: 4px; opacity: .7; transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
.chips--radio .chip i { border-radius: 50%; }
.chip i::after { content: ""; position: absolute; left: 3.5px; top: 1px; width: 3.5px; height: 7px; border: solid var(--off); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg) scale(0); transition: transform var(--dur-base) var(--ease-out); }
.chip input:checked + span { background: var(--off); border-color: var(--off); color: var(--ink); }
.chip input:checked + span i { opacity: 1; background: var(--ink); border-color: var(--ink); }
.chip input:checked + span i::after { transform: rotate(45deg) scale(1); }
.chip input:focus-visible + span { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
@media (hover: hover) and (pointer: fine) { .chip input:not(:checked):hover + span { border-color: rgb(245 242 237 / .55); color: var(--off); } }
.chip input:active + span { background: rgb(245 242 237 / .12); transition-duration: var(--dur-press); }
.chip input:checked:active + span { background: rgb(245 242 237 / .86); }
.chips.is-bad .chip span { border-color: rgb(240 160 122 / .7); }

.cf__privacy { margin: 40px 0 16px; padding-top: 32px; border-top: 1px solid rgb(245 242 237 / .1); color: rgb(245 242 237 / .62); font-size: 14px; line-height: 1.5; }
.check { display: grid; grid-template-columns: 24px 1fr; gap: 4px 12px; align-items: start; color: rgb(245 242 237 / .82); font-size: 15px; line-height: 1.5; }
.check input { width: 24px; height: 24px; margin: 0; accent-color: var(--copper-l); }
.check a { color: var(--off); text-underline-offset: 3px; }
.check .fld__e { grid-column: 2; margin: 0; }
.cf__hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.cf__actions { display: flex; margin-top: 24px; }
.cf__status { margin: 16px 0 0; color: rgb(245 242 237 / .75); font-size: 14px; line-height: 1.45; }
.cf__status:empty { display: none; }
.cf__status.is-error { color: #f0a07a; }
.cf__status a { color: inherit; }
.cf__nojs { margin: 16px 0 0; color: rgb(245 242 237 / .75); font-size: 14px; }
.cf__nojs a { color: var(--off); }
/* enviando: botão inativo e a seta gira devagar no lugar (indicador de progresso; não muda o tamanho do botão) */
.cf.is-sending [type="submit"] { pointer-events: none; opacity: .72; }
.cf.is-sending [type="submit"] .btn__arrow svg:first-child { animation: cf-spin 900ms linear infinite; }
@keyframes cf-spin { to { transform: rotate(360deg); } }

/* sucesso: só depois da confirmação do servidor */
.cf__done { display: grid; justify-items: start; gap: 4px; padding: 8px 0; }
.cf__done[hidden] { display: none; }
.cf__done:focus { outline: none; }
.cf__done .cf__k { color: var(--copper-l); }
.cf__done h2 { margin: 12px 0 4px; font-size: clamp(34px, 4vw, 52px); line-height: 1; letter-spacing: -.045em; }
.cf__done p:not(.cf__k) { margin: 0 0 24px; max-width: 36ch; color: rgb(245 242 237 / .76); font-size: 17px; line-height: 1.55; }
.cf.is-done .cf__form { display: none; }
.cf.is-done .cf__done { animation: cp-in var(--dur-player) var(--ease-emph) both; }

@media (max-width: 1023px) {
  .cp__grid { grid-template-columns: 1fr; gap: 56px; margin-top: 56px; }
  .cp__aside { padding-top: 0; }
  .cp__lead { max-width: 30ch; }
}
@media (max-width: 899px), (max-height: 559px) {
  .cp { padding-top: calc(var(--header-h) + env(safe-area-inset-top) + 32px); padding-bottom: 88px; }
  .cp__title { font-size: clamp(44px, 14.4vw, 96px); }
  .cp__grid { grid-template-columns: 1fr; gap: 40px; margin-top: 32px; }
  .cp__lead { max-width: none; font-size: 21px; }
  .cp__aside { padding-top: 0; }
  .cp__aside > .cp__k { margin-top: 40px; }
  .cp__why li { grid-template-columns: 36px 1fr; padding: 18px 0; }
  .cf { margin: 0 calc(-1 * max(var(--gutter), env(safe-area-inset-left)) + 8px); padding: 28px 20px; border-radius: 16px; }
  .cf__title { margin-bottom: 24px; font-size: 24px; }
  .cf__group + .cf__group { margin-top: 32px; padding-top: 24px; }
  .cf__privacy { margin-top: 32px; padding-top: 24px; }
  .cf__actions .btn { flex: 1 1 auto; }
  .cf__actions .btn__inner { width: 100%; min-height: 56px; justify-content: space-between; }
  /* no celular a luz da borda é ainda mais discreta */
  .cf.has-beam .cf__beam { opacity: .6; }
  .cf__beam i { width: 200px; height: 200px; margin: -100px 0 0 -100px; }
  /* no celular as luzes são menores e mais fracas; só a cobre se move (a neutra fica parada na base, uma camada a menos) */
  .cp { background: radial-gradient(520px 640px at 0 55%, rgb(110 140 180 / .04), transparent 70%), linear-gradient(180deg, #0e131a 0, var(--ink) 900px); }
  .cp::before { content: none; }
  .cp::after { left: calc(92% - 364px); top: -234px; width: 728px; height: 588px; background: radial-gradient(closest-side, rgb(222 156 107 / .06), rgb(222 156 107 / 0)); animation-name: cp-glow-m; }
}
@media (max-width: 359px) { .cf { padding: 24px 16px; } .chip span { padding: 0 14px 0 12px; font-size: 14px; } }
@media (prefers-reduced-motion: reduce) {
  .cp__title .ln > span, .cp__aside, .cf, .cf.is-done .cf__done, .cp::before, .cp::after { animation: none; }
  .cf__beam { display: none; }
  .cf.is-sending [type="submit"] .btn__arrow svg:first-child { animation: none; }
}