/* Arqplace Recrutamento — mesma estrutura da referência, com a identidade da marca. */
:root {
  --bg: #f4f6fb;
  --ink: #0a1a30;
  --ink-soft: #6b7a94;
  --ink-faint: #a9b3c8;
  --brand: #143459;       /* azul oficial Arqplace */
  --accent: #2f6db5;      /* tom mais claro do azul da marca, para pontos de destaque */
  --accent-soft: #8db4e6;
  --navy: #0a1d3a;
  --navy-2: #0f2a52;
  --line: #dfe5f0;
  --card: #ffffff;
  --fundo-grad: linear-gradient(180deg, #f7f9fd 0%, #dde4f2 55%, #cdd7ec 100%);
  --raio: 32px;
  --sombra: 0 24px 60px -28px rgba(20, 52, 89, 0.35);
  --erro: #c2334a;
  --ease: cubic-bezier(0.22, 0.8, 0.24, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.45;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.trava { overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; }
input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- marca ---------- */
.logo, .marca {
  display: inline-block;
  background: currentColor;
  -webkit-mask: url('/assets/logo.png') no-repeat;
  mask: url('/assets/logo.png') no-repeat;
}
.logo { aspect-ratio: 1109 / 259; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: left center; mask-position: left center; }
.marca { aspect-ratio: 230 / 259; -webkit-mask-size: auto 100%; mask-size: auto 100%; -webkit-mask-position: left top; mask-position: left top; }

/* ---------- numerais em "arco" (o zero é um arco aberto) ---------- */
.num { font-weight: 200; letter-spacing: -0.04em; line-height: 0.9; display: inline-flex; align-items: flex-end; }
.arch {
  display: inline-block;
  width: 0.56em; height: 0.73em;
  border: 0.075em solid currentColor; border-bottom: 0;
  border-radius: 999px 999px 0 0;
  margin: 0 0.08em 0 0.04em;
}
.rotulo-num { display: flex; align-items: flex-end; gap: 18px; }
.rotulo-num .tit { font-size: clamp(22px, 2.4vw, 34px); line-height: 1; font-weight: 300; letter-spacing: -0.03em; padding-bottom: 6px; }
.rotulo-num .tit b { display: block; font-weight: 700; }

.fino { font-weight: 200; }
.negrito { font-weight: 800; letter-spacing: -0.05em; }
.suave { color: var(--ink-faint); }

/* ---------- cabeçalho em pílula ---------- */
.topo {
  position: fixed; z-index: 60; top: 14px; left: 28px; right: 28px; height: 76px;
  display: grid; grid-template-columns: 1fr minmax(260px, 700px) 1fr; align-items: center; gap: 16px;
  padding: 0 14px 0 26px;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-radius: 999px; box-shadow: 0 18px 44px -22px rgba(20, 52, 89, 0.4);
  transition: background 0.4s, color 0.4s;
}
.topo .logo { width: 118px; color: var(--brand); }
.topo .segs { display: flex; gap: 8px; }
.topo .seg { flex: 1; height: 3px; border-radius: 3px; background: #dfe3ec; overflow: hidden; }
.topo .seg i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brand), var(--accent)); transition: width 0.5s var(--ease); }
.topo .dir { display: flex; justify-content: flex-end; align-items: center; gap: 18px; }
.topo .pct { font-size: 14px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.topo .etiqueta { background: #eceff6; padding: 13px 22px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.topo.escuro { background: rgba(160, 172, 205, 0.55); }
.topo.escuro .logo { color: #fff; }
.topo.escuro .pct { color: rgba(255, 255, 255, 0.7); }
.topo.escuro .etiqueta { background: #fff; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--navy); color: #fff; font-weight: 600; letter-spacing: -0.02em;
  padding: 14px 16px 14px 30px; border-radius: 999px; font-size: 18px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s;
  box-shadow: 0 14px 30px -14px rgba(10, 29, 58, 0.7);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 20px 36px -16px rgba(10, 29, 58, 0.8); }
.btn .seta { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; }
.btn .seta svg { width: 18px; height: 18px; }
.btn.ok { padding: 18px 26px; font-size: 17px; gap: 12px; }
.btn.ok kbd { width: 26px; height: 26px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 7px; display: grid; place-items: center; font-size: 12px; }
.btn[disabled] { opacity: 0.55; pointer-events: none; }
.dica { font-size: 14px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; }
kbd.tecla { background: #fff; border-radius: 7px; padding: 4px 9px; font-size: 12px; font-family: inherit; color: var(--ink); box-shadow: 0 1px 2px rgba(20, 52, 89, 0.12); }
.link-sutil { font-size: 14px; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- painéis ---------- */
.painel {
  position: relative; margin: 8px; border-radius: var(--raio); overflow: hidden;
  min-height: calc(100vh - 16px); min-height: calc(100svh - 16px);
  padding: 130px clamp(22px, 5.2vw, 100px) 70px;
}
.painel.claro { background: var(--fundo-grad); }
.painel.branco { background: var(--bg); }
.painel.escuro { background: radial-gradient(120% 90% at 85% 0%, #1b3a73 0%, var(--navy) 55%, #071530 100%); color: #fff; }

/* ---------- capa ---------- */
.capa { display: grid; grid-template-rows: auto 1fr auto; padding-top: 110px; }
.capa .nome-gigante {
  text-align: center; font-weight: 800; letter-spacing: -0.07em; line-height: 0.82;
  font-size: clamp(64px, 15.5vw, 290px); text-transform: uppercase;
  background: linear-gradient(90deg, #4a5d86 0%, #8f9cc2 34%, #adb7d3 50%, #7482aa 72%, #3e4f78 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none;
}
.capa .palco { position: relative; display: grid; grid-template-columns: 1fr minmax(200px, 340px) 1fr; align-items: center; gap: 24px; padding: 24px 0; }
.capa .esq { font-size: clamp(34px, 4.4vw, 70px); line-height: 1; letter-spacing: -0.05em; }
.capa .esq .l1 { display: block; padding-left: 2.2em; font-weight: 200; }
.capa .esq .l2 { display: block; font-weight: 800; }
.capa .esq .l2 span { font-weight: 300; color: var(--ink-faint); }
.capa .dir-t { text-align: right; font-size: clamp(34px, 4.4vw, 70px); line-height: 1; letter-spacing: -0.05em; }
.capa .dir-t .l1 { display: block; font-weight: 200; }
.capa .dir-t .l2 { display: block; font-weight: 800; }
.capa .vidro {
  justify-self: center; position: relative; width: clamp(150px, 20vw, 300px); aspect-ratio: 1;
  display: grid; place-items: center;
}
.capa .vidro::before { content: ''; position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.75), rgba(255,255,255,0) 70%); }
.capa .vidro .marca {
  position: relative; height: 72%;
  color: transparent; background: linear-gradient(135deg, #ffffff 0%, #b9c3dd 35%, #6c7fae 62%, #e7ecf8 100%);
  filter: drop-shadow(0 22px 28px rgba(20, 52, 89, 0.35));
}
.bolha {
  position: absolute; display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.2; color: var(--ink);
}
.bolha i { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.7); display: grid; place-items: center; }
.bolha i::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.bolha.a { top: 4%; left: 62%; }
.bolha.b { bottom: 4%; right: 62%; flex-direction: row-reverse; text-align: right; }
.capa .rodape-capa { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 20px; }
.capa .stat { display: flex; flex-direction: column; gap: 10px; }
.capa .stat .big { font-size: clamp(36px, 4.5vw, 70px); font-weight: 600; letter-spacing: -0.05em; line-height: 1; display: flex; align-items: center; gap: 14px; }
.capa .stat .big .marca { height: 0.55em; color: var(--brand); }
.capa .stat small { font-size: 12px; color: var(--ink-soft); max-width: 300px; }
.capa .cta-centro { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.capa .vaga-aberta { text-align: right; font-size: 18px; line-height: 1.3; font-weight: 300; }
.capa .vaga-aberta b { display: block; font-weight: 500; }
.capa .linha-fim { display: flex; justify-content: space-between; font-size: 18px; font-weight: 300; margin-top: 34px; gap: 12px; }

/* ---------- 01 quem somos ---------- */
.quem { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 70px); align-items: start; }
.quem h2, .cultura h2 { font-size: clamp(32px, 4vw, 64px); font-weight: 300; letter-spacing: -0.055em; line-height: 1.02; margin: 34px 0 26px; }
.quem h2 em, .cultura h2 em { font-style: normal; font-weight: 700; color: var(--accent-soft); }
.cultura h2 em { color: var(--brand); }
.quem p { color: rgba(255, 255, 255, 0.72); font-size: 16px; max-width: 540px; margin-bottom: 14px; font-weight: 300; }
.metricas { margin-top: 28px; display: grid; grid-template-columns: repeat(3, auto); width: fit-content; max-width: 100%; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; background: rgba(255,255,255,.04); overflow: hidden; }
.metricas > div { padding: 22px 26px; border-right: 1px solid rgba(255,255,255,.12); }
.metricas > div:last-child { border: 0; }
.metricas b { display: block; font-size: clamp(22px, 2.4vw, 34px); font-weight: 400; letter-spacing: -0.05em; }
.metricas > div:first-child b { color: var(--accent-soft); }
.metricas small { font-size: 12px; color: rgba(255,255,255,.6); display: block; margin-top: 8px; max-width: 140px; }
.vitrine {
  position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 16 / 11; margin-top: 8px;
  background: radial-gradient(90% 90% at 25% 20%, #2a5aa3 0%, #143459 50%, #0a1d3a 100%);
  display: grid; place-items: center;
}
.vitrine .marca { height: 46%; color: rgba(255,255,255,.95); }
.vitrine::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 64px), repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 64px); }
.vitrine .legenda { position: absolute; left: 20px; bottom: 20px; right: 20px; width: fit-content; max-width: calc(100% - 40px); display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; font-size: 13px; background: rgba(10,29,58,.55); border: 1px solid rgba(255,255,255,.22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.vitrine .legenda::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-soft); flex: none; }

/* ---------- 02 a vaga ---------- */
.painel.vaga { padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; background: transparent; overflow: visible; }
.vaga .lado-crachas { position: relative; border-radius: var(--raio); overflow: hidden; background: radial-gradient(100% 80% at 30% 20%, #1f4789, var(--navy) 62%, #061226); min-height: 640px; margin-top: 8px; }
.vaga .lado-info { background: #fff; border-radius: var(--raio); margin-top: 8px; padding: 60px clamp(22px, 4vw, 70px); display: flex; flex-direction: column; justify-content: center; box-shadow: 0 0 0 1px var(--line); }
.lado-info .num { font-size: clamp(60px, 7vw, 112px); color: #dfe4f1; }
.lado-info h2 { font-size: clamp(34px, 4.6vw, 70px); font-weight: 300; letter-spacing: -0.06em; line-height: 1; margin: 18px 0 8px; }
.lado-info h2 b { font-weight: 800; }
.lado-info .area { color: var(--ink-soft); font-size: 15px; margin-bottom: 30px; }
.cartoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cartao { border-radius: 20px; padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 10px; min-height: 160px; }
.cartao .r { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; opacity: .75; }
.cartao .v { font-size: clamp(22px, 2.3vw, 32px); font-weight: 600; letter-spacing: -0.05em; line-height: 1.05; }
.cartao p { font-size: 13px; line-height: 1.35; opacity: .85; }
.cartao.escuro { background: var(--navy); color: #fff; }
.cartao.destaque { background: var(--brand); color: #fff; }
.cartao.claro { background: #eceff7; }
.lado-info .aviso { margin-top: 26px; font-size: 16px; max-width: 520px; color: var(--ink); }
.lado-info .aviso b { font-weight: 700; }

/* ---------- 03 cultura ---------- */
.cultura { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: center; }
.cultura p.texto { color: var(--ink-soft); font-size: 16px; max-width: 480px; font-weight: 300; }
.valores { list-style: none; margin-top: 26px; border-top: 1px solid var(--line); max-width: 600px; }
.valores li { display: grid; grid-template-columns: 52px 1fr; padding: 16px 0; border-bottom: 1px solid var(--line); }
.valores .n { font-size: 12px; color: var(--accent); padding-top: 4px; }
.valores b { display: block; font-size: 18px; font-weight: 500; letter-spacing: -0.03em; }
.valores span { display: block; font-size: 14px; color: var(--ink-soft); margin-top: 2px; }
.dispositivos { position: relative; min-height: 440px; }
.notebook { position: absolute; left: 0; right: 14%; top: 50%; transform: translateY(-50%) perspective(1400px) rotateY(-16deg) rotateX(4deg) rotateZ(-6deg); }
.notebook .ecra { background: #121a2b; border-radius: 14px 14px 4px 4px; padding: 10px; box-shadow: 0 40px 60px -30px rgba(10,29,58,.55); }
.notebook .ecra > div { background: var(--fundo-grad); border-radius: 6px; aspect-ratio: 16 / 10; padding: 6% 7%; position: relative; overflow: hidden; }
.notebook .base { height: 18px; background: linear-gradient(#dfe3ec, #b5bccd); border-radius: 0 0 22px 22px; margin: 0 -4%; box-shadow: 0 20px 30px -16px rgba(10,29,58,.5); }
.mini-q { position: absolute; left: 36%; top: 30%; right: 6%; }
.mini-q small { font-size: 8px; color: var(--ink-soft); }
.mini-q h4 { font-size: clamp(12px, 1.5vw, 20px); font-weight: 300; letter-spacing: -0.04em; margin: 4px 0 10px; }
.mini-q .fichas { display: flex; flex-wrap: wrap; gap: 5px; }
.mini-q .fichas span { font-size: 7px; padding: 4px 8px; border-radius: 99px; background: #fff; }
.mini-q .fichas span.on { background: var(--navy); color: #fff; }
.mini-n { position: absolute; left: 7%; top: 28%; font-size: clamp(26px, 3.4vw, 52px); }
.celular { position: absolute; right: 0; bottom: 0; width: 22%; min-width: 96px; aspect-ratio: 9 / 18; border-radius: 22px; background: #0a1226; padding: 5px; box-shadow: 0 30px 40px -20px rgba(10,29,58,.6); transform: rotate(4deg); }
.celular > div { height: 100%; border-radius: 18px; background: linear-gradient(180deg, #1d3566, #0f1d3d); padding: 22% 9% 8%; color: #fff; font-size: 9px; }
.celular b { display: block; font-size: 13px; line-height: 1; letter-spacing: -0.04em; margin-bottom: 8px; }
.celular svg { width: 100%; margin-top: 8px; }
.celular .barras span { display: block; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #2f6db5, #8db4e6); margin-top: 7px; }

/* ---------- 04 requisitos ---------- */
.requisitos .grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.bloco { position: relative; border-radius: 30px; padding: clamp(26px, 3vw, 44px); overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line); min-height: 320px; }
.bloco.tom { background: #eaedf6; box-shadow: none; }
.bloco.preto { background: var(--navy); color: #fff; box-shadow: none; display: flex; align-items: flex-end; }
.bloco h3 { font-size: clamp(26px, 2.8vw, 40px); font-weight: 300; letter-spacing: -0.05em; line-height: 1.1; margin-bottom: 26px; position: relative; display: inline-block; }
.bloco h3 b { font-weight: 800; }
.bloco h3 svg { position: absolute; left: -2%; bottom: -10px; width: 104%; height: 14px; color: var(--accent); overflow: visible; }
.bloco ul { list-style: none; display: grid; gap: 14px; position: relative; z-index: 1; }
.bloco li { display: grid; grid-template-columns: 22px 1fr; font-size: 15px; line-height: 1.4; }
.bloco li::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--navy); margin-top: 7px; }
.bloco li b { font-weight: 700; }
.bloco .fantasma { position: absolute; right: 8%; bottom: -0.3em; font-size: 150px; color: rgba(20, 52, 89, .07); pointer-events: none; }
.bloco.preto p { font-size: clamp(22px, 2.4vw, 34px); font-weight: 300; letter-spacing: -0.04em; line-height: 1.15; max-width: 420px; }
.bloco.preto .fantasma { color: rgba(255,255,255,.07); }

/* ---------- processo ---------- */
.processo h2 { font-size: clamp(52px, 11vw, 180px); line-height: .86; letter-spacing: -0.06em; font-weight: 200; text-transform: uppercase; }
.processo h2 b { display: block; font-weight: 800; padding-left: 0.5em; }
.etapas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 56px; }
.etapa { position: relative; background: #fff; border-radius: 28px; padding: 28px 24px 24px; min-height: 300px; overflow: hidden; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 0 0 1px var(--line); }
.etapa h4 { font-size: clamp(20px, 1.8vw, 26px); font-weight: 400; letter-spacing: -0.05em; line-height: 1.05; }
.etapa p { font-size: 14px; color: var(--ink-soft); }
.etapa .chip { margin-top: 4px; width: fit-content; background: #eceff6; padding: 8px 14px; border-radius: 99px; font-size: 12px; }
.etapa .fantasma { position: absolute; right: 6%; bottom: -0.28em; font-size: 130px; color: #c4cbe3; }
.etapa.dest { background: var(--navy); color: #fff; box-shadow: none; }
.etapa.dest p { color: rgba(255,255,255,.7); }
.etapa.dest .chip { background: var(--accent); color: #fff; }
.etapa.dest .fantasma { color: #5b73a6; }

/* ---------- fechamento ---------- */
.fecha { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
.fecha .txt { max-width: 560px; color: var(--ink-soft); font-size: 17px; font-weight: 300; }
.fecha .txt p { margin-bottom: 14px; }
.fecha h2 {
  font-size: clamp(54px, 11.5vw, 190px); line-height: .88; letter-spacing: -0.065em; font-weight: 200; text-transform: uppercase; margin: 26px 0 40px;
  background: linear-gradient(90deg, #3e4f78 0%, #8f9cc2 38%, #aab4d1 52%, #6a7aa3 78%, #3e4f78 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fecha h2 b { display: block; font-weight: 800; }
.rodape { padding: 20px 28px 36px; text-align: center; font-size: 13px; color: var(--ink-soft); }

/* ---------- lista de vagas ---------- */
.lista h1 { font-size: clamp(46px, 9vw, 150px); line-height: .88; letter-spacing: -0.065em; font-weight: 200; text-transform: uppercase; }
.lista h1 b { display: block; font-weight: 800; }
.lista .sub { color: var(--ink-soft); margin: 26px 0 40px; max-width: 520px; font-size: 18px; font-weight: 300; }
.vagas-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.vaga-card { background: #fff; border-radius: 28px; padding: 30px; display: flex; flex-direction: column; gap: 14px; text-decoration: none; box-shadow: 0 0 0 1px var(--line); transition: transform .3s var(--ease), box-shadow .3s; min-height: 280px; }
a.vaga-card:hover { transform: translateY(-4px); box-shadow: var(--sombra), 0 0 0 1px var(--line); }
.vaga-card .area { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.vaga-card h3 { font-size: 36px; font-weight: 300; letter-spacing: -0.06em; line-height: 1; }
.vaga-card h3 b { font-weight: 800; }
.vaga-card p { color: var(--ink-soft); font-size: 15px; flex: 1; }
.vaga-card .rod { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 600; }
.vaga-card.breve { opacity: .62; background: transparent; }
.tag-breve { background: #eceff6; padding: 6px 12px; border-radius: 99px; font-size: 12px; font-weight: 500; }

/* ---------- formulário em tela cheia ---------- */
.form-tela {
  position: fixed; inset: 8px; z-index: 50; border-radius: var(--raio); background: var(--fundo-grad); overflow: hidden;
  display: none; padding: 110px clamp(20px, 5vw, 100px) 40px;
}
.form-tela.ativo { display: block; animation: surge .5s var(--ease); }
@keyframes surge { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
.form-tela .marca-agua { position: absolute; right: -4%; bottom: -12%; height: 120%; color: rgba(20, 52, 89, .06); pointer-events: none; }
.tela { position: absolute; inset: 110px clamp(20px, 5vw, 100px) 40px; display: none; }
.tela.ativa { display: block; }
.tela.entra-baixo { animation: entraB .55s var(--ease); }
.tela.entra-cima { animation: entraC .55s var(--ease); }
@keyframes entraB { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: none; } }
@keyframes entraC { from { opacity: 0; transform: translateY(-46px); } to { opacity: 1; transform: none; } }

.abertura { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 30px; height: 100%; }
.abertura .meta { position: absolute; top: 14px; left: 0; right: 0; display: flex; justify-content: space-between; font-size: 16px; font-weight: 300; }
.abertura .gigante { font-size: clamp(150px, 27vw, 420px); color: var(--ink); }
.abertura h2 { font-size: clamp(54px, 7vw, 110px); line-height: .9; letter-spacing: -0.07em; font-weight: 200; }
.abertura h2 b { display: block; font-weight: 800; }
.abertura p { margin: 26px 0 36px; color: var(--ink-soft); font-size: clamp(16px, 1.7vw, 24px); font-weight: 300; max-width: 640px; }
.abertura .acoes { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

.pergunta { display: grid; grid-template-columns: minmax(180px, 28%) 1px minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); height: 100%; align-items: center; }
.pergunta .esq { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; padding: 10px 0; }
.pergunta .esq .num { font-size: clamp(90px, 9vw, 150px); color: var(--ink); }
.pergunta .esq .sub-tit { font-size: clamp(20px, 2vw, 30px); line-height: 1.02; letter-spacing: -0.05em; font-weight: 300; margin-top: 14px; }
.pergunta .esq .sub-tit b { display: block; font-weight: 700; }
.pergunta .cont { font-size: clamp(44px, 5vw, 76px); font-weight: 300; letter-spacing: -0.06em; line-height: 1; }
.pergunta .cont i { font-style: normal; color: #aab1cc; }
.pergunta .cont small { display: block; font-size: 15px; letter-spacing: -0.01em; color: var(--ink-soft); margin-top: 6px; }
.pergunta .divisor { align-self: stretch; background: #c5cde0; margin: 20px 0; }
.pergunta .corpo { max-width: 1020px; width: 100%; padding-right: 100px; }
.cod { font-size: 15px; color: var(--ink-soft); display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cod::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.pergunta h3 { font-size: clamp(30px, 4.4vw, 68px); font-weight: 300; letter-spacing: -0.06em; line-height: 1.04; }
.pergunta h3 .ast { color: var(--accent); font-weight: 400; margin-left: 10px; }
.pergunta .apoio { margin-top: 14px; font-size: clamp(15px, 1.4vw, 19px); color: var(--ink-soft); font-weight: 300; }
.campo { margin-top: 34px; }
.campo input, .campo textarea {
  width: 100%; background: transparent; border: 0; outline: 0; font-size: clamp(26px, 3.3vw, 52px); font-weight: 300; letter-spacing: -0.05em; padding: 10px 0 14px;
  border-bottom: 1px solid #1a2440; border-image: none; border-radius: 0; resize: none;
  background-image: linear-gradient(90deg, var(--brand), var(--accent)); background-size: 0 2px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .5s var(--ease);
}
.campo input:focus, .campo textarea:focus { background-size: 100% 2px; outline: 0; }
.campo input::placeholder, .campo textarea::placeholder { color: #aeb5d0; }
.campo textarea { font-size: clamp(20px, 2.2vw, 32px); min-height: 150px; line-height: 1.3; }
.contador { font-size: 13px; color: var(--ink-soft); text-align: right; margin-top: 6px; }
.fichas { display: flex; flex-wrap: wrap; gap: 12px; }
.ficha {
  display: inline-flex; align-items: center; gap: 12px; background: rgba(255,255,255,.7); border: 1px solid #c9d1e5; border-radius: 99px; padding: 14px 24px 14px 16px; font-size: clamp(16px, 1.6vw, 22px); letter-spacing: -0.03em;
  transition: all .25s var(--ease);
}
.ficha kbd { width: 26px; height: 26px; border-radius: 8px; background: #e4e9f5; font-size: 12px; font-family: inherit; display: grid; place-items: center; }
.ficha:hover { border-color: var(--brand); transform: translateY(-2px); }
.ficha.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.ficha.on kbd { background: var(--accent); color: #fff; }
.envio { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.zona-arquivo {
  width: 100%; border: 1.5px dashed #9aa6c7; border-radius: 24px; padding: 34px 26px; text-align: center; background: rgba(255,255,255,.55); cursor: pointer; transition: all .25s;
}
.zona-arquivo:hover, .zona-arquivo.sobre { border-color: var(--brand); background: rgba(255,255,255,.9); }
.zona-arquivo b { display: block; font-size: 20px; font-weight: 500; letter-spacing: -0.03em; }
.zona-arquivo span { font-size: 14px; color: var(--ink-soft); }
.zona-arquivo.cheia { border-style: solid; border-color: var(--brand); }
.acoes-p { display: flex; align-items: center; gap: 20px; margin-top: 34px; flex-wrap: wrap; }
.erro { color: var(--erro); font-size: 15px; min-height: 22px; margin-top: 12px; font-weight: 500; }

.nav-setas { position: absolute; right: 18px; bottom: 18px; display: flex; gap: 12px; z-index: 5; }
.nav-setas button { width: 68px; height: 68px; border-radius: 50%; background: rgba(255,255,255,.65); border: 1px solid #c3cbe0; display: grid; place-items: center; transition: all .2s; }
.nav-setas button:hover { background: #fff; transform: translateY(-2px); }
.nav-setas button[disabled] { opacity: .4; pointer-events: none; }
.nav-setas svg { width: 22px; height: 22px; }
.fechar { position: absolute; z-index: 5; left: 26px; bottom: 26px; font-size: 14px; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 4px; }

/* revisão e sucesso */
.revisao { height: 100%; overflow-y: auto; padding: 0 clamp(0px, 3vw, 40px) 100px 0; scrollbar-width: thin; }
.revisao h3 { font-size: clamp(34px, 5vw, 76px); font-weight: 200; letter-spacing: -0.06em; line-height: 1; }
.revisao h3 b { font-weight: 800; }
.resumo { margin: 28px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 1100px; }
.resumo div { background: rgba(255,255,255,.7); border-radius: 18px; padding: 16px 20px; }
.resumo dt { font-size: 12px; color: var(--ink-soft); }
.resumo dd { font-size: 17px; letter-spacing: -0.02em; margin-top: 4px; word-break: break-word; white-space: pre-wrap; }
.resumo .larga { grid-column: 1 / -1; }
.sucesso { height: 100%; display: flex; flex-direction: column; justify-content: center; max-width: 900px; }
.sucesso .check { width: 74px; height: 74px; border-radius: 50%; background: var(--navy); display: grid; place-items: center; margin-bottom: 28px; }
.sucesso .check svg { width: 34px; height: 34px; color: #fff; }
.sucesso h3 { font-size: clamp(42px, 6.5vw, 100px); font-weight: 200; letter-spacing: -0.065em; line-height: .95; }
.sucesso h3 b { font-weight: 800; display: block; }
.sucesso p { margin-top: 22px; font-size: clamp(16px, 1.6vw, 22px); color: var(--ink-soft); font-weight: 300; max-width: 640px; }
.sucesso .proto { display: inline-block; margin-top: 22px; background: #fff; padding: 10px 18px; border-radius: 99px; font-size: 14px; }
.sucesso .acoes { margin-top: 34px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }

/* ---------- responsivo ---------- */
@media (max-width: 1100px) {
  .etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etapa { min-height: 220px; }
}
@media (max-width: 900px) {
  .topo { left: 12px; right: 12px; top: 10px; height: 60px; grid-template-columns: auto 1fr auto; padding: 0 8px 0 18px; gap: 10px; }
  .topo .logo { width: 92px; }
  .topo .pct { display: none; }
  .topo .etiqueta { padding: 10px 14px; font-size: 12px; }
  .painel { padding: 100px 20px 56px; min-height: 0; }
  .capa .palco { grid-template-columns: 1fr; gap: 18px; text-align: left; }
  .capa .vidro { order: -1; width: 46vw; margin: 0 auto; }
  .capa .esq .l1 { padding-left: 0; }
  .capa .dir-t { text-align: left; }
  .bolha { display: none; }
  .capa .rodape-capa { grid-template-columns: 1fr; }
  .capa .cta-centro { align-items: flex-start; order: -1; }
  .capa .vaga-aberta { text-align: left; }
  .capa .linha-fim { flex-wrap: wrap; font-size: 14px; }
  .quem, .cultura, .painel.vaga, .requisitos .grade { grid-template-columns: 1fr; }
  .metricas { grid-template-columns: 1fr; width: 100%; }
  .metricas > div { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .painel.vaga { padding: 0; }
  .vaga .lado-crachas { min-height: 420px; }
  .cartoes { grid-template-columns: 1fr; }
  .cartao { min-height: 0; }
  .dispositivos { min-height: 320px; }
  .notebook { right: 10%; }
  .etapas { grid-template-columns: 1fr; }

  /* formulário no celular */
  .form-tela { inset: 0; border-radius: 0; padding: 84px 20px 20px; }
  .tela { inset: 84px 20px 90px; overflow-y: auto; }
  .abertura { grid-template-columns: 1fr; align-content: center; gap: 6px; }
  .abertura .gigante { font-size: 120px; }
  .abertura .meta { position: static; margin-bottom: 8px; font-size: 13px; }
  .pergunta { grid-template-columns: 1fr; align-items: start; align-content: start; gap: 18px; height: auto; }
  .pergunta .esq { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 12px; order: 2; padding: 0; }
  .pergunta .esq .num { font-size: 56px; }
  .pergunta .esq .sub-tit { display: none; }
  .pergunta .esq > div:first-child { display: none; }
  .pergunta .cont { font-size: 34px; }
  .pergunta .divisor { display: none; }
  .pergunta .corpo { padding-right: 0; order: 1; }
  .nav-setas { right: 14px; bottom: 14px; }
  .nav-setas button { width: 52px; height: 52px; }
  .fechar { left: 20px; bottom: 28px; }
  .resumo { grid-template-columns: 1fr; }
  .acoes-p .dica { display: none; }
  .ficha { padding: 12px 18px 12px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ajustes finos */
.rotulo-num .num { font-size: clamp(76px, 8.4vw, 140px); }
.rotulo-num .tit { padding-bottom: 0.45em; font-size: clamp(22px, 2.4vw, 36px); }
.mini-n .num { font-size: inherit; }
.pergunta .esq { padding-bottom: 38px; }
.form-tela .marca-agua { color: rgba(20, 52, 89, .045); }
@media (max-width: 900px) {
  .rotulo-num .num { font-size: 72px; }
  .pergunta .esq { padding-bottom: 0; }
}
.btn { text-decoration: none; }
.revisao h3 b { display: block; }
.revisao .acoes { position: sticky; bottom: 0; padding: 18px 0 8px; margin-top: 6px; background: linear-gradient(180deg, rgba(221, 228, 242, 0), #d6deef 40%); display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.sucesso .proto { align-self: flex-start; }

/* fotos reais da equipe */
.vitrine { aspect-ratio: 5 / 4.6; display: block; background: #0a1d3a; }
.vitrine::before { display: none; }
.vitrine .foto-a { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.vitrine .foto-b { position: absolute; right: 18px; top: 18px; width: 42%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; border: 5px solid #fff; transform: rotate(3deg); box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .6); }
.vitrine::after { content: ''; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(180deg, transparent, rgba(6, 18, 38, .75)); pointer-events: none; }
.vitrine .legenda { z-index: 2; }

/* clientes */
.clientes { min-height: 0; padding-bottom: 90px; }
.clientes h2 { font-size: clamp(30px, 5.4vw, 92px); line-height: .95; letter-spacing: -0.06em; font-weight: 200; text-transform: uppercase; max-width: 1200px; }
.clientes h2 b { display: block; font-weight: 800; }
.logos { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 56px; }
.logo-tile { aspect-ratio: 339 / 131; border-radius: 999px; background-repeat: no-repeat; background-color: #fff; box-shadow: 0 0 0 1px var(--line); transition: transform .3s var(--ease), box-shadow .3s; }
.logo-tile:hover { transform: translateY(-3px); box-shadow: var(--sombra), 0 0 0 1px var(--line); }
@media (max-width: 900px) { .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 36px; } }
.clientes h2 { font-size: clamp(26px, 4.6vw, 80px); max-width: none; }
.logo-tile { position: relative; overflow: hidden; }
.logo-tile.sem-ponto::after { content: ''; position: absolute; left: 0; top: 12%; width: 10%; height: 46%; background: #fff; }

/* ---- fotos trocadas / notebook / clientes menores ---- */
.vitrine .foto-b { width: 40%; aspect-ratio: 1 / 1; object-position: 50% 40%; }
.notebook .ecra > div { padding: 0; }
.notebook .ecra img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.clientes .logos { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; margin-top: 44px; }
@media (max-width: 1100px) { .clientes .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) { .clientes .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } }

/* ---- crachás (novo visual) ---- */
.lado-crachas { min-height: 700px; }
@keyframes balanca { 0%, 100% { rotate: 0deg; } 50% { rotate: 1.6deg; } }
@media (max-width: 900px) {
  .lado-crachas { min-height: 520px; }
}
.vitrine .foto-a { object-position: 50% 80%; }
.clientes { padding-bottom: 60px; }


/* ---- crachás: moldura translúcida, tira com costura, presilha e argola ---- */
.lado-crachas { min-height: 700px; background: radial-gradient(110% 80% at 30% 15%, #1d4283 0%, #0c2147 55%, #061330 100%); }
.crx { position: absolute; container-type: inline-size; transform-origin: 50% -320px; animation: balanca 8s ease-in-out infinite; }
.crx.claro { left: 9%; top: 37%; width: 40%; max-width: 330px; transform: rotate(3deg); }
.crx.escuro { left: 57%; top: 15%; width: 33%; max-width: 270px; transform: rotate(-2deg); animation-delay: -3.5s; animation-direction: reverse; }
@keyframes balanca { 0%, 100% { rotate: 0deg; } 50% { rotate: 1.4deg; } }

.crx .fita { position: absolute; left: 50%; top: -720px; width: 17%; height: 690px; transform: translateX(-50%); border-radius: 3px 3px 5px 5px; z-index: 1;
  background: linear-gradient(90deg, #d3d9e6, #ffffff 40%, #d9deea); box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 10px 20px rgba(0,0,0,.25); }
.crx .fita::before { content: ''; position: absolute; inset: 0 13%; border-left: 1px dashed rgba(20,52,89,.28); border-right: 1px dashed rgba(20,52,89,.28); }
.crx.escuro .fita { background: linear-gradient(90deg, #0f2a5c, #2a56a3 45%, #12305f); }
.crx.escuro .fita::before { border-color: rgba(255,255,255,.35); }
.crx .rebite { position: absolute; left: 50%; bottom: 26px; width: 7px; height: 7px; border-radius: 50%; transform: translateX(-50%); background: radial-gradient(circle at 35% 30%, #fff, #9aa5bd); box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.crx .gancho { position: absolute; left: 50%; top: -34px; width: 11%; height: 34px; transform: translateX(-50%); z-index: 2; border-radius: 4px 4px 9px 9px;
  background: linear-gradient(90deg, #8d98b0, #f2f5fa 45%, #8d98b0); box-shadow: 0 3px 6px rgba(0,0,0,.35); }
.crx .anel { position: absolute; left: 50%; top: -8px; width: 15%; aspect-ratio: 1.15; transform: translateX(-50%); z-index: 4; border: 3px solid #cfd6e4; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.4); }

.crx .moldura { position: relative; z-index: 3; padding: 3.4cqw; border-radius: 9cqw; background: linear-gradient(160deg, rgba(34,52,108,.82), rgba(14,28,66,.88)); box-shadow: 0 45px 60px -28px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.14); }
.crx .moldura::before { content: ''; position: absolute; left: 50%; top: 1.3cqw; width: 14cqw; height: 2.2cqw; transform: translateX(-50%); border-radius: 2cqw; background: rgba(6,16,40,.8); }
.crx .cartao-c { position: relative; border-radius: 6.6cqw; padding: 10cqw 8cqw 6.5cqw; background: linear-gradient(170deg, #ffffff, #eef1f8); color: var(--brand); overflow: hidden; font-size: 4cqw; }
.crx.escuro .cartao-c { background: linear-gradient(172deg, #2f5aa6 0%, #1f4285 50%, #17376f 100%); color: #fff; }
.crx .cartao-c::after { content: ''; position: absolute; inset: 0; background: linear-gradient(118deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 34%); pointer-events: none; }

.crx .lg { display: block; width: 84%; margin: 0 auto; color: currentColor; }
.crx .meio { display: grid; grid-template-columns: 1.02fr .78fr; gap: 7cqw; margin: 9cqw 0 8cqw; align-items: stretch; }
.crx .foto { position: relative; aspect-ratio: 1; border-radius: 4.6cqw; overflow: hidden; background: linear-gradient(160deg, #b6c0dc, #8d9bc4); }
.crx .foto .cab { position: absolute; left: 50%; top: 20%; width: 34%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: #fff; }
.crx .foto .omb { position: absolute; left: 50%; top: 60%; width: 66%; aspect-ratio: 2 / 1; transform: translateX(-50%); border-radius: 999px 999px 0 0; background: #fff; }
.crx .foto b { position: absolute; right: 8%; top: 5%; font-size: 6cqw; font-weight: 500; color: rgba(255,255,255,.8); }
.crx .tile { position: relative; aspect-ratio: 1; border-radius: 4.6cqw; background: linear-gradient(160deg, rgba(8,20,52,.7), rgba(8,20,52,.35)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); display: grid; place-items: center; }
.crx .tile i { width: 48%; aspect-ratio: 1; border-radius: 3cqw; background: linear-gradient(145deg, #8db4e6 0%, #2f6db5 55%, #1d4f8c 100%); box-shadow: 0 0 5cqw rgba(79,140,220,.55), inset 0 0 0 1px rgba(255,255,255,.35); }
.crx .lado { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; padding: 1cqw 0 0; }
.crx .chip { width: 13cqw; height: 10cqw; border-radius: 2cqw; background: linear-gradient(135deg, #f6e3a4, #c9a043 55%, #f2d98f); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18), inset 0 0 0 3cqw rgba(255,255,255,0); position: relative; }
.crx .chip::after { content: ''; position: absolute; inset: 22% 18%; border: 1px solid rgba(110,80,10,.45); border-radius: 1cqw; }
.crx .holo { width: 7cqw; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from 40deg, #f3c3e8, #a9d8ff, #bff3d6, #fff3b8, #f3c3e8); opacity: .9; }
.crx .lado small { font-size: 2.3cqw; line-height: 1.35; letter-spacing: .08em; text-align: right; opacity: .55; }

.crx .base { display: flex; align-items: flex-end; justify-content: space-between; gap: 4cqw; }
.crx.escuro .base { padding-top: 5cqw; border-top: 1px solid rgba(255,255,255,.22); }
.crx .nome { display: flex; flex-direction: column; line-height: .92; }
.crx .nome b { font-size: 11.5cqw; font-weight: 800; letter-spacing: -0.06em; }
.crx .nome span { font-size: 11.5cqw; font-weight: 300; letter-spacing: -0.05em; }
.crx .nome em { font-style: normal; font-size: 2.8cqw; margin-top: 2.4cqw; opacity: .75; letter-spacing: 0; }
.crx .barras { flex: none; width: 27cqw; height: 5.4cqw; margin-bottom: 1.4cqw; opacity: .8;
  background: repeating-linear-gradient(90deg, currentColor 0 .6cqw, transparent .6cqw 1.2cqw, currentColor 1.2cqw 1.5cqw, transparent 1.5cqw 2.4cqw, currentColor 2.4cqw 3.4cqw, transparent 3.4cqw 4cqw); }

@media (max-width: 900px) {
  .lado-crachas { min-height: 560px; }
  .crx.claro { left: 6%; width: 46%; top: 36%; }
  .crx.escuro { left: 56%; width: 38%; top: 14%; }
}
@media (prefers-reduced-motion: reduce) { .crx { animation: none !important; } }
.crx .cartao-c { aspect-ratio: 0.68; display: flex; flex-direction: column; padding-top: 11cqw; }
.crx.escuro .cartao-c { aspect-ratio: 0.7; }
.crx .meio { margin: auto 0; }
.crx .lg { width: 80%; }

/* nome gigante da capa: usa o próprio lettering da logomarca (só a palavra, sem o [A]) */
.capa .nome-gigante { display: flex; justify-content: center; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; font-size: 0; line-height: 0; }
.capa .logo-texto {
  display: block; width: clamp(250px, 52vw, 800px); aspect-ratio: 819 / 259;
  -webkit-mask: url('/assets/logo.png') no-repeat 100% 0 / 135.4% 100%; mask: url('/assets/logo.png') no-repeat 100% 0 / 135.4% 100%;
  background: linear-gradient(90deg, #4a5d86 0%, #8f9cc2 34%, #adb7d3 50%, #7482aa 72%, #3e4f78 100%);
}
.capa .logo-texto { width: clamp(240px, 43vw, 660px); }
.bolha span { white-space: nowrap; }
.bolha.a { top: 0; left: 66%; }
.capa .logo-texto { width: clamp(290px, 70vw, 1060px); }
.capa { padding-top: 104px; }
.capa .palco { padding: 8px 0 16px; }
.capa .linha-fim { margin-top: 22px; }
.capa .logo-texto { width: clamp(290px, 62vw, 960px); }
.capa .vidro { width: clamp(130px, 15vw, 230px); }
@media (max-width: 900px) { .capa .vidro { width: 38vw; } .capa .logo-texto { width: 86vw; } }

/* ---- página inicial: opções de vaga ---- */
.vagas-sec { min-height: 0; padding-bottom: 90px; }
.vagas-sec h2 { font-size: clamp(52px, 10vw, 170px); line-height: .86; letter-spacing: -0.06em; font-weight: 200; text-transform: uppercase; }
.vagas-sec h2 b { display: block; font-weight: 800; padding-left: 0.5em; }
.sub-vagas { margin-top: 26px; color: var(--ink-soft); font-size: clamp(16px, 1.6vw, 21px); font-weight: 300; max-width: 560px; }
.opcoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 46px; }
.opcao { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 400px; padding: 34px 30px 30px; border-radius: 30px; overflow: hidden; text-decoration: none; background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line); transition: transform .3s var(--ease), box-shadow .3s; }
a.opcao:hover { transform: translateY(-5px); box-shadow: var(--sombra), 0 0 0 1px var(--line); }
.opcao .area { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.opcao h3 { font-size: clamp(36px, 3.8vw, 60px); font-weight: 300; letter-spacing: -0.06em; line-height: .95; }
.opcao h3 b { display: block; font-weight: 800; }
.opcao p { color: var(--ink-soft); font-size: 16px; max-width: 420px; position: relative; z-index: 1; }
.opcao .chips { display: flex; flex-wrap: wrap; gap: 8px; position: relative; z-index: 1; }
.opcao .chips span { background: #eceff6; padding: 8px 14px; border-radius: 99px; font-size: 12px; }
.opcao .ver { margin-top: auto; display: inline-flex; align-items: center; gap: 14px; font-weight: 600; font-size: 16px; position: relative; z-index: 1; }
.opcao .ver i { width: 46px; height: 46px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; transition: transform .3s var(--ease); }
.opcao .ver i svg { width: 18px; height: 18px; }
a.opcao:hover .ver i { transform: translateX(6px); }
.opcao .fantasma { position: absolute; right: 6%; bottom: -0.28em; font-size: 150px; color: #d5dbec; pointer-events: none; }
.opcao.dest { background: var(--navy); color: #fff; box-shadow: none; }
.opcao.dest p { color: rgba(255,255,255,.72); }
.opcao.dest .area { color: rgba(255,255,255,.6); }
.opcao.dest .chips span { background: var(--accent); color: #fff; }
.opcao.dest .ver i { background: var(--accent); }
.opcao.dest .fantasma { color: #5b73a6; }
.opcao.breve { opacity: .6; }
@media (max-width: 1100px) { .opcoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .opcoes { grid-template-columns: 1fr; } .opcao { min-height: 320px; } }
.opcao .fantasma { font-size: 120px; opacity: .65; }

.sucesso .extra { margin-top: 22px; font-size: 16px; color: var(--ink-soft); max-width: 560px; }
.sucesso .extra a { color: var(--brand); font-weight: 600; text-underline-offset: 4px; }
.fecha .link-sutil { margin-top: 20px; }