/* ============================================================
   SYLISION · IA Recruiter — design system v3
   ============================================================ */

:root {
  --bg: #ffffff;
  --bg-2: #f8fafc;
  --bg-3: #f1f5f9;
  --card: #ffffff;
  --card-hover: #fafffe;
  --border: #e5e9ef;
  --border-strong: #d3dae3;
  --green: #059669;
  --green-2: #10b981;
  --green-dim: #047857;
  --green-ink: #ffffff;
  --green-soft: #ecfdf5;
  --text: #0f172a;
  --muted: #475569;
  --muted-2: #94a3b8;
  --red: #dc2626;
  --amber: #d97706;
  --amber-soft: #fffbeb;
  --violet: #7c3aed;
  --violet-soft: #f5f3ff;
  --blue: #2563eb;
  --blue-soft: #eff6ff;
  --teal: #0d9488;
  --teal-soft: #f0fdfa;
  --rose: #e11d48;
  --rose-soft: #fff1f2;
  --radius: 18px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 6px 24px -8px rgba(15, 23, 42, 0.12);
  --shadow-lg: 0 24px 60px -24px rgba(15, 23, 42, 0.18);
  --display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.22, .8, .26, .99);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
[hidden] { display: none !important; }
body {
  font-family: "Inter", system-ui, sans-serif;
  background: var(--bg); color: var(--text);
  min-height: 100vh; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
::selection { background: rgba(5,150,105,.18); color: var(--text); }

/* ============ camadas de fundo ============ */
.bg-canvas { position: fixed; inset: 0; z-index: 0; display: block; pointer-events: none; opacity: .55; }
.bg-aurora {
  position: fixed; inset: -20% -10%; z-index: 0; pointer-events: none; filter: blur(80px);
  background:
    radial-gradient(38% 30% at 18% 8%, rgba(16,185,129,.12), transparent 70%),
    radial-gradient(34% 26% at 84% 16%, rgba(37,99,235,.09), transparent 70%),
    radial-gradient(30% 24% at 70% 60%, rgba(124,58,237,.06), transparent 70%),
    radial-gradient(50% 36% at 50% 110%, rgba(13,148,136,.08), transparent 70%);
  animation: aurora-drift 26s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
  0% { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(2%, -2%, 0) scale(1.06); }
}
.bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse 85% 64% at 50% 0%, #000 35%, transparent 100%);
}
.bg-grain { display: none; }
.ai-aura { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ topbar ============ */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 13px 30px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: baseline; gap: 10px; flex-shrink: 0; }
.logo-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(5,150,105,.14); align-self: center; animation: pulse 2.4s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.45} }
.logo-text { font-family: var(--display); font-weight: 700; letter-spacing: 3px; font-size: 17px; color: var(--text); }
.logo-sub { color: var(--muted-2); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; font-family: var(--mono); }

.nav { display: flex; align-items: center; gap: 26px; }
.nav-link { color: var(--muted); text-decoration: none; font-size: 13.5px; font-weight: 500; transition: color .15s; position: relative; }
.nav-link::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 0; height: 2px; border-radius: 2px; background: var(--green); transition: width .25s var(--ease); }
.nav-link:hover { color: var(--text); }
.nav-link:hover::after { width: 100%; }
.nav-cta {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--green-soft); color: var(--green-dim);
  border: 1px solid rgba(5,150,105,.28); border-radius: 10px;
  padding: 8px 15px; font-size: 13px; font-weight: 650; cursor: pointer;
  transition: background .2s, box-shadow .2s, transform .15s;
}
.nav-cta:hover { background: #d8f7ea; box-shadow: var(--shadow-md); transform: translateY(-1px); }
.nav-cta-arrow { transition: transform .2s var(--ease); }
.nav-cta:hover .nav-cta-arrow { transform: translateX(3px); }
@media (max-width: 900px) { .nav { display: none; } }

.topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.status-pill { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted); padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-2); font-family: var(--mono); }
.status-pill em { font-style: normal; color: var(--text); }
.status-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted-2); }
.status-pill.on .dot { background: var(--green-2); box-shadow: 0 0 0 3px rgba(16,185,129,.2); }
.status-pill.off .dot { background: var(--red); }
/* no mobile mantem o contador do banco (nº de CVs) visivel; esconde so o pill do nucleo */
@media (max-width: 640px) {
  #status-llama { display: none; }
  #status-banco { font-size: 10.5px; padding: 5px 10px; }
}
@media (max-width: 380px) { .logo-sub { display: none; } }

/* ============ hero ============ */
.hero { position: relative; z-index: 2; max-width: 980px; margin: 0 auto; padding: 64px 28px 84px; text-align: center; }
.eyebrow {
  display: inline-block; font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 2.6px; color: var(--green);
  font-weight: 600; margin-bottom: 18px;
}
.hero h1 {
  font-family: var(--display);
  font-size: clamp(36px, 6.4vw, 72px);
  font-weight: 700; letter-spacing: -2px; line-height: 1.04;
  margin: 0 auto; color: var(--text);
  text-wrap: balance;
}
.grad {
  background: linear-gradient(110deg, var(--green-dim) 5%, var(--green) 30%, var(--teal) 55%, var(--blue) 80%, var(--violet) 105%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: grad-sweep 7s ease-in-out infinite;
}
@keyframes grad-sweep { 0%,100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
.hero .sub { margin: 26px auto 0; max-width: 640px; color: var(--muted); font-size: 17px; line-height: 1.7; }
.hero .sub strong { color: var(--text); font-weight: 600; }
.hero-cta { margin-top: 34px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.hero-metrics { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 40px; }
.metric {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 24px; min-width: 130px; box-shadow: var(--shadow-sm);
  transition: border-color .25s, transform .25s var(--ease), box-shadow .25s;
}
.metric:hover { border-color: rgba(5,150,105,.4); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.metric b { display: block; font-size: 22px; font-weight: 700; color: var(--green); font-family: var(--mono); letter-spacing: -.5px; }
.metric span { font-size: 12px; color: var(--muted); }

/* ============ olho-radar (oracle) v2 — esfera de vidro + radar ============ */
.oracle-scene { position: relative; width: 320px; height: 320px; margin: 8px auto 42px; pointer-events: none; will-change: transform; }

/* halo difuso atras de tudo */
.orx-halo {
  position: absolute; inset: 26px; border-radius: 50%;
  background: radial-gradient(circle, rgba(16,185,129,.22) 0%, rgba(16,185,129,.06) 52%, transparent 72%);
  filter: blur(14px); animation: orx-breathe 4.6s ease-in-out infinite;
}

/* sombra no chao: da peso e profundidade */
.orx-shadow {
  position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%);
  width: 190px; height: 34px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(4,120,87,.30), rgba(15,23,42,.10) 55%, transparent 72%);
  filter: blur(9px); animation: orx-shadow 4.6s ease-in-out infinite;
}
@keyframes orx-shadow { 0%,100% { transform: translateX(-50%) scaleX(1); opacity: .85; } 50% { transform: translateX(-50%) scaleX(.84); opacity: .55; } }

/* mostrador de graus (ticks) girando devagar */
.orx-ticks {
  position: absolute; inset: 0; border-radius: 50%; opacity: .85;
  background: repeating-conic-gradient(rgba(5,150,105,.55) 0deg 0.8deg, transparent 0.8deg 6deg);
  -webkit-mask: radial-gradient(circle, transparent 60.5%, #000 61%, #000 64.5%, transparent 65%);
  mask: radial-gradient(circle, transparent 60.5%, #000 61%, #000 64.5%, transparent 65%);
  animation: spin 90s linear infinite;
}

.orx-ring { position: absolute; border-radius: 50%; }
.orx-r1 { inset: 0; border: 1px solid rgba(5,150,105,.16); }
.orx-r3 { inset: 60px; border: 1px dashed rgba(5,150,105,.32); animation: spin 48s linear infinite reverse; }

/* anel de energia: cometa de luz girando */
.orx-r2 {
  position: absolute; inset: 24px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 230deg, rgba(16,185,129,.55) 310deg, rgba(110,231,183,.95) 352deg, transparent 360deg);
  -webkit-mask: radial-gradient(circle, transparent calc(50% - 3px), #000 calc(50% - 1.5px));
  mask: radial-gradient(circle, transparent calc(50% - 3px), #000 calc(50% - 1.5px));
  animation: spin 5.5s linear infinite;
}

/* mira (crosshair) sutil */
.orx-cross {
  position: absolute; inset: 14px; border-radius: 50%; opacity: .5;
  background:
    linear-gradient(rgba(5,150,105,.20), rgba(5,150,105,.20)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(rgba(5,150,105,.20), rgba(5,150,105,.20)) 0 50% / 100% 1px no-repeat;
  -webkit-mask: radial-gradient(circle, transparent 23%, #000 24%);
  mask: radial-gradient(circle, transparent 23%, #000 24%);
}

/* varredura do radar */
.orx-sweep {
  position: absolute; inset: 12px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(16,185,129,.34) 0deg, rgba(16,185,129,.12) 40deg, transparent 85deg);
  -webkit-mask: radial-gradient(circle, transparent 22%, #000 23%);
  mask: radial-gradient(circle, transparent 22%, #000 23%);
  animation: spin 4.2s linear infinite;
}

/* ondas de pulso saindo do nucleo */
.orx-wave { position: absolute; inset: 62px; border-radius: 50%; border: 1.5px solid rgba(16,185,129,.55); opacity: 0; animation: orx-wave 4.4s ease-out infinite; }
.orx-wave.w2 { animation-delay: 2.2s; }
@keyframes orx-wave { 0% { transform: scale(.45); opacity: .9; } 70% { opacity: 0; } 100% { transform: scale(1.22); opacity: 0; } }

/* satelites orbitando */
.orx-orbit { position: absolute; border-radius: 50%; animation: spin linear infinite; }
.orx-orbit span { position: absolute; top: -4px; left: 50%; margin-left: -4px; width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.16), 0 2px 6px rgba(5,150,105,.5); }
.orx-orbit.o1 { inset: 24px; animation-duration: 9s; }
.orx-orbit.o2 { inset: 60px; animation-duration: 15s; animation-direction: reverse; }
.orx-orbit.o2 span { width: 6px; height: 6px; margin-left: -3px; top: -3px; background: #34d399; }
.orx-orbit.o3 { inset: 0; animation-duration: 24s; }
.orx-orbit.o3 span { width: 5px; height: 5px; margin-left: -2.5px; top: -2.5px; background: rgba(5,150,105,.75); box-shadow: 0 0 0 2px rgba(16,185,129,.14); }

/* alvos detectados (blips com anel de sonar) */
.orx-blip { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--green-2); opacity: 0; animation: orx-blip 4.2s linear infinite; }
.orx-blip::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1.5px solid rgba(16,185,129,.55); opacity: 0; animation: orx-blip-ring 4.2s linear infinite; animation-delay: inherit; }
.orx-blip.b1 { top: 23%; left: 65%; animation-delay: .3s; }
.orx-blip.b2 { top: 61%; left: 76%; animation-delay: 1.4s; }
.orx-blip.b3 { top: 71%; left: 27%; animation-delay: 2.4s; }
.orx-blip.b4 { top: 30%; left: 19%; animation-delay: 3.3s; }
@keyframes orx-blip { 0%,5% { opacity: 0; transform: scale(.4); } 9% { opacity: 1; transform: scale(1.3); } 30% { opacity: .85; transform: scale(1); } 55% { opacity: 0; } 100% { opacity: 0; } }
@keyframes orx-blip-ring { 0%,8% { opacity: 0; transform: scale(.4); } 13% { opacity: .9; transform: scale(.7); } 42% { opacity: 0; transform: scale(1.8); } 100% { opacity: 0; } }

/* nucleo: esfera de vidro 3D */
.orx-core {
  position: absolute; inset: 0; margin: auto; width: 118px; height: 118px; border-radius: 50%;
  background:
    radial-gradient(circle at 33% 26%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 36%),
    radial-gradient(circle at 70% 82%, rgba(2,62,44,.6) 0%, transparent 52%),
    radial-gradient(circle at 50% 45%, #5eead4 0%, #10b981 42%, #059669 68%, #03654a 100%);
  box-shadow:
    0 28px 50px -18px rgba(4,120,87,.6),
    0 4px 16px rgba(5,150,105,.25),
    inset 0 -14px 28px rgba(3,70,50,.5),
    inset 0 8px 18px rgba(255,255,255,.45);
  display: flex; align-items: center; justify-content: center;
  animation: orx-breathe 4.6s ease-in-out infinite;
}
@keyframes orx-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
/* anel de energia colado no nucleo */
.orx-core::before {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(110,231,183,.9), transparent 120deg, transparent 240deg, rgba(16,185,129,.55) 330deg, rgba(110,231,183,.9));
  -webkit-mask: radial-gradient(circle, transparent calc(50% - 2px), #000 calc(50% - 1px));
  mask: radial-gradient(circle, transparent calc(50% - 2px), #000 calc(50% - 1px));
  animation: spin 3.4s linear infinite;
}
/* iris que "olha" ao redor */
.orx-iris {
  position: relative; width: 48px; height: 48px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #065f46, #022c22 75%);
  box-shadow: 0 0 0 5px rgba(255,255,255,.5), inset 0 2px 7px rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  animation: orx-look 7s ease-in-out infinite;
}
@keyframes orx-look {
  0%, 18% { transform: translate(0,0); }
  26%, 40% { transform: translate(6px,-3px); }
  48%, 62% { transform: translate(-6px,2px); }
  70%, 100% { transform: translate(0,0); }
}
.orx-pupil { display: block; width: 15px; height: 15px; border-radius: 50%; background: #6ee7b7; box-shadow: 0 0 10px rgba(110,231,183,.95), 0 0 22px rgba(16,185,129,.6); animation: orx-pupil 2.6s ease-in-out infinite; }
@keyframes orx-pupil { 0%,100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } }

@media (max-width: 480px) { .oracle-scene { width: 250px; height: 250px; transform: scale(.92); } }

/* ============ secoes / blocos ============ */
.block { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; padding: 92px 28px; }
.block.alt { max-width: none; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--bg-2), #fff 60%, var(--bg-2)); }
.block.alt > * { max-width: 1120px; margin-left: auto; margin-right: auto; }
.block-head { text-align: center; margin-bottom: 54px; }
.block-head h2, .sources-head h2, .cta-card h2 {
  font-family: var(--display); font-size: clamp(27px, 4vw, 44px);
  font-weight: 700; letter-spacing: -1.2px; line-height: 1.12; margin-top: 14px;
  color: var(--text);
  text-wrap: balance;
}
.block-sub { margin: 16px auto 0; max-width: 620px; color: var(--muted); font-size: 16px; line-height: 1.7; }

/* ---- manifesto (poder em silencio) ---- */
.manifesto { position: relative; z-index: 2; padding: 110px 28px; text-align: center; overflow: hidden; background: linear-gradient(180deg, transparent, var(--bg-2) 50%, transparent); }
.manifesto::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 70% at 50% 50%, rgba(16,185,129,.05), transparent 75%);
}
.mani-inner { max-width: 880px; margin: 0 auto; position: relative; }
.mani-line {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(30px, 5.4vw, 58px); letter-spacing: -1.6px; line-height: 1.14;
  color: var(--text);
}
.mani-line + .mani-line { margin-top: 6px; }
.mani-grad {
  background: linear-gradient(110deg, var(--green-dim), var(--green) 60%, var(--green-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mani-foot { margin-top: 34px; color: var(--muted); font-size: 15.5px; line-height: 1.7; }
.mani-foot span { color: var(--muted-2); font-size: 13.5px; }

/* ---- steps ---- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: step; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }
.step {
  position: relative; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 30px 26px; overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color .25s, transform .3s var(--ease), box-shadow .25s;
}
.step::before {
  content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(5,150,105,.55), transparent);
  opacity: 0; transition: opacity .3s;
}
.step:hover { border-color: rgba(5,150,105,.35); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.step:hover::before { opacity: 1; }
.step-n { font-family: var(--mono); font-size: 12px; color: var(--green-dim); border: 1px solid rgba(5,150,105,.3); padding: 4px 10px; border-radius: 8px; background: var(--green-soft); }
.step h3 { font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -.3px; margin: 18px 0 9px; color: var(--text); }
.step p { color: var(--muted); font-size: 14.5px; line-height: 1.65; }
.step em { color: var(--text); font-style: normal; font-weight: 600; }

/* ---- bento de features ---- */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bento .span2 { grid-column: span 2; }
@media (max-width: 980px) { .bento { grid-template-columns: repeat(2, 1fr); } .bento .span2 { grid-column: span 2; } }
@media (max-width: 600px) { .bento { grid-template-columns: 1fr; } .bento .span2 { grid-column: span 1; } }
.feature {
  position: relative; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px; overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color .25s, transform .3s var(--ease), box-shadow .25s;
}
.feature::after {
  content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%;
  top: -110px; right: -110px;
  background: radial-gradient(circle, rgba(16,185,129,.10), transparent 70%);
  opacity: 0; transition: opacity .35s;
}
.feature:hover { border-color: rgba(5,150,105,.35); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.feature:hover::after { opacity: 1; }
.feat-ico {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: 12px; background: var(--green-soft); border: 1px solid rgba(5,150,105,.2);
  color: var(--green); font-size: 20px; margin-bottom: 16px;
}
.feature h3 { font-family: var(--display); font-size: 17.5px; font-weight: 600; letter-spacing: -.2px; margin-bottom: 9px; color: var(--text); }
.feature p { color: var(--muted); font-size: 14px; line-height: 1.65; }
/* acentos de cor por card (minimal multi-hue) */
.bento .feature:nth-child(2) .feat-ico { background: var(--violet-soft); border-color: rgba(124,58,237,.22); color: var(--violet); }
.bento .feature:nth-child(3) .feat-ico { background: var(--blue-soft); border-color: rgba(37,99,235,.22); color: var(--blue); }
.bento .feature:nth-child(4) .feat-ico { background: var(--amber-soft); border-color: rgba(217,119,6,.25); color: var(--amber); }
.bento .feature:nth-child(5) .feat-ico { background: var(--teal-soft); border-color: rgba(13,148,136,.24); color: var(--teal); }
.bento .feature:nth-child(2)::after { background: radial-gradient(circle, rgba(124,58,237,.10), transparent 70%); }
.bento .feature:nth-child(3)::after { background: radial-gradient(circle, rgba(37,99,235,.10), transparent 70%); }
.bento .feature:nth-child(4)::after { background: radial-gradient(circle, rgba(217,119,6,.10), transparent 70%); }
.bento .feature:nth-child(5)::after { background: radial-gradient(circle, rgba(13,148,136,.10), transparent 70%); }
.steps .step:nth-child(2) .step-n { color: var(--violet); border-color: rgba(124,58,237,.3); background: var(--violet-soft); }
.steps .step:nth-child(3) .step-n { color: var(--blue); border-color: rgba(37,99,235,.3); background: var(--blue-soft); }

/* ---- vagas abertas ---- */
.vagas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 980px) { .vagas-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .vagas-grid { grid-template-columns: 1fr; } }
.vaga-card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
  transition: border-color .25s, transform .3s var(--ease), box-shadow .25s;
}
.vaga-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--green-2), var(--teal), var(--blue)); opacity: 0; transition: opacity .3s; }
.vaga-card:hover { border-color: rgba(5,150,105,.35); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.vaga-card:hover::before { opacity: 1; }
.vaga-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.vaga-top h3 { font-family: var(--display); font-size: 16.5px; font-weight: 600; letter-spacing: -.2px; color: var(--text); line-height: 1.3; }
.vaga-badge { flex-shrink: 0; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; padding: 4px 10px; border-radius: 999px; }
.vaga-badge.sen-pleno { color: var(--blue); background: var(--blue-soft); border: 1px solid rgba(37,99,235,.25); }
.vaga-badge.sen-sênior { color: var(--violet); background: var(--violet-soft); border: 1px solid rgba(124,58,237,.25); }
.vaga-badge.sen-staff { color: var(--amber); background: var(--amber-soft); border: 1px solid rgba(217,119,6,.3); }
.vaga-empresa { font-size: 12px; color: var(--muted-2); font-family: var(--mono); }
.vaga-desc { font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.vaga-perfil { font-size: 12px; color: var(--muted-2); margin-top: 2px; }
.vaga-perfil b { color: var(--text); font-weight: 600; }
.vaga-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.vtag { font-size: 11px; font-family: var(--mono); color: var(--muted); background: var(--bg-2); border: 1px solid var(--border); padding: 3px 9px; border-radius: 7px; }
.vtag.reg { color: var(--teal); background: var(--teal-soft); border-color: rgba(13,148,136,.28); font-weight: 600; }
.vaga-foot-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--border); }
.vaga-salario { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--green-dim); }
.vaga-btn {
  font-size: 12px; font-weight: 650; font-family: var(--mono); cursor: pointer;
  color: var(--green-dim); background: var(--green-soft);
  border: 1px solid rgba(5,150,105,.3); border-radius: 9px; padding: 7px 13px;
  transition: background .2s, border-color .2s, transform .15s var(--ease);
}
.vaga-btn:hover { background: #d8f7ea; border-color: var(--green); transform: translateY(-1px); }
.vagas-foot { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; margin-top: 34px; }

/* ---- privacidade ---- */
.policy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .policy { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .policy { grid-template-columns: 1fr; } }
.policy-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 24px; box-shadow: var(--shadow-sm); transition: border-color .25s, transform .3s var(--ease), box-shadow .25s; }
.policy-card:hover { border-color: rgba(5,150,105,.3); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.policy-card h3 { font-family: var(--display); font-size: 15.5px; font-weight: 600; margin-bottom: 9px; color: var(--text); }
.policy-card p { color: var(--muted); font-size: 13.5px; line-height: 1.65; }
.policy-card strong { color: var(--green-dim); font-weight: 600; }
.policy-foot { text-align: center; color: var(--muted-2); font-size: 13px; margin-top: 30px; line-height: 1.6; }
.policy-cta { display: flex; justify-content: center; margin-top: 22px; }

/* ---- CTA final ---- */
.cta-final { position: relative; z-index: 2; padding: 96px 28px; }
.cta-card {
  position: relative; max-width: 880px; margin: 0 auto; text-align: center;
  padding: 70px 36px; border-radius: 26px; overflow: hidden;
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(16,185,129,.10), transparent 60%),
    linear-gradient(180deg, #ffffff, var(--bg-2));
  border: 1px solid rgba(5,150,105,.22);
  box-shadow: var(--shadow-lg);
}
.cta-card p { margin: 18px auto 0; color: var(--muted); font-size: 16.5px; }
.cta-actions { margin-top: 32px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ============ footer ============ */
.footer { position: relative; z-index: 2; border-top: 1px solid var(--border); padding: 56px 28px 36px; color: var(--muted); background: var(--bg-2); }
.footer-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1.1fr 1fr; gap: 36px; }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand p { margin-top: 14px; font-size: 13.5px; line-height: 1.7; color: var(--muted-2); }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col h4 { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--muted-2); margin-bottom: 4px; }
.footer-col a { color: var(--muted); font-size: 13.5px; text-decoration: none; transition: color .2s; width: fit-content; }
.footer-col a:hover { color: var(--green); }
.footer-contato { margin-top: 14px; display: flex; flex-direction: column; gap: 7px; }
.footer-contato a { color: var(--muted); font-size: 13.5px; text-decoration: none; transition: color .2s; width: fit-content; }
.footer-contato a:hover { color: var(--green); }
.footer-mini { max-width: 1120px; margin: 36px auto 0; padding-top: 22px; border-top: 1px solid var(--border); color: var(--muted-2); font-size: 12px; }

/* ============ botoes ============ */
.btn-primary {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: linear-gradient(180deg, var(--green-2), var(--green) 70%);
  color: var(--green-ink); border: none; border-radius: 12px;
  padding: 13px 22px; font-weight: 700; font-size: 15px; cursor: pointer; overflow: hidden;
  transition: transform .15s var(--ease), box-shadow .25s, filter .2s;
  box-shadow: 0 8px 22px -8px rgba(5,150,105,.5), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary::before {
  content: ""; position: absolute; top: 0; left: -80%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg); transition: left .45s var(--ease);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -8px rgba(5,150,105,.55), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-primary:hover::before { left: 120%; }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-arrow { transition: transform .2s var(--ease); }
.btn-primary:hover .btn-arrow { transform: translateX(4px); }
.btn-primary.lg, .btn-ghost.lg { padding: 16px 30px; font-size: 16px; border-radius: 14px; }
.btn-primary.sm, .btn-ghost.sm { padding: 9px 16px; font-size: 13px; }
.btn-primary.wide, .btn-ghost.wide { width: 100%; }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); color: var(--text); border: 1px solid var(--border-strong);
  border-radius: 12px; padding: 13px 22px; font-size: 15px; font-weight: 600; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background .2s, border-color .2s, transform .15s var(--ease), box-shadow .2s;
}
.btn-ghost:hover { background: var(--bg-2); border-color: rgba(5,150,105,.45); transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* CTA premium: gloss sutil que segue o cursor + ima (transform via initPolish).
   .has-spot e' adicionada por JS, entao toque/reduced-motion nunca recebem isto. */
.btn-primary.has-spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(80px circle at var(--mx, 50%) var(--my, 130%), rgba(255,255,255,.14), transparent 64%);
  opacity: 0; transition: opacity .3s var(--ease);
}
.btn-primary.has-spot:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .btn-primary.has-spot::after { display: none; }
}

/* ============ marquee de fontes ============ */
.sources { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; padding: 84px 28px 70px; }
.sources-head { text-align: center; margin-bottom: 36px; }
.logo-marquee { position: relative; overflow: hidden; padding: 10px 0; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.logo-track { display: flex; gap: 14px; width: max-content; animation: marquee 30s linear infinite; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.src-chip {
  flex-shrink: 0; display: inline-flex; align-items: center; padding: 13px 26px;
  border: 1px solid var(--border); border-radius: 13px; background: var(--card);
  font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: .2px;
  color: var(--muted); white-space: nowrap; box-shadow: var(--shadow-sm);
  transition: border-color .25s, color .25s, transform .25s var(--ease);
}
.src-chip:hover { border-color: rgba(5,150,105,.45); color: var(--green); transform: translateY(-3px); }
.sources-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
@media (prefers-reduced-motion: reduce) { .logo-track { animation: none; } }

.sources-bloco {
  max-width: 1100px; margin: 36px auto 0; padding: 26px 28px 22px;
  background: var(--card); border: 1px solid var(--border); border-radius: 18px;
}
.sources-titulo {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--display, sans-serif); font-size: 16px;
  font-weight: 600; color: var(--text); margin-bottom: 6px;
}
.sources-icon-pulse, .sources-icon-link {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(5,150,105,.15);
  flex-shrink: 0;
}
.sources-icon-pulse { animation: pulse-green-sources 2s ease-in-out infinite; }
.sources-icon-link {
  background: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56,189,248,.15);
}
@keyframes pulse-green-sources {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.4); box-shadow: 0 0 0 6px rgba(5,150,105,0); }
}
.sources-desc {
  font-size: 13.5px; color: var(--muted); margin: 0 0 16px;
  line-height: 1.55;
}
.sources-disclaimer {
  font-size: 11.5px; color: var(--muted-2);
  text-align: center; margin: 14px 0 0; font-style: italic;
}
.logo-track-reverse { animation-direction: reverse; }

/* ============ secao API: parcerias ============ */
.api-conecta { max-width: 1100px; margin: 0 auto; padding: 80px 24px 60px; }
.api-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 36px 0 26px;
}
@media (max-width: 880px) { .api-grid { grid-template-columns: 1fr; } }
.api-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 18px;
  padding: 26px 24px 22px; transition: border-color .2s, transform .2s;
  display: flex; flex-direction: column; gap: 8px;
}
.api-card:hover { border-color: rgba(5,150,105,.45); transform: translateY(-3px); }
.api-tag {
  font-family: var(--mono, monospace); font-size: 12px; font-weight: 600;
  letter-spacing: .04em; color: var(--green); background: rgba(5,150,105,.10);
  padding: 4px 10px; border-radius: 8px; align-self: flex-start;
}
.api-card h3 { font-family: var(--display); font-size: 18px; color: var(--text); margin: 4px 0 6px; }
.api-card p { color: var(--muted); font-size: 14px; line-height: 1.6; }
.api-foot {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center; padding: 16px 0 0; color: var(--muted); font-size: 14px;
}
.api-porque {
  margin: 28px auto 0; max-width: 820px; padding: 24px 28px;
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
}
.api-porque h3 {
  font-family: var(--display); font-size: 17px; color: var(--text);
  margin: 0 0 14px; display: flex; align-items: center; gap: 8px;
}
.api-porque h3::before {
  content: ""; width: 8px; height: 8px; background: var(--green); border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(5,150,105,.18);
}
.api-porque-lista { list-style: none; padding: 0; margin: 0; }
.api-porque-lista li {
  position: relative; padding-left: 26px; margin-bottom: 12px;
  font-size: 14.5px; line-height: 1.6; color: var(--muted);
}
.api-porque-lista li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--green); font-weight: 700; font-size: 16px;
}
.api-porque-lista li strong { color: var(--text); }
.api-porque-lista li code {
  background: rgba(5,150,105,.10); color: var(--green); padding: 2px 7px;
  border-radius: 6px; font-family: var(--mono, monospace); font-size: 12.5px;
}

/* ============ overlay TRIAGEM ============ */
.overlay { position: fixed; inset: 0; z-index: 50; background: rgba(15,23,42,.45); backdrop-filter: blur(10px); overflow-y: auto; padding: 32px 20px; animation: fade .25s ease; }

/* -- Triagem em modo app: TELA CHEIA, com barra propria; nada de pop-up -- */
.app-triagem { padding: 0; background: var(--bg); backdrop-filter: none; }
.app-triagem .overlay-panel {
  max-width: none; min-height: 100vh; margin: 0; padding: 0;
  border: 0; border-radius: 0; box-shadow: none; animation: fade .25s ease;
}
.app-bar {
  position: sticky; top: 0; z-index: 6;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px clamp(16px, 4vw, 40px);
  background: var(--bg); border-bottom: 1px solid var(--border);
}
.app-voltar {
  appearance: none; border: 1px solid var(--border); background: var(--bg-2);
  color: var(--muted); border-radius: 10px; padding: 8px 14px; font-size: 13px;
  font-weight: 600; cursor: pointer; transition: background .15s, color .15s;
}
.app-voltar:hover { background: var(--bg-3); color: var(--text); }
.app-bar-logo { font-family: var(--display); font-size: 16px; font-weight: 700; letter-spacing: -.3px; color: var(--text); }
.app-bar-logo em { font-style: normal; font-weight: 500; color: var(--muted); }
.app-bar-emp { margin-left: auto; font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.app-nav { display: flex; gap: 4px; margin-left: 8px; }
.app-nav a {
  font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none;
  padding: 7px 12px; border-radius: 9px; transition: background .15s, color .15s;
}
.app-nav a:hover { background: var(--bg-2); color: var(--text); }
.app-conteudo { max-width: 1440px; margin: 0 auto; padding: 26px clamp(16px, 4vw, 40px) 64px; }
.app-triagem .overlay-head { text-align: left; margin-bottom: 22px; }
.app-triagem .overlay-head h2 { font-size: 24px; }
@media (max-width: 640px) { .app-bar-emp { display: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.overlay-panel {
  position: relative; max-width: 1180px; margin: 0 auto;
  background: var(--bg); border: 1px solid var(--border); border-radius: 24px; padding: 32px;
  box-shadow: 0 40px 100px -20px rgba(15,23,42,.35);
  animation: panel-in .35s var(--ease);
}
@keyframes panel-in { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
.overlay-close {
  position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg-2); color: var(--muted);
  font-size: 15px; cursor: pointer; transition: background .15s, color .15s, transform .15s; z-index: 2;
}
.overlay-close:hover { background: var(--bg-3); color: var(--text); transform: rotate(90deg); }
.overlay-head { text-align: center; margin-bottom: 28px; }
.overlay-head h2 { font-family: var(--display); font-size: 27px; font-weight: 700; letter-spacing: -.6px; margin-top: 8px; color: var(--text); }

.grid { display: grid; grid-template-columns: 384px 1fr; gap: 22px; align-items: start; }
@media (max-width: 880px) { .grid { grid-template-columns: 1fr; } }
.panel { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.panel-title { font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 2.2px; color: var(--muted); font-weight: 600; margin-bottom: 16px; }

.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.field > span { font-size: 13px; color: var(--text); font-weight: 500; }
.field > span em { color: var(--muted-2); font-style: normal; font-weight: 400; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
input[type=text], input[type=email], input[type=password], textarea, select {
  width: 100%; background: var(--bg); border: 1px solid var(--border-strong); border-radius: 11px;
  padding: 12px 14px; color: var(--text); font-family: inherit; font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.senha-wrap { position: relative; display: block; }
.senha-wrap input { padding-right: 78px; }
.ver-senha {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: transparent; border: none; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--muted); padding: 6px 8px; border-radius: 8px;
}
.ver-senha:hover { color: var(--green-dim); background: var(--green-soft); }
textarea { resize: vertical; line-height: 1.55; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(5,150,105,.14); }
input::placeholder, textarea::placeholder { color: var(--muted-2); }
input[type=range] { -webkit-appearance: none; appearance: none; height: 5px; background: var(--border-strong); border-radius: 999px; padding: 0; border: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 17px; height: 17px; border-radius: 50%; background: var(--green); box-shadow: 0 2px 8px rgba(5,150,105,.45); cursor: pointer; }
.top100-fixo {
  display: block; background: var(--bg); border: 1px solid var(--border-strong); border-radius: 11px;
  padding: 12px 14px; color: var(--green); font-family: var(--mono); font-size: 13px; font-weight: 600;
}
.form-hint { margin-top: 14px; font-size: 12px; line-height: 1.6; color: var(--muted-2); }
.form-hint kbd { font-family: var(--mono); font-size: 10.5px; border: 1px solid var(--border-strong); border-radius: 5px; padding: 1px 5px; color: var(--muted); background: var(--bg); }

.results-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.results-head .filtro-altas { margin-left: auto; }
.results-meta { font-size: 12px; color: var(--muted); font-family: var(--mono); }
.results { display: flex; flex-direction: column; gap: 14px; min-height: 300px; }
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--muted-2); padding: 60px 20px; gap: 16px; flex: 1; }
.empty-ico { font-size: 40px; opacity: .5; }
.empty p { line-height: 1.6; font-size: 14px; }

/* ---- card de candidato ---- */
.cand {
  background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 20px;
  box-shadow: var(--shadow-sm);
  transition: border-color .25s, transform .25s var(--ease), box-shadow .25s;
  animation: rise .45s var(--ease) both;
}
.cand:hover { border-color: rgba(5,150,105,.35); transform: translateY(-2px); box-shadow: var(--shadow-md); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.cand-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cand-sel { display: flex; align-items: flex-start; padding-top: 4px; cursor: pointer; }
.cand-sel input { width: 18px; height: 18px; cursor: pointer; accent-color: var(--green); }

/* barra de envio em massa da triagem */
.lote-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 14px;
  background: var(--green-soft); border: 1px solid var(--green-2);
  border-radius: 10px; position: sticky; top: 0; z-index: 5;
}
.lote-count { font-weight: 600; color: var(--green-dim); font-size: .92rem; }
.lote-limpar {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: .85rem; text-decoration: underline; padding: 4px;
}
.lote-limpar:hover { color: var(--text); }
.lote-enviar {
  margin-left: auto; background: var(--green); color: var(--green-ink);
  border: none; border-radius: 8px; padding: 9px 16px; font-weight: 600;
  font-size: .92rem; cursor: pointer; transition: background .15s;
}
.lote-enviar:hover { background: var(--green-dim); }
.lote-enviar:disabled { opacity: .6; cursor: wait; }
.cand-id .cand-rank { font-family: var(--mono); color: var(--muted-2); font-size: 12px; }
.cand-id h3 { font-family: var(--display); font-size: 17.5px; font-weight: 600; margin-top: 3px; letter-spacing: -.2px; color: var(--text); }
.cand-id .cand-titulo { color: var(--muted); font-size: 13px; margin-top: 2px; }
.cand-id .cand-meta { color: var(--muted-2); font-size: 12px; margin-top: 6px; font-family: var(--mono); }
.cand-resumo { margin-top: 12px; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.cand-alerta { margin-top: 10px; font-size: 12.5px; color: #b45309; background: #fffbeb; border: 1px solid rgba(180,83,9,.25); border-radius: 9px; padding: 7px 11px; display: inline-block; }
.cand-veredito { margin-top: 10px; font-size: 13px; line-height: 1.55; color: var(--text); background: var(--green-soft); border: 1px solid rgba(5,150,105,.22); border-radius: 9px; padding: 8px 12px; }
.veredito-tag { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--green-dim); font-weight: 700; margin-right: 6px; }
.chk-profunda { display: flex; align-items: flex-start; gap: 9px; margin: 2px 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--muted); cursor: pointer; }
.chk-profunda input { accent-color: var(--green); width: 16px; height: 16px; margin-top: 1px; flex-shrink: 0; }
.chk-profunda strong { color: var(--text); }

/* ---- barra de filtros no topo dos resultados (estilo job board) ---- */
.filtros-bar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 11px 15px;
  padding: 13px 15px; margin-bottom: 16px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px;
}
.fbar-tag {
  display: inline-flex; align-items: center; gap: 7px; align-self: center;
  font-family: var(--mono); font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.4px; color: var(--green-dim); padding-right: 2px;
}
.fbar-item { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.fbar-item > span { font-size: 11px; color: var(--muted); font-weight: 500; }
.filtros-bar input[type=text], .filtros-bar input[type=number], .filtros-bar select {
  width: auto; min-width: 92px; padding: 8px 11px; border-radius: 9px; font-size: 13px;
}
.filtros-bar input[type=number] { max-width: 108px; }
.fbar-sen .f-senioridade { max-width: 268px; }
.fbar-chk {
  display: inline-flex; align-items: center; gap: 7px; align-self: center;
  font-size: 12.5px; color: var(--muted); cursor: pointer; margin: 0;
}
.fbar-chk input { accent-color: var(--green); width: 15px; height: 15px; flex-shrink: 0; }
.filtros-badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--green);
  color: #04140d; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.f-senioridade { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.f-senioridade label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); cursor: pointer; }
.f-senioridade input { accent-color: var(--green); width: 14px; height: 14px; }
.cand-skills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.skill { font-size: 11px; background: var(--bg-2); border: 1px solid var(--border); padding: 3px 9px; border-radius: 7px; color: var(--muted); font-family: var(--mono); }
.skill.more { color: var(--muted-2); }
.skill.hit { color: var(--green-dim); border-color: rgba(5,150,105,.45); background: var(--green-soft); font-weight: 600; }
.cand-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cand-perfil, .cand-convite {
  display: inline-flex; align-items: center; font-size: 12px; font-family: var(--mono);
  color: var(--green-dim); background: transparent; text-decoration: none; cursor: pointer;
  border: 1px solid rgba(5,150,105,.3); padding: 6px 13px; border-radius: 9px;
  transition: background .2s, border-color .2s, transform .15s var(--ease);
}
.cand-perfil:hover, .cand-convite:hover { background: var(--green-soft); border-color: var(--green); transform: translateY(-1px); }
.cand-convite:disabled { opacity: .55; cursor: wait; transform: none; }
.cand-zap { color: #1fbe5f; border-color: rgba(31,190,95,.35); }
.cand-zap:hover { background: rgba(31,190,95,.12); border-color: #1fbe5f; }
.cand-email { color: var(--ink-2); border-color: var(--border); }
.cand-email:hover { background: rgba(15,23,42,.04); color: var(--ink); border-color: rgba(15,23,42,.25); }
.cand-linkedin { color: #0077b5; border-color: rgba(0,119,181,.35); text-decoration: none; }
.cand-linkedin:hover { background: rgba(0,119,181,.10); border-color: #0077b5; }
.cand-cv { color: #8b5cf6; border-color: rgba(139,92,246,.35); }
.cand-cv:hover { background: rgba(139,92,246,.1); border-color: #8b5cf6; }

/* CV completo expandido no card */
.cand-cv-completo { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; animation: fadeIn .2s ease; }
.cv-contatos { font-size: 12px; color: var(--ink-2); margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.cv-contatos a { color: var(--green-dim); text-decoration: none; }
.cv-contatos a:hover { text-decoration: underline; }
.cv-texto { font-size: 11px; font-family: var(--mono); color: var(--ink-3); background: var(--bg-1); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; white-space: pre-wrap; word-break: break-word; max-height: 420px; overflow-y: auto; line-height: 1.6; }

/* ---- funil "Meus candidatos" (operador) ---- */
.funil { margin-top: 14px; }
.funil-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 13px; }
.funil-refresh { background: none; border: 1px solid var(--border); color: var(--muted); border-radius: 8px; width: 26px; height: 26px; cursor: pointer; transition: border-color .2s, color .2s; }
.funil-refresh:hover { border-color: var(--green); color: var(--green); }
.funil-lista { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.funil-vazio { font-size: 12px; color: var(--muted-2); margin: 0; }
.funil-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-2); }
.funil-info { min-width: 0; display: flex; flex-direction: column; }
.funil-info b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.funil-info span { font-size: 11px; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.funil-etapa { background: var(--bg-2); color: var(--muted); border: 1px solid var(--border); border-radius: 8px; font-size: 11px; font-family: var(--mono); padding: 4px 6px; flex-shrink: 0; cursor: pointer; }
.funil-item.etapa-aprovado { border-color: rgba(5,150,105,.5); }
.funil-item.etapa-entrevista { border-color: rgba(96,165,250,.45); }
.funil-item.etapa-rejeitado { opacity: .55; }

/* ---- score ring ---- */
.score-box { text-align: center; flex-shrink: 0; }
.ader-ring {
  --pct: 0; --col: var(--green);
  width: 78px; height: 78px; border-radius: 50%; position: relative;
  display: flex; align-items: center; justify-content: center; margin: 0 auto;
  background: conic-gradient(var(--col) calc(var(--pct) * 1%), rgba(15,23,42,.08) 0);
  transition: background .8s var(--ease);
}
.ader-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--bg); }
.ader-ring.alta { --col: var(--green); box-shadow: 0 6px 18px -6px rgba(5,150,105,.4); }
.ader-ring.media { --col: var(--amber); }
.ader-ring.baixa { --col: var(--muted-2); }
.ader-num { position: relative; z-index: 1; font-family: var(--mono); font-weight: 700; font-size: 20px; color: var(--text); }
.ader-num i { font-style: normal; font-size: 11px; color: var(--muted); margin-left: 1px; }
.ader-label { margin-top: 8px; font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; font-family: var(--mono); }
.ader-label.alta { color: var(--green-dim); }
.ader-label.media { color: var(--amber); }
.ader-label.baixa { color: var(--muted-2); }

/* ---- painel "vaga entendida" ---- */
.vaga-entendida { background: var(--green-soft); border: 1px solid rgba(5,150,105,.22); border-radius: 16px; padding: 17px 19px; animation: rise .45s var(--ease) both; }
.ve-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ve-titulo { font-size: 11px; text-transform: uppercase; letter-spacing: 1.6px; color: var(--muted); font-weight: 600; font-family: var(--mono); }
.parser-badge { font-size: 10px; font-family: var(--mono); border: 1px solid var(--border); color: var(--muted-2); padding: 2px 9px; border-radius: 999px; background: var(--bg); }
.parser-badge.fable { color: var(--green-dim); border-color: rgba(5,150,105,.45); background: var(--green-soft); }
.ve-meta { margin-top: 10px; font-size: 12px; color: var(--muted); }
.ve-meta b { color: var(--text); }
.filtro-altas { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); cursor: pointer; user-select: none; white-space: nowrap; }
.filtro-altas input { accent-color: var(--green); cursor: pointer; }

/* ============ modais ============ */
.modal-overlay { position: fixed; inset: 0; z-index: 55; background: rgba(15,23,42,.45); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; animation: fade .25s ease; }
.modal {
  position: relative; background: var(--bg); border: 1px solid var(--border);
  border-radius: 22px; padding: 32px; width: min(640px, 96vw);
  box-shadow: 0 40px 100px -20px rgba(15,23,42,.35);
  animation: panel-in .35s var(--ease);
}
.modal h3 { font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -.4px; margin-bottom: 8px; color: var(--text); }
.modal-sub { color: var(--muted); font-size: 14px; line-height: 1.6; margin-bottom: 20px; }
.sec-checks { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 4px 0 16px; }
.sec-checks li {
  display: flex; align-items: flex-start; gap: 13px; padding: 13px 15px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 13px;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.sec-checks li b { display: block; font-size: 14px; margin-bottom: 2px; color: var(--text); }
.sec-checks li small { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.sec-status {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  background: var(--bg-3); color: var(--muted);
}
.sec-checks li.ok { border-color: rgba(5,150,105,.35); background: var(--green-soft); }
.sec-checks li.ok .sec-status { background: rgba(5,150,105,.15); color: var(--green-dim); }
.sec-checks li.falha { border-color: rgba(220,38,38,.35); background: #fef2f2; }
.sec-checks li.falha .sec-status { background: rgba(220,38,38,.12); color: var(--red); }
.sec-foot { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin-bottom: 18px; }
.sec-foot strong { color: var(--text); }

.cv-drop {
  display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 16px 18px;
  border: 1.5px dashed rgba(5,150,105,.4); border-radius: 14px; cursor: pointer;
  background: var(--green-soft); transition: border-color .25s var(--ease), background .25s var(--ease);
}
.cv-drop:hover { border-color: rgba(5,150,105,.75); background: #d8f7ea; }
.cv-drop-ico { font-size: 22px; color: var(--green); flex-shrink: 0; }
.cv-drop-txt { font-size: 13px; line-height: 1.55; color: var(--muted); }
.cv-drop-txt b { color: var(--text); }
.cv-drop.lendo { border-style: solid; animation: cv-pulse 1.2s ease-in-out infinite; pointer-events: none; }
@keyframes cv-pulse {
  0%, 100% { border-color: rgba(5,150,105,.3); background: var(--green-soft); }
  50% { border-color: rgba(5,150,105,.85); background: #d8f7ea; }
}
.form-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.form-cols .field { margin-bottom: 4px; }
.form-cols .field.full { grid-column: 1 / -1; }
@media (max-width: 540px) { .form-cols { grid-template-columns: 1fr; } }
.consent { display: flex; align-items: flex-start; gap: 11px; margin: 20px 0; padding: 15px; background: var(--green-soft); border: 1px solid rgba(5,150,105,.2); border-radius: 13px; font-size: 13px; line-height: 1.6; color: var(--muted); cursor: pointer; }
.consent input { accent-color: var(--green); width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0; }
.consent strong { color: var(--text); }
.consent-mini { margin: -12px 2px 16px; font-size: 12px; line-height: 1.55; color: var(--muted-2); }
.consent-mini a { color: var(--green-dim); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.consent-mini a:hover { color: var(--green); }
.consent-mini strong { color: var(--muted); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* modal de vaga completa */
.vaga-modal { width: min(720px, 96vw); max-height: 88vh; display: flex; flex-direction: column; }
.vaga-modal h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vm-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 16px; }
.vm-chip {
  font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--border); color: var(--muted);
}
.vm-chip.reg { background: var(--teal-soft); border-color: rgba(13,148,136,.3); color: var(--teal); }
.vm-chip.pay { font-family: var(--mono, monospace); background: var(--green-soft); border-color: rgba(5,150,105,.3); color: var(--green-dim); }
.vm-corpo { overflow-y: auto; padding-right: 8px; margin-bottom: 20px; border-top: 1px solid var(--border); padding-top: 18px; }
.vm-corpo h4 { font-family: var(--display); font-size: 14.5px; color: var(--text); margin: 18px 0 8px; }
.vm-corpo h4:first-child { margin-top: 0; }
.vm-corpo p { font-size: 13.5px; line-height: 1.7; color: var(--muted); }
.vm-corpo p b { color: var(--text); }
.vm-corpo ul { margin: 0 0 4px 18px; display: flex; flex-direction: column; gap: 6px; }
.vm-corpo li { font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.vm-corpo li::marker { color: var(--green); }
.vm-actions { border-top: 1px solid var(--border); padding-top: 18px; }
.vaga-card { cursor: pointer; }

.cand-novo {
  display: inline-block; vertical-align: 2px; margin-left: 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  background: var(--green-soft); color: var(--green-dim); border: 1px solid rgba(5,150,105,.3);
}

/* modal de login do operador */
.login-modal { width: min(440px, 96vw); }
.login-erro { margin: 10px 0 0; font-size: 13px; color: var(--red); background: #fef2f2; border: 1px solid rgba(220,38,38,.25); border-radius: 10px; padding: 10px 13px; }
.login-erro + .modal-actions, .login-modal .modal-actions { margin-top: 18px; }
.google-signin-box { display: flex; flex-direction: column; align-items: center; min-height: 50px; margin: 6px 0 10px; }
.google-signin-box #google-signin-btn { display: flex; justify-content: center; }
.google-loading, .google-vazio { color: var(--muted); font-size: 13px; margin: 8px 0; text-align: center; }
.login-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; margin: 14px 0; text-transform: uppercase; letter-spacing: 1px; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.admin-toggle { margin: 4px 0 10px; }
.admin-toggle > summary { cursor: pointer; font-size: 12px; color: var(--muted); list-style: none; padding: 6px 0; }
.admin-toggle > summary::-webkit-details-marker { display: none; }
.admin-toggle > summary::before { content: "▸ "; transition: transform .2s; display: inline-block; }
.admin-toggle[open] > summary::before { content: "▾ "; }
.admin-toggle > summary:hover { color: var(--ink); }
.admin-form { display: flex; flex-direction: column; gap: 10px; padding: 12px 0 4px; }
.admin-form .btn-primary { align-self: flex-start; margin-top: 4px; }
.login-foot { color: var(--muted); font-size: 11px; margin: 14px 0 0; text-align: center; line-height: 1.6; }
.login-foot a { color: var(--green-dim); text-decoration: none; }
.login-foot a:hover { text-decoration: underline; }
.btn-secondary { width: 100%; padding: 11px 18px; background: transparent; color: var(--text); border: 1px solid var(--border-strong); border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s; }
.btn-secondary:hover { background: var(--green-soft); border-color: var(--green-dim); color: var(--green-dim); }

/* ---- Modal de planos (trial expirado) ---- */
.planos-modal { width: min(820px, 96vw); }
.planos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0 14px; }
@media (max-width: 640px) { .planos-grid { grid-template-columns: 1fr; } }
.plano-card { border: 1px solid var(--border); border-radius: 14px; padding: 22px 20px; background: #fff; position: relative; display: flex; flex-direction: column; }
.plano-card.plano-destaque { border-color: var(--green); box-shadow: 0 0 0 3px rgba(5,150,105,.10); background: linear-gradient(180deg, #ecfdf5, #fff 50%); }
.plano-tag { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--green); margin-bottom: 14px; }
.plano-preco { display: flex; align-items: baseline; gap: 4px; margin-bottom: 4px; }
.plano-preco .cifrao { font-size: 14px; color: var(--muted); font-weight: 600; }
.plano-preco .valor { font-family: var(--display); font-size: 38px; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.plano-preco .por { font-size: 13px; color: var(--muted); }
.plano-equiv { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.plano-feats { list-style: none; padding: 14px 0; margin: 0; flex: 1; display: flex; flex-direction: column; gap: 9px; border-top: 1px solid var(--border); }
.plano-feats li { font-size: 13.5px; color: var(--muted); padding-left: 20px; position: relative; line-height: 1.5; }
.plano-feats li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.plano-cta { width: 100%; margin-top: 6px; }
.planos-foot { font-size: 12px; color: var(--muted); text-align: center; margin-top: 14px; line-height: 1.65; }
.planos-foot a { color: var(--green-dim); text-decoration: none; font-weight: 600; }

/* ---- Modal de checkout (confirmar assinatura) ---- */
.checkout-modal { width: min(560px, 96vw); }
.checkout-resumo {
  margin: 20px 0; padding: 16px 18px;
  background: #f8fafc; border: 1px solid var(--border); border-radius: 12px;
}
.checkout-linha {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: 13.5px;
}
.checkout-linha:last-child { border-bottom: 0; }
.checkout-linha span { color: var(--muted); }
.checkout-linha strong { color: var(--ink); font-weight: 600; max-width: 65%; text-align: right; word-break: break-word; }
.checkout-contrato {
  margin: 14px 0; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: 10px;
}
.checkout-contrato > summary {
  cursor: pointer; padding: 4px 0; color: var(--ink); font-size: 13.5px;
}
.checkout-contrato[open] > summary { margin-bottom: 10px; }
.checkout-contrato ol {
  padding-left: 20px; margin: 8px 0 4px;
  font-size: 12.5px; color: var(--muted); line-height: 1.65;
}
.checkout-contrato li { margin-bottom: 7px; }
#checkout-pagar[disabled] { opacity: .45; cursor: not-allowed; }
.cv-extras { margin-top: 10px; padding: 8px 0; border-top: 1px dashed var(--border); }
.cv-extras > summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 8px 4px; user-select: none; }
.cv-extras > summary em { color: var(--muted-2); font-style: normal; }
.cv-extras[open] > summary { color: var(--text); font-weight: 600; }
.cv-extras > .form-cols { margin-top: 10px; }

/* Aviso explicito que os dados nao foram enviados ainda */
.aviso-envio {
  margin: 14px 0 4px; padding: 11px 14px;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px;
  font-size: 13.5px; color: #92400e; line-height: 1.55;
}
.aviso-envio strong { color: #78350f; }

/* Pulsa o botao de enviar quando o CV acabou de ser lido (chama atencao) */
@keyframes sylision-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(5,150,105,.55); transform: translateY(0); }
  50%      { box-shadow: 0 0 0 10px rgba(5,150,105,0);  transform: translateY(-2px); }
}
.btn-primary.pulse { animation: sylision-pulse 1.4s ease-in-out infinite; }

/* Tela de confirmacao apos envio do CV */
.cv-ok { text-align: center; padding: 30px 24px 18px; }
.cv-ok-ico {
  width: 72px; height: 72px; margin: 0 auto 18px;
  border-radius: 50%; background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 38px; font-weight: 700;
  box-shadow: 0 8px 28px rgba(5,150,105,.25);
}
.cv-ok h3 { font-family: var(--display, sans-serif); font-size: 22px; margin-bottom: 14px; color: var(--ink); }
.cv-ok p { font-size: 14.5px; color: var(--muted); line-height: 1.6; margin: 0 auto 12px; max-width: 460px; }
.cv-ok p strong { color: var(--ink); }
.cv-ok-foot { font-size: 12.5px !important; color: var(--muted-2) !important; margin-top: 16px !important; }
.cv-ok .btn-primary { margin-top: 18px; padding: 12px 32px; }

/* ---- Botão flutuante do operador (só admin vê) ---- */
.btn-op-flutuante {
  position: fixed; bottom: 22px; right: 22px; z-index: 60;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 16px; border-radius: 999px; border: 1px solid var(--border-strong);
  background: rgba(15, 23, 42, .92); color: #fff; font-size: 12.5px; font-weight: 600;
  letter-spacing: .03em; cursor: pointer; box-shadow: 0 10px 30px rgba(15, 23, 42, .25);
  backdrop-filter: blur(6px); transition: transform .15s, background .15s, box-shadow .15s;
}
.btn-op-flutuante:hover { transform: translateY(-2px); background: #1f2937; box-shadow: 0 14px 38px rgba(15, 23, 42, .35); }
.btn-op-flutuante .op-ico { font-size: 14px; opacity: .85; }
.operador-modal { width: min(720px, 96vw); max-height: 88vh; overflow-y: auto; }
.vagas-link { color: var(--green); font-weight: 600; text-decoration: none; border-bottom: 1px dashed currentColor; padding-bottom: 1px; margin-left: 4px; white-space: nowrap; }
.vagas-link:hover { color: var(--green-dim); border-bottom-style: solid; }
.footer-login { color: var(--muted-2); text-decoration: none; margin-left: 10px; padding: 2px 9px; border: 1px solid var(--border); border-radius: 999px; font-size: 11px; transition: color .2s, border-color .2s; }
.footer-login:hover { color: var(--text); border-color: var(--border-strong); }
.footer-login.on { color: var(--green-dim); border-color: rgba(5,150,105,.35); background: var(--green-soft); }

.policy-modal { width: min(720px, 96vw); max-height: 88vh; display: flex; flex-direction: column; }
.policy-doc { overflow-y: auto; padding-right: 8px; margin: 4px 0 22px; border-top: 1px solid var(--border); padding-top: 20px; }
.policy-doc h4 { font-family: var(--display); font-size: 15px; color: var(--text); margin: 20px 0 7px; }
.policy-doc h4:first-child { margin-top: 0; }
.policy-doc p { font-size: 13.5px; color: var(--muted); line-height: 1.7; margin-bottom: 8px; }
.policy-doc ul { margin: 4px 0 10px 18px; }
.policy-doc li { font-size: 13.5px; color: var(--muted); line-height: 1.65; margin-bottom: 5px; }
.policy-doc strong { color: var(--text); }
.policy-doc::-webkit-scrollbar { width: 8px; }
.policy-doc::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }

/* ============ cookie bar / toast / loaders ============ */
.cookie-bar {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: 18px; max-width: 760px; width: calc(100% - 36px);
  background: rgba(255,255,255,.96); backdrop-filter: blur(14px);
  border: 1px solid var(--border-strong); border-radius: 16px; padding: 15px 19px;
  box-shadow: var(--shadow-lg);
}
.cookie-bar p { font-size: 13px; color: var(--muted); line-height: 1.55; }
.cookie-bar a { color: var(--green-dim); text-decoration: none; }
.cookie-actions { display: flex; gap: 9px; flex-shrink: 0; }
@media (max-width: 560px) { .cookie-bar { flex-direction: column; align-items: stretch; text-align: center; } .cookie-actions { justify-content: center; } }

.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--text); border: 1px solid var(--text); color: #fff;
  padding: 13px 20px; border-radius: 13px; font-size: 14px; z-index: 70;
  box-shadow: var(--shadow-lg);
  opacity: 0; transition: opacity .25s, transform .25s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: #7f1d1d; border-color: #7f1d1d; }
.toast.ok { background: #064e3b; border-color: #064e3b; }
.spinner { display: inline-block; width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle; }
.loading-row { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 14px; padding: 40px; justify-content: center; }
.oracle-spinner { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(5,150,105,.2); border-top-color: var(--green); animation: spin .8s linear infinite; }
.loading-row .spinner { border-color: rgba(15,23,42,.12); border-top-color: var(--green); }

body.modal-open { overflow: hidden; }

/* ============ reveal ao scroll ============ */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].reveal-in { opacity: 1; transform: none; }
.steps [data-reveal]:nth-child(2), .bento [data-reveal]:nth-child(2), .policy [data-reveal]:nth-child(2) { transition-delay: .08s; }
.steps [data-reveal]:nth-child(3), .bento [data-reveal]:nth-child(3), .policy [data-reveal]:nth-child(3) { transition-delay: .16s; }
.bento [data-reveal]:nth-child(4), .policy [data-reveal]:nth-child(4) { transition-delay: .08s; }
.bento [data-reveal]:nth-child(5), .policy [data-reveal]:nth-child(5) { transition-delay: .16s; }
.policy [data-reveal]:nth-child(6) { transition-delay: .24s; }
.mani-line:nth-child(2) { transition-delay: .12s; }
.mani-line:nth-child(3) { transition-delay: .24s; }
.mani-foot { transition-delay: .4s; }

/* ---- planos "Para empresas" ---- */
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
@media (max-width: 900px) { .plan-grid { grid-template-columns: 1fr; max-width: 440px; margin-left: auto !important; margin-right: auto !important; } }
.plan-card {
  position: relative; display: flex; flex-direction: column; text-align: left;
  background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 30px 26px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.plan-card:hover { border-color: rgba(5,150,105,.4); transform: translateY(-4px); box-shadow: 0 14px 34px rgba(5,150,105,.1); }
.plan-card.destaque { border-color: rgba(5,150,105,.5); background: linear-gradient(180deg, var(--green-soft, #ecfdf5), var(--card) 45%); }
.plan-badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--green-ink); background: var(--green); border-radius: 999px; padding: 4px 14px; white-space: nowrap;
}
.plan-nome { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--green); margin-bottom: 12px; }
.plan-preco { display: flex; align-items: baseline; gap: 5px; margin-bottom: 6px; }
.plan-preco b { font-family: var(--display); font-size: 34px; font-weight: 700; letter-spacing: -.03em; color: var(--ink, #0f172a); line-height: 1; }
.plan-preco i { font-style: normal; font-size: 13px; color: var(--muted-2); font-weight: 600; }
.plan-sub { font-size: 13px; color: var(--muted); line-height: 1.6; margin-bottom: 18px; }
.plan-lista { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.plan-lista li { position: relative; padding-left: 22px; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.plan-lista li::before { content: '✓'; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.plan-btn { width: 100%; text-align: center; text-decoration: none; }
.plan-nota { text-align: center; margin-top: 26px; font-family: var(--mono); font-size: 11.5px; color: var(--muted-2); letter-spacing: .04em; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .orx-sweep, .orx-ring, .orx-r2, .orx-ticks, .orx-halo, .orx-core, .orx-core::before, .orx-blip, .orx-wave, .orx-orbit, .orx-iris, .orx-pupil, .orx-shadow, .bg-aurora, .grad { animation: none; }
}

/* ============================================================
   RITMO VERDE/BRANCO  —  faixas alternadas + costuras animadas
   ============================================================ */
:root {
  --green-tint-1: #f3fbf7;   /* topo da faixa verde suave */
  --green-tint-2: #e7f7ef;   /* base da faixa verde suave */
  --green-deep:   #04543f;   /* painel escuro (manifesto) */
  --green-deep-2: #067a5b;   /* borda clara do painel (cta) */
  --on-deep:       #effff8;  /* texto sobre painel escuro */
  --on-deep-muted: #a7e8cf;  /* texto secundario sobre painel */
}

/* ---- faixas verde-suave: #produto e #empresas ---- */
#produto.block.alt,
#empresas.block.alt {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(16,185,129,.10), transparent 60%),
    linear-gradient(180deg, var(--green-tint-1), #ffffff 50%, var(--green-tint-2));
  border-top: 1px solid rgba(5,150,105,.16);
  border-bottom: 1px solid rgba(5,150,105,.16);
}
/* cards precisam destacar mais sobre o verde suave */
#produto .feature,
#empresas .plan-card {
  border-color: rgba(5,150,105,.16);
  box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 10px 28px -18px rgba(5,80,60,.28);
}
#empresas .plan-card.destaque {
  border-color: rgba(5,150,105,.55);
  background: linear-gradient(180deg, #ffffff, #ffffff 55%, var(--green-tint-1));
}

/* ---- painel escuro 1: MANIFESTO ---- */
.manifesto {
  background:
    radial-gradient(70% 90% at 50% 18%, rgba(16,185,129,.28), transparent 70%),
    linear-gradient(160deg, var(--green-deep) 0%, #053e2f 55%, var(--green-deep) 100%);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.manifesto::before { background: radial-gradient(60% 70% at 50% 40%, rgba(110,231,183,.10), transparent 75%); }
.manifesto .mani-line { color: #ffffff; }
.manifesto .mani-grad {
  background: linear-gradient(110deg, #6ee7b7, #a7f3d0 55%, #ffffff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.manifesto .mani-foot { color: var(--on-deep-muted); }
.manifesto .mani-foot span { color: rgba(167,232,207,.7); }

/* ---- painel escuro 2: CTA FINAL ---- */
.cta-final .cta-card {
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(16,185,129,.30), transparent 60%),
    linear-gradient(165deg, var(--green-deep-2) 0%, var(--green-deep) 70%);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 30px 70px -28px rgba(4,84,63,.6);
}
.cta-final .cta-card h2 { color: #ffffff; }
.cta-final .cta-card .grad {
  background: linear-gradient(110deg, #6ee7b7, #ffffff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cta-final .cta-card p { color: var(--on-deep); }
.cta-final .cta-card p strong { color: #ffffff; }
.cta-final .cta-card .eyebrow { color: #6ee7b7; }
.cta-final .cta-card .btn-ghost {
  background: rgba(255,255,255,.06); color: #ffffff;
  border: 1px solid rgba(255,255,255,.35); box-shadow: none;
}
.cta-final .cta-card .btn-ghost:hover {
  background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.6);
}

/* ---- costura (linha) animada entre as faixas ---- */
.seam-fx { position: relative; height: 0; overflow: visible; z-index: 3; pointer-events: none; }
.seam-fx::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--green-2), var(--teal), transparent);
  transform: scaleX(0); transform-origin: 50% 50%; opacity: 0;
  will-change: transform, opacity;
}
.seam-fx.seam-in::before { animation: seam-draw .9s var(--ease) forwards; }
@keyframes seam-draw {
  from { transform: scaleX(0); opacity: 0; }
  60%  { opacity: 1; }
  to   { transform: scaleX(1); opacity: .9; }
}

/* ---- brilho verde com parallax atras dos paineis escuros ---- */
.manifesto, .cta-final { position: relative; }
.cta-final { overflow: hidden; }
.glow-blob {
  position: absolute; z-index: 0; width: 60vw; max-width: 720px; aspect-ratio: 1;
  left: 50%; top: 30%; translate: -50% 0;
  background: radial-gradient(circle, rgba(16,185,129,.22), transparent 65%);
  filter: blur(8px); pointer-events: none; will-change: transform;
}
.manifesto .mani-inner, .cta-final .cta-card { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .seam-fx.seam-in::before { animation: none; transform: scaleX(1); opacity: .8; }
  .glow-blob { display: none; }
}

/* ============================================================
   PREMIUM PASS — elevacao Stripe-grade (light)
   So adiciona profundidade/refino; nao mexe no layout/markup.
   Vem por ultimo de proposito: refina via tokens (pega todos os
   cards de uma vez) + alguns componentes-chave.
   ============================================================ */
:root {
  /* sombras em camadas, levemente esverdeadas = sensacao premium/macia */
  --shadow-sm: 0 1px 2px rgba(15,23,42,.05), 0 1px 1px rgba(15,23,42,.03);
  --shadow-md: 0 2px 4px rgba(15,23,42,.04), 0 10px 20px -8px rgba(15,23,42,.12), 0 18px 36px -16px rgba(6,78,59,.12);
  --shadow-lg: 0 2px 6px rgba(15,23,42,.05), 0 22px 44px -18px rgba(15,23,42,.18), 0 44px 88px -34px rgba(6,78,59,.20);
}

/* respiro do header sob a barra fixa (anchors nao ficam escondidos) */
html { scroll-padding-top: 84px; }

/* textura fina (grain) — assinatura premium, quase imperceptivel */
.bg-grain {
  display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* barra de navegacao com leve profundidade (estilo Stripe) */
.topbar { box-shadow: 0 1px 0 rgba(15,23,42,.04), 0 10px 30px -22px rgba(15,23,42,.20); }

/* halo suave atras do titulo do heroi: cristaliza o texto sobre a rede
   neural sem apagar a animacao (so clareia o centro-topo) */
.hero { isolation: isolate; }
.hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -8% -18% 30% -18%;
  background: radial-gradient(46% 40% at 50% 30%, rgba(255,255,255,.62), rgba(255,255,255,0) 72%);
}

/* eyebrow vira chip (pill) com pontinho — sinal moderno de SaaS */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 20px; padding: 6px 14px 6px 12px;
  border-radius: 999px; letter-spacing: 2px;
  color: var(--green-dim);
  background: var(--green-soft);
  border: 1px solid rgba(5,150,105,.20);
  box-shadow: 0 1px 2px rgba(5,150,105,.06);
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green-2); box-shadow: 0 0 0 3px rgba(16,185,129,.18);
}
/* chip sobre painel escuro (CTA final) */
.cta-final .cta-card .eyebrow {
  color: #6ee7b7; background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.20); box-shadow: none;
}
.cta-final .cta-card .eyebrow::before { background: #6ee7b7; box-shadow: 0 0 0 3px rgba(110,231,183,.22); }

/* foco acessivel e moderno em tudo que e interativo */
:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--green-2); outline-offset: 2px; border-radius: 8px;
}

/* cards "flutuam" mais no hover (sombra lg + borda verde). Inclui as versoes
   com id pra vencer a especificidade das faixas verdes. So sombra/borda —
   o translate de cada card continua valendo. */
.metric:hover, .step:hover, .feature:hover, .vaga-card:hover, .policy-card:hover,
#produto .feature:hover, #empresas .plan-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: rgba(5,150,105,.40);
}

@media (prefers-reduced-motion: reduce) {
  .bg-grain { display: none; }
}

/* ============================================================
   STARTUP MOTION PASS — micro-interacoes + profundidade viva
   (adiciona por cima; nao mexe no layout/markup existente)
   ============================================================ */

/* --- barra de progresso de leitura no topo --- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 120;
  pointer-events: none; border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, var(--green-dim), var(--green-2) 40%, var(--teal) 70%, var(--blue));
  box-shadow: 0 0 14px rgba(5,150,105,.5);
  transition: width .12s linear;
}

/* --- entrada mais cinematografica: sobe, escala e desfoca --- */
[data-reveal] {
  transform: translateY(30px) scale(.985);
  filter: blur(6px);
  transition: opacity .75s var(--ease), transform .85s var(--ease), filter .7s var(--ease);
  will-change: opacity, transform, filter;
}
[data-reveal].reveal-in { filter: none; }
/* stagger dos planos (data-reveal foi movido pros cards) */
.plan-grid [data-reveal]:nth-child(2) { transition-delay: .09s; }
.plan-grid [data-reveal]:nth-child(3) { transition-delay: .18s; }

/* --- cards viram "stacking contexts" p/ o brilho ficar atras do texto --- */
.feature, .step, .plan-card { isolation: isolate; }

/* --- brilho que segue o cursor (spotlight) --- */
.feature::before, .step::after, .plan-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: radial-gradient(220px circle at var(--sx, 50%) var(--sy, 0%),
              rgba(5,150,105,.13), transparent 62%);
  opacity: 0; transition: opacity .35s; pointer-events: none;
}
.feature:hover::before, .step:hover::after, .plan-card:hover::before { opacity: 1; }
/* spotlight na cor de cada card do bento */
.bento .feature:nth-child(2)::before { background: radial-gradient(220px circle at var(--sx,50%) var(--sy,0%), rgba(124,58,237,.14), transparent 62%); }
.bento .feature:nth-child(3)::before { background: radial-gradient(220px circle at var(--sx,50%) var(--sy,0%), rgba(37,99,235,.14), transparent 62%); }
.bento .feature:nth-child(4)::before { background: radial-gradient(220px circle at var(--sx,50%) var(--sy,0%), rgba(217,119,6,.14), transparent 62%); }
.bento .feature:nth-child(5)::before { background: radial-gradient(220px circle at var(--sx,50%) var(--sy,0%), rgba(13,148,136,.14), transparent 62%); }

/* --- micro-interacoes de icones e badges --- */
.feat-ico { transition: transform .3s var(--ease), box-shadow .3s; }
.feature:hover .feat-ico { transform: translateY(-2px) scale(1.06) rotate(-3deg); box-shadow: 0 10px 22px -10px rgba(5,150,105,.45); }
.step-n { display: inline-block; transition: transform .25s var(--ease), box-shadow .25s; }
.step:hover .step-n { transform: translateY(-3px); box-shadow: 0 8px 18px -8px rgba(5,150,105,.4); }

/* --- linha de fluxo animada conectando os 3 passos --- */
.steps { position: relative; }
.step { z-index: 1; }
@media (min-width: 821px) {
  .steps::before {
    content: ""; position: absolute; z-index: 0; top: 46px; left: 14%; right: 14%; height: 2px;
    background: repeating-linear-gradient(90deg, rgba(5,150,105,.5) 0 7px, transparent 7px 17px);
    background-size: 68px 100%;
    -webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
    mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
    animation: step-flow 1.3s linear infinite;
  }
}
@keyframes step-flow { to { background-position: 68px 0; } }

/* --- anel de gradiente girando no plano em destaque --- */
@property --sy-ring { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.plan-card.destaque::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: 0;
  background: conic-gradient(from var(--sy-ring),
              transparent 0 42%, var(--green-2) 50%, var(--teal) 58%, transparent 66% 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: sy-ring 5s linear infinite; pointer-events: none;
}
@keyframes sy-ring { to { --sy-ring: 360deg; } }

/* --- varredura suave no gradiente do manifesto --- */
.mani-grad { background-size: 200% 100%; animation: mani-sweep 6.5s var(--ease) infinite; }
.manifesto .mani-grad { background-size: 200% 100%; }
@keyframes mani-sweep { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

@media (prefers-reduced-motion: reduce) {
  .scroll-progress { transition: none; }
  [data-reveal] { transform: none; filter: none; transition: none; }
  .steps::before, .plan-card.destaque::after, .mani-grad { animation: none; }
}

/* ============================================================
   EDITORIAL SAAS v4 — redesign claro/convidativo abaixo do heroi
   Estilo Stripe/Notion: tipografia grande, cards macios, sombras
   suaves, cantos arredondados, toque de cor organizado.
   Heroi + oraculo ficam INTACTOS. Camada autoritativa de aparencia.
   ============================================================ */

/* -- tokens: cantos maiores + sombras difusas + hairlines suaves -- */
:root {
  --radius: 22px;
  --border: #edf1f5;
  --border-strong: #e3e8ef;
  --ink: #0b1220;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.04);
  --shadow-md: 0 12px 32px -14px rgba(15,23,42,.14);
  --shadow-lg: 0 34px 70px -30px rgba(15,23,42,.20);
  --band: linear-gradient(180deg, #ffffff, #f5faf8 52%, #ffffff);
}

/* -- ritmo e respiro das secoes -- */
.block { padding: 104px 28px; }
.block.alt,
#produto.block.alt, #empresas.block.alt {
  background: var(--band);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.sources { padding: 96px 28px 84px; }

/* -- titulos editoriais: grandes, leves, apertados -- */
.block-head { margin-bottom: 62px; max-width: 760px; margin-left: auto; margin-right: auto; }
.block-head h2, .sources-head h2 {
  font-size: clamp(32px, 4.6vw, 52px);
  font-weight: 600; letter-spacing: -1.7px; line-height: 1.08; margin-top: 18px;
}
.block-sub { font-size: 17.5px; line-height: 1.72; max-width: 600px; color: var(--muted); }

/* -- STEPS: cards macios, numero editorial, sem linha/conector techy -- */
.steps { gap: 24px; }
.steps::before { display: none !important; }
.step {
  background: #fff; border: 1px solid var(--border); border-radius: 22px;
  padding: 36px 30px; box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .4s, border-color .4s;
}
.step::before, .step::after { display: none !important; }
.step:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--border); }
.step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0; border: none; border-radius: 13px;
  font-family: var(--display); font-size: 15px; font-weight: 700;
  color: var(--green); background: var(--green-soft);
}
.steps .step:nth-child(2) .step-n, .steps .step:nth-child(3) .step-n {
  color: var(--green); background: var(--green-soft); border: none;
}
.step h3 { font-size: 21px; letter-spacing: -.4px; margin: 22px 0 10px; }
.step p { font-size: 15px; line-height: 1.72; color: var(--muted); }

/* -- BENTO: cards macios, icones em chip pastel (toque de cor organizado) -- */
.bento { gap: 22px; }
.feature {
  background: #fff; border: 1px solid var(--border); border-radius: 22px;
  padding: 34px; box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .4s, border-color .4s;
}
.feature::before { display: none !important; }
.feature:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--border); }
#produto .feature { border-color: var(--border); box-shadow: var(--shadow-sm); }
#produto .feature:hover { box-shadow: var(--shadow-lg); border-color: rgba(5,150,105,.28); }
.feat-ico {
  width: 54px; height: 54px; border: none !important; border-radius: 16px;
  font-size: 25px; margin-bottom: 20px;
}
.feature h3 { font-size: 19.5px; letter-spacing: -.35px; margin-bottom: 11px; }
.feature p { font-size: 15px; line-height: 1.72; }

/* -- VAGAS: cards macios -- */
.vaga-card { border-radius: 20px; padding: 26px; box-shadow: var(--shadow-sm); }
.vaga-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: rgba(5,150,105,.25); }
.vaga-top h3 { font-size: 17.5px; }

/* -- PLANOS: cards elevados, destaque limpo (sem anel girando) -- */
.plan-card {
  border-radius: 24px; padding: 38px 32px; background: #fff;
  border: 1px solid var(--border); box-shadow: var(--shadow-md);
  transition: transform .4s var(--ease), box-shadow .4s, border-color .4s;
}
.plan-card::before { display: none !important; }
.plan-card.destaque::after { display: none !important; }
.plan-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
#empresas .plan-card { border-color: var(--border); box-shadow: var(--shadow-md); }
.plan-card.destaque,
#empresas .plan-card.destaque {
  border: 1.5px solid rgba(5,150,105,.32);
  background: linear-gradient(180deg, var(--green-soft), #ffffff 34%);
  box-shadow: 0 34px 66px -30px rgba(5,150,105,.4);
  transform: translateY(-8px);
}
.plan-card.destaque:hover,
#empresas .plan-card.destaque:hover { transform: translateY(-12px); }
.plan-preco b { font-size: 40px; }

/* -- MANIFESTO: painel claro editorial (era escuro) -- */
.manifesto {
  padding: 124px 28px;
  background: linear-gradient(180deg, #ffffff, var(--green-soft) 50%, #ffffff);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.manifesto::before { display: none; }
.mani-line { font-weight: 600; letter-spacing: -1.8px; font-size: clamp(30px, 5.2vw, 56px); }
.manifesto .mani-line { color: var(--ink); }
.manifesto .mani-grad {
  background: linear-gradient(110deg, var(--green-dim), var(--green) 55%, var(--teal));
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.manifesto .mani-foot { color: var(--muted); }
.manifesto .mani-foot span { color: var(--muted-2); }

/* -- CTA FINAL: card claro convidativo (era escuro) -- */
.cta-final { padding: 104px 28px; }
.cta-final .cta-card {
  padding: 76px 40px; border-radius: 30px;
  background: linear-gradient(180deg, var(--green-soft), #ffffff 62%);
  border: 1px solid rgba(5,150,105,.2);
  box-shadow: var(--shadow-lg);
}
.cta-card h2 { font-size: clamp(34px, 5vw, 56px); font-weight: 600; letter-spacing: -1.9px; line-height: 1.06; }
.cta-final .cta-card h2 { color: var(--ink); }
.cta-final .cta-card .grad {
  background: linear-gradient(110deg, var(--green-dim), var(--green) 55%, var(--teal));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cta-final .cta-card p { color: var(--muted); font-size: 17.5px; line-height: 1.7; }
.cta-final .cta-card p strong { color: var(--ink); }
.cta-final .cta-card .eyebrow { color: var(--green-dim); background: var(--green-soft); border: 1px solid rgba(5,150,105,.16); box-shadow: none; }
.cta-final .cta-card .eyebrow::before { background: var(--green-2); box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
.cta-final .cta-card .btn-ghost { background: #fff; color: var(--text); border: 1px solid var(--border-strong); box-shadow: var(--shadow-sm); }
.cta-final .cta-card .btn-ghost:hover { background: var(--bg-2); border-color: rgba(5,150,105,.4); }

/* -- FOOTER + SOURCES: mais ar, cards macios -- */
.footer { padding: 76px 28px 46px; background: #fbfcfe; }
.sources-bloco { border-radius: 22px; padding: 32px; box-shadow: var(--shadow-sm); }
.src-chip { border-radius: 14px; box-shadow: var(--shadow-sm); }

/* ============================================================
   FUNIL DE CANDIDATOS (Kanban por empresa, dentro da Triagem)
   ============================================================ */

/* -- CRM fixo dentro da Triagem (abaixo dos resultados) -- */
.tri-tab-count {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  background: var(--green-soft); color: var(--green-dim);
  border: 1px solid rgba(5,150,105,.3); border-radius: 999px; padding: 1px 8px;
}
.crm-title { margin: 34px 0 10px; padding-top: 24px; border-top: 1px solid var(--border); }
.crm-title h3 {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  font-size: 20px; letter-spacing: .02em; color: var(--text);
}

/* -- CRM de Vagas: cards de vaga no mesmo padrao do board de candidatos -- */
.vagas-crm .kanban-head .btn-primary { padding: 10px 18px; font-size: 14px; white-space: nowrap; }
.vaga-skills { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 2px; }
.vaga-skill {
  font-family: var(--mono); font-size: 10.5px; color: var(--green-dim);
  background: var(--green-soft); border: 1px solid rgba(5,150,105,.25);
  border-radius: 999px; padding: 2px 8px;
}
.vaga-cand { font-size: 12px; color: var(--muted); font-weight: 600; }
.kanban-col.vaga-etapa-fechada .pipe-card { opacity: .72; }

/* -- modal de anuncio (Agente Anunciante) -- */
.modal.anuncio { max-width: 640px; }
.anuncio-repos-titulo { font-size: 13px; font-weight: 600; color: var(--text); margin: 16px 0 8px; }
.anuncio-repos { display: flex; flex-wrap: wrap; gap: 8px; }
.anuncio-repo {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none;
  border: 1px solid var(--border); background: var(--bg-2);
  border-radius: 10px; padding: 8px 12px; transition: border-color .15s, background .15s;
}
.anuncio-repo:hover { border-color: rgba(5,150,105,.4); background: var(--green-soft); }
.anuncio-repo em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* -- board -- */
.kanban[hidden] { display: none !important; }
.kanban-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }

/* -- metricas do funil (ATS) -- */
.kanban-stats {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px;
}
.kanban-stats[hidden] { display: none !important; }
.kb-stat {
  font-size: 12px; color: var(--muted); background: var(--bg-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 13px;
}
.kb-stat b { color: var(--text); font-family: var(--mono); font-size: 13px; margin-right: 3px; }
.kb-stat.ok { border-color: rgba(5,150,105,.35); background: var(--green-soft); }
.kb-stat.ok b { color: var(--green-dim); }

/* -- ferramentas do funil: busca + filtro por vaga + exportar -- */
.kanban-tools { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.kanban-tools input[type=search] {
  flex: 2 1 220px; background: var(--bg); border: 1px solid var(--border-strong);
  border-radius: 11px; padding: 10px 14px; color: var(--text); font-family: inherit; font-size: 13px;
}
.kanban-tools select {
  flex: 1 1 160px; width: auto; max-width: 320px; font-size: 13px; padding: 10px 14px;
}
.kanban-tools .btn-ghost { padding: 9px 16px; font-size: 13px; border-radius: 10px; white-space: nowrap; }
.kanban-sub { font-size: 13px; color: var(--muted); line-height: 1.5; max-width: 640px; }
.kanban-refresh { padding: 9px 16px; font-size: 13px; border-radius: 10px; white-space: nowrap; }
.kanban-board {
  display: flex; gap: 12px; align-items: flex-start;
  overflow-x: auto; padding-bottom: 10px;
  scrollbar-width: thin;
}
.kanban-board > .loading-row, .kanban-board > .empty { flex: 1; }

/* -- coluna -- */
.kanban-col {
  flex: 1 0 218px; min-width: 218px; max-width: 300px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 16px;
  padding: 12px; transition: border-color .15s, background .15s, box-shadow .15s;
}
.kanban-col.drag-over {
  border-color: var(--green); background: var(--green-soft);
  box-shadow: 0 0 0 3px rgba(5,150,105,.12), var(--shadow-md);
}
.kanban-col-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding: 2px 4px; }
.kanban-col-nome {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.6px; color: var(--muted);
}
.kanban-col.etapa-aceitou .kanban-col-nome { color: var(--green-dim); }
.kanban-col.etapa-nao_aceitou .kanban-col-nome { color: var(--muted-2); }
.kanban-col-count {
  font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--muted);
  background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px;
}
.kanban-col-body { display: flex; flex-direction: column; gap: 10px; min-height: 90px; }
.pipe-vazio { font-size: 12px; color: var(--muted-2); line-height: 1.5; padding: 14px 6px; text-align: center; }

/* -- card -- */
.pipe-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: 13px;
  padding: 12px 13px; box-shadow: var(--shadow-sm); cursor: grab;
  transition: box-shadow .2s, border-color .2s, transform .15s var(--ease), opacity .15s;
}
.pipe-card:hover { border-color: rgba(5,150,105,.35); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.pipe-card.dragging { opacity: .45; cursor: grabbing; transform: rotate(1.5deg) scale(.98); }
.kanban-col.etapa-aceitou .pipe-card { border-color: rgba(5,150,105,.35); background: var(--green-soft); }
.kanban-col.etapa-nao_aceitou .pipe-card { opacity: .72; }
.pipe-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.pipe-nome { font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.3; }
.pipe-ader {
  flex-shrink: 0; font-family: var(--mono); font-size: 11px; font-weight: 700;
  border-radius: 7px; padding: 2px 7px; border: 1px solid var(--border);
  color: var(--muted); background: var(--bg-2);
}
.pipe-ader.alta { color: var(--green-dim); background: var(--green-soft); border-color: rgba(5,150,105,.35); }
.pipe-ader.media { color: var(--amber); background: var(--amber-soft); border-color: rgba(217,119,6,.3); }
.pipe-dias {
  flex-shrink: 0; font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  border-radius: 7px; padding: 2px 6px; color: var(--muted-2);
  background: var(--bg-2); border: 1px solid var(--border);
}
.pipe-dias.parado { color: var(--amber); background: var(--amber-soft); border-color: rgba(217,119,6,.3); }
.pipe-titulo { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.pipe-vaga {
  font-size: 11px; font-family: var(--mono); color: var(--violet);
  background: var(--violet-soft); border: 1px solid rgba(124,58,237,.22);
  border-radius: 7px; padding: 3px 8px; margin-top: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pipe-nota-view {
  font-size: 12px; color: var(--text); background: var(--amber-soft);
  border-left: 3px solid var(--amber); border-radius: 0 8px 8px 0;
  padding: 6px 9px; margin-top: 8px; line-height: 1.45; white-space: pre-wrap;
}

/* -- acoes do card -- */
.pipe-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.pipe-link, .pipe-btn {
  font-family: var(--mono); font-size: 11px; color: var(--green-dim);
  background: transparent; border: 1px solid rgba(5,150,105,.25);
  border-radius: 7px; padding: 3px 9px; cursor: pointer; text-decoration: none;
  transition: background .2s, border-color .2s;
}
.pipe-link:hover, .pipe-btn:hover { background: var(--green-soft); border-color: var(--green); }
.pipe-btn:disabled { opacity: .55; cursor: wait; }
.pipe-rm { color: var(--rose); border-color: rgba(225,29,72,.25); margin-left: auto; }
.pipe-rm:hover { background: #fff1f2; border-color: var(--rose); }

/* -- nota (edicao) + historico -- */
.pipe-extra { margin-top: 10px; }
.pipe-extra[hidden] { display: none !important; }
.pipe-nota-edit { font-size: 12.5px; border-radius: 9px; padding: 8px 10px; margin-bottom: 6px; resize: vertical; }
.pipe-salvar { display: inline-flex; font-weight: 700; }
.pipe-hist { list-style: none; display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; color: var(--muted); }
.pipe-hist li { line-height: 1.4; }
.pipe-hist b { color: var(--text); }
.pipe-hist-quando { font-family: var(--mono); font-size: 10.5px; color: var(--muted-2); margin-right: 4px; }
.pipe-hist-vazio { font-size: 12px; color: var(--muted-2); }

/* -- mover sem arrastar (touch / teclado / acessibilidade) -- */
.pipe-mover-touch {
  display: flex; align-items: center; gap: 7px; margin-top: 9px;
  font-size: 10.5px; font-family: var(--mono); color: var(--muted-2);
  text-transform: uppercase; letter-spacing: 1px;
}
.pipe-move {
  flex: 1; width: auto; font-size: 12px; padding: 5px 8px; border-radius: 8px;
  background: var(--bg-2); border: 1px solid var(--border);
}

/* -- botao + Funil nos resultados da triagem -- */
.cand-funil {
  display: inline-flex; align-items: center; font-size: 12px; font-family: var(--mono);
  font-weight: 700; color: var(--green-ink); background: var(--green); cursor: pointer;
  border: 1px solid var(--green); padding: 6px 13px; border-radius: 9px;
  transition: background .2s, transform .15s var(--ease), opacity .2s;
}
.cand-funil:hover { background: var(--green-dim); transform: translateY(-1px); }
.cand-funil:disabled { cursor: default; transform: none; }
.cand-funil.ok { background: var(--green-soft); color: var(--green-dim); border-color: rgba(5,150,105,.4); opacity: 1; }

/* -- responsivo: colunas viram lista rolavel no celular -- */
@media (max-width: 720px) {
  .kanban-head { flex-direction: column; align-items: flex-start; }
  .kanban-col { flex: 0 0 82vw; min-width: 82vw; max-width: 82vw; }
  .pipe-card { cursor: default; }
}

/* ============================================================
   ORACULO 3D — drone (canvas WebGL sobre o conteudo)
   ============================================================ */
#orx3d-canvas { position: fixed; inset: 0; z-index: 25; pointer-events: none; display: block; }
/* com o 3D ativo, o oraculo CSS cede o lugar (mantem o espaco no layout) */
body.orx3d .oracle-scene > * { display: none; }
/* veu da transicao entre paginas */
.page-veil {
  position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 120% at 50% 38%, #ffffff 55%, #ecfdf5 100%);
  transition: opacity .42s ease;
}
.page-veil.on { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  #orx3d-canvas, .page-veil { display: none !important; }
}

/* ============================================================
   APP v4 — Triagem/CRM fluido: barra glass, cards ricos,
   skeleton loading, anúncio em 2 colunas
   ============================================================ */

/* -- barra do app: vidro fosco + nav com estado ativo -- */
.app-bar {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(15,23,42,.04);
}
.app-nav a { position: relative; }
.app-nav a.ativa { background: var(--green-soft); color: var(--green-dim); }
.app-nav a.ativa::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px;
  height: 2px; border-radius: 2px; background: var(--green);
}

/* âncoras param abaixo da barra fixa */
#triagem-view, #vagas-view, #kanban-view { scroll-margin-top: 76px; }

/* -- painéis da triagem com mais profundidade -- */
.app-triagem .panel {
  background: var(--bg); box-shadow: var(--shadow-sm);
  transition: box-shadow .25s var(--ease), border-color .25s;
}
.app-triagem .panel:hover { box-shadow: var(--shadow-md); }
.app-triagem .form-panel {
  border-top: 3px solid var(--green);
  background: linear-gradient(180deg, #f7fdfa 0%, var(--bg) 120px);
}

/* -- cabeçalho das seções do CRM -- */
.crm-eyebrow {
  display: block; font-family: var(--mono); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 2.4px; color: var(--green-dim);
  margin-bottom: 4px;
}
.crm-title h3 { display: flex; align-items: center; gap: 10px; }

/* ============================================================
   CRM DE CONTATOS EM DESTAQUE  +  VAGAS COLAPSADO
   O funil de contatos é o foco: bloco realçado logo abaixo da
   triagem. O pipeline de vagas fica dobrado num <details>.
   ============================================================ */
.kanban-foco {
  margin-top: 28px;
  padding: 6px 24px 24px;
  background: linear-gradient(180deg, var(--green-soft), var(--bg-2) 60%);
  border: 1px solid rgba(5,150,105,.30);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px -18px rgba(5,150,105,.45), var(--shadow-sm);
}
.kanban-foco .crm-title { margin-top: 0; padding-top: 20px; border-top: none; }
.kanban-foco .crm-title h3 { font-size: 23px; }
.kanban-foco .crm-eyebrow { color: var(--green-dim); }
/* as 3 colunas dividem a largura por igual: CRM cabe na tela sem rolar */
.kanban-foco .kanban-board > .kanban-col { flex: 1 1 0; max-width: none; }

/* pipeline de vagas: dobrado por padrão, fora do caminho */
.vagas-collapse {
  margin-top: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-2);
  overflow: hidden;
}
.vagas-summary {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; cursor: pointer; list-style: none;
  user-select: none; transition: background .15s;
}
.vagas-summary::-webkit-details-marker { display: none; }
.vagas-summary:hover { background: var(--bg); }
.vagas-summary .crm-eyebrow { margin: 0; }
.vagas-summary-txt {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; color: var(--text);
}
.vagas-summary-hint {
  margin-left: auto; font-family: var(--mono); font-size: 11px;
  color: var(--muted-2); text-transform: uppercase; letter-spacing: 1.4px;
}
.vagas-summary-hint::after { content: " ▸"; }
.vagas-collapse[open] .vagas-summary-hint::after { content: " ▾"; }
.vagas-collapse[open] .vagas-summary { border-bottom: 1px solid var(--border); }
.vagas-collapse .vagas-crm { padding: 8px 18px 18px; }

/* -- entrada dos cards: fade-up com stagger (fluidez) -- */
@keyframes card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.kanban-col-body .pipe-card { animation: card-in .34s var(--ease) backwards; }
.kanban-col-body .pipe-card:nth-child(2) { animation-delay: .05s; }
.kanban-col-body .pipe-card:nth-child(3) { animation-delay: .1s; }
.kanban-col-body .pipe-card:nth-child(4) { animation-delay: .15s; }
.kanban-col-body .pipe-card:nth-child(n+5) { animation-delay: .2s; }
.pipe-card:active { cursor: grabbing; }
.pipe-btn:active, .cand-funil:active { transform: scale(.96); }

/* -- coluna com faixa de cor por etapa -- */
.kanban-col { position: relative; overflow: hidden; }
.kanban-col::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--border-strong); opacity: .8;
}
.kanban-col.vaga-etapa-rascunho::before { background: var(--muted-2); }

/* ============================================================
   BANCO VIVO · três fontes  +  EMPRESAS DE REALOCAÇÃO
   ============================================================ */
.fontes-tri {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  max-width: 1080px; margin: 4px auto 0;
}
.fonte-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px 24px 22px; box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.fonte-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--green-2); }
.fonte-n {
  display: inline-block; font-family: var(--mono); font-size: 12px; font-weight: 700;
  color: var(--green-dim); letter-spacing: 1px; margin-bottom: 12px;
  padding: 3px 9px; background: var(--green-soft); border-radius: 999px;
}
.fonte-card h3 { font-family: var(--display); font-size: 18px; margin-bottom: 8px; color: var(--text); }
.fonte-card p { font-size: 14.5px; line-height: 1.55; color: var(--muted); }

.realoc-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  max-width: 1080px; margin: 0 auto;
}
.realoc-step {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px 26px; box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.realoc-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--green-2); }
.realoc-ico {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 13px; margin-bottom: 16px; font-size: 22px;
  color: var(--green-ink); background: linear-gradient(135deg, var(--green-2), var(--green));
  box-shadow: 0 8px 20px -8px rgba(5,150,105,.5);
}
.realoc-step h3 { font-family: var(--display); font-size: 19px; margin-bottom: 9px; color: var(--text); }
.realoc-step p { font-size: 15px; line-height: 1.6; color: var(--muted); }
.realoc-modelo { max-width: 620px; margin: 36px auto 0; text-align: center; font-size: 15px; line-height: 1.6; color: var(--muted-2); }
.realoc-modelo strong { color: var(--text); }
.realoc-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 24px; }

/* -- overlay tela cheia (detalhe + envio de CV/ZIP) -- */
.app-realoc { padding: 0; background: var(--bg); backdrop-filter: none; }
.app-realoc .overlay-panel {
  max-width: none; margin: 0; border: 0; border-radius: 0; padding: 0;
  box-shadow: none; min-height: 100vh;
}
.realoc-doc { max-width: 860px; margin: 0 auto; padding: 20px 4px 40px; }
.realoc-doc-head { text-align: center; margin-bottom: 44px; }
.realoc-doc-head h1 {
  font-family: var(--display); font-size: clamp(28px, 4.6vw, 46px); line-height: 1.08;
  letter-spacing: -.02em; margin: 14px 0 20px; color: var(--text);
}
.realoc-lead { font-size: 17px; line-height: 1.7; color: var(--muted); max-width: 720px; margin: 0 auto; }
.realoc-passos { display: grid; gap: 16px; margin-bottom: 30px; }
.realoc-passos article {
  background: var(--bg-2); border: 1px solid var(--border); border-left: 3px solid var(--green);
  border-radius: 14px; padding: 20px 24px;
}
.realoc-passos b { display: block; font-family: var(--display); font-size: 17px; color: var(--text); margin-bottom: 6px; }
.realoc-passos p { font-size: 15px; line-height: 1.6; color: var(--muted); }
.realoc-lgpd {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--green-soft); border: 1px solid #cdeede; border-radius: 14px;
  padding: 18px 22px; margin-bottom: 46px;
}
.realoc-lgpd-ico {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  background: var(--green); color: var(--green-ink);
}
.realoc-lgpd p { font-size: 14.5px; line-height: 1.6; color: var(--green-dim); }
.realoc-envio {
  background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: 34px 30px; box-shadow: var(--shadow-md);
}
.realoc-envio h2 { font-family: var(--display); font-size: 26px; margin-bottom: 8px; color: var(--text); }
.realoc-envio-sub { font-size: 15px; line-height: 1.6; color: var(--muted); margin-bottom: 22px; }
.realoc-drop {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  padding: 34px 22px; border: 2px dashed var(--border-strong); border-radius: 16px;
  background: var(--bg-2); cursor: pointer; transition: border-color .25s, background .25s;
}
.realoc-drop:hover, .realoc-drop.hover { border-color: var(--green); background: var(--green-soft); }
.realoc-drop-ico { font-size: 30px; color: var(--green); }
.realoc-drop-txt { font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.realoc-drop-txt b { color: var(--text); }
.realoc-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0 4px; }
.realoc-field { display: flex; flex-direction: column; gap: 6px; }
.realoc-field span { font-size: 13px; color: var(--muted); font-weight: 500; }
.realoc-field input {
  padding: 11px 13px; border: 1px solid var(--border-strong); border-radius: 10px;
  font-size: 14.5px; background: var(--bg); color: var(--text); font-family: inherit;
}
.realoc-field input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.realoc-consent { margin: 18px 0 20px; }
.realoc-progresso { margin-top: 20px; }
.realoc-bar { height: 8px; border-radius: 999px; background: var(--bg-3); overflow: hidden; }
.realoc-bar span { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--green-2), var(--green)); transition: width .35s var(--ease); }
.realoc-log { font-family: var(--mono); font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.realoc-fim { text-align: center; margin-top: 26px; font-size: 14.5px; color: var(--muted); }
.realoc-fim a { color: var(--green-dim); font-weight: 600; }

@media (max-width: 860px) {
  .fontes-tri, .realoc-steps, .realoc-form { grid-template-columns: 1fr; }
}
/* funil de candidatos (3 etapas): em contato = azul, aceitou = verde, nao = rosa */
.kanban-col.etapa-em_contato::before { background: var(--blue); }
.kanban-col.etapa-aceitou::before { background: var(--green); }
.kanban-col.etapa-nao_aceitou::before { background: var(--rose); opacity: .5; }
/* board de vagas: mantém a régua de cores própria */
.kanban-col.vaga-etapa-aberta::before { background: var(--blue); }
.kanban-col.vaga-etapa-triagem::before { background: var(--violet); }
.kanban-col.vaga-etapa-entrevistas::before { background: var(--amber); }
.kanban-col.vaga-etapa-fechada::before { background: var(--green); }

/* -- avatar de iniciais no card de candidato -- */
.pipe-top { align-items: center; }
.pipe-top .pipe-nome { flex: 1; min-width: 0; }
.pipe-avatar {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  background: hsl(var(--h) 65% 93%); color: hsl(var(--h) 55% 32%);
  border: 1px solid hsl(var(--h) 45% 85%);
}

/* -- card de vaga rico -- */
.vaga-card { border-left: 3px solid var(--border-strong); }
.kanban-col.vaga-etapa-rascunho .vaga-card { border-left-color: var(--muted-2); }
.kanban-col.vaga-etapa-aberta .vaga-card { border-left-color: var(--blue); }
.kanban-col.vaga-etapa-triagem .vaga-card { border-left-color: var(--violet); }
.kanban-col.vaga-etapa-entrevistas .vaga-card { border-left-color: var(--amber); }
.kanban-col.vaga-etapa-fechada .vaga-card { border-left-color: var(--green); }
.vaga-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.vaga-badge {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  border-radius: 7px; padding: 2px 7px; border: 1px solid var(--border);
  color: var(--muted); background: var(--bg-2); white-space: nowrap;
}
.vaga-badge.sen { color: var(--violet); background: var(--violet-soft); border-color: rgba(124,58,237,.25); }
.vaga-badge.rem { color: var(--teal); background: var(--teal-soft); border-color: rgba(13,148,136,.3); }
.vaga-badge.loc { color: var(--blue); background: var(--blue-soft); border-color: rgba(37,99,235,.25); }
.vaga-badge.sal { color: var(--green-dim); background: var(--green-soft); border-color: rgba(5,150,105,.3); }
.vaga-desc {
  font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 7px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vaga-funil { margin-top: 9px; }
.vaga-funil-txt { font-size: 11.5px; color: var(--muted); }
.vaga-funil-txt b { color: var(--text); font-family: var(--mono); }
.vaga-funil-txt b.ok { color: var(--green-dim); }
.vaga-funil-bar {
  height: 4px; border-radius: 4px; background: var(--bg-3); margin-top: 5px; overflow: hidden;
}
.vaga-funil-bar span {
  display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--green-2), var(--green));
  transition: width .6s var(--ease);
}
.vaga-funil.vazia { font-size: 11.5px; color: var(--muted-2); line-height: 1.45; }
.vaga-funil.vazia b { color: var(--green-dim); }
.vaga-acoes .vaga-btn-triar {
  color: var(--green-ink); background: var(--green); border-color: var(--green); font-weight: 700;
}
.vaga-acoes .vaga-btn-triar:hover { background: var(--green-dim); }
.vaga-acoes .vaga-btn-anunciar { font-weight: 700; }

/* -- skeleton shimmer (carregamento com a forma do board) -- */
.sk-col { pointer-events: none; }
.sk-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: 13px;
  padding: 13px; display: flex; flex-direction: column; gap: 8px;
}
.sk-linha {
  height: 10px; border-radius: 6px;
  background: linear-gradient(90deg, var(--bg-3) 25%, #e9eef4 45%, var(--bg-3) 65%);
  background-size: 220% 100%;
  animation: sk-shimmer 1.3s ease-in-out infinite;
}
.sk-linha.w40 { width: 40%; } .sk-linha.w50 { width: 50%; }
.sk-linha.w60 { width: 60%; } .sk-linha.w80 { width: 80%; } .sk-linha.w90 { width: 90%; }
@keyframes sk-shimmer { from { background-position: 180% 0; } to { background-position: -60% 0; } }

/* -- modal de anúncio em 2 colunas -- */
.modal.anuncio { max-width: 860px; }
.anuncio-eyebrow {
  display: inline-block; font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2.2px; color: var(--green-dim);
  background: var(--green-soft); border: 1px solid rgba(5,150,105,.25);
  border-radius: 999px; padding: 4px 12px; margin-bottom: 10px;
}
.anuncio-passos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.anuncio-passo {
  font-size: 12px; color: var(--muted); background: var(--bg-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px;
}
.anuncio-passo b {
  font-family: var(--mono); color: var(--green-dim); margin-right: 5px;
}
.anuncio-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 760px) { .anuncio-grid { grid-template-columns: 1fr; } }
.anuncio-doc {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px; padding: 16px;
}
.anuncio-doc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.anuncio-doc-tag {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1.8px; color: var(--muted-2);
}
.anuncio-copiar { padding: 7px 14px; font-size: 12.5px; border-radius: 9px; }
.anuncio-doc textarea { font-family: var(--mono); font-size: 12.5px; line-height: 1.55; background: var(--bg); }
.anuncio-doc input { font-weight: 600; background: var(--bg); }
.anuncio-canais { display: flex; flex-direction: column; gap: 10px; }
.anuncio-repos { flex-direction: column; gap: 8px; }
.anuncio-repo {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 13px; border-radius: 12px;
  transition: border-color .2s, background .2s, transform .18s var(--ease), box-shadow .2s;
}
.anuncio-repo:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.anuncio-repo-ico { flex-shrink: 0; color: var(--text); opacity: .85; }
.anuncio-repo-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.anuncio-repo-info b { font-size: 13px; color: var(--text); line-height: 1.25; }
.anuncio-repo-info em {
  font-style: normal; font-family: var(--mono); font-size: 10.5px; color: var(--muted-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.anuncio-repo-go {
  margin-left: auto; flex-shrink: 0; font-family: var(--mono); font-size: 11px;
  font-weight: 700; color: var(--green-dim);
}
.anuncio-nota { font-size: 12px; color: var(--muted-2); line-height: 1.55; }

@media (prefers-reduced-motion: reduce) {
  .kanban-col-body .pipe-card { animation: none; }
  .sk-linha { animation: none; }
}

/* ===================== ANALYTICS AO VIVO ===================== */
.analytics { margin-top: 48px; padding-top: 8px; }
.an-live {
  font-family: var(--mono); font-size: 11px; color: var(--green);
  letter-spacing: .5px; vertical-align: middle; margin-left: 8px;
  animation: anPulse 2s ease-in-out infinite;
}
@keyframes anPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.an-intro { max-width: 720px; color: var(--muted); font-size: 14.5px; line-height: 1.65; margin: 10px 0 26px; }

.an-hero {
  display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: 20px;
  align-items: stretch; margin-bottom: 34px;
}
.an-big {
  background: linear-gradient(150deg, var(--green-soft), var(--card));
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: 26px 28px; display: flex; flex-direction: column; justify-content: center;
  box-shadow: var(--shadow-md);
}
.an-big-num {
  font-family: var(--display); font-weight: 700; font-size: clamp(38px, 6vw, 60px);
  line-height: 1; color: var(--green-dim); letter-spacing: -1px;
}
.an-big-lbl { margin-top: 10px; color: var(--muted); font-size: 14px; }
.an-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.an-kpi {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 20px 16px; display: flex; flex-direction: column; justify-content: center;
}
.an-kpi-num { font-family: var(--display); font-weight: 700; font-size: 28px; color: var(--text); }
.an-kpi:first-child .an-kpi-num { color: var(--green); }
.an-kpi-lbl { margin-top: 6px; font-size: 12.5px; color: var(--muted-2); font-family: var(--mono); }

.an-sub {
  font-family: var(--display); font-size: 17px; font-weight: 600; color: var(--text);
  margin: 8px 0 16px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.an-note { font-family: var(--mono); font-size: 11px; color: var(--muted-2); font-weight: 400; letter-spacing: .3px; }
.an-tech-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-bottom: 40px; }
.an-tech-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 18px 16px; transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.an-tech-card:hover { border-color: var(--green-2); transform: translateY(-2px); }
.an-tech-nome { display: block; font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: .4px; }
.an-tech-total { display: block; font-family: var(--display); font-weight: 700; font-size: 30px; color: var(--text); margin: 4px 0 2px; }
.an-tech-lbl { display: block; font-size: 11.5px; color: var(--muted-2); }
.an-tech-hoje { color: var(--green); font-weight: 600; margin-left: 4px; }

.an-treino {
  background: linear-gradient(160deg, var(--card), var(--green-soft));
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: 30px; box-shadow: var(--shadow-md);
}
.an-treino-head h3, .an-treino-head h4 { font-family: var(--display); font-size: 20px; color: var(--text); margin: 6px 0 10px; line-height: 1.3; }
.an-treino-sub { max-width: 760px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.an-treino-body { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.an-empty { color: var(--muted-2); font-size: 14px; padding: 24px 0; grid-column: 1 / -1; }

.an-vaga {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 20px;
}
.an-vaga-tag {
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--green); background: var(--green-soft); border: 1px solid var(--green-2);
  padding: 3px 8px; border-radius: 6px;
}
.an-vaga h5 { font-family: var(--display); font-size: 18px; color: var(--text); margin: 12px 0 4px; }
.an-vaga-meta { font-family: var(--mono); font-size: 12px; color: var(--muted-2); margin-bottom: 12px; }
.an-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.an-chip {
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px;
}
.an-metricas { display: grid; grid-template-rows: 1fr 1fr; gap: 14px; }
.an-met { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; }
.an-met-num { font-family: var(--display); font-weight: 700; font-size: 34px; color: var(--green-dim); }
.an-met-lbl { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }

.an-resurf { grid-column: 1 / -1; }
.an-resurf-lbl { display: block; font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.an-seeds { display: flex; flex-wrap: wrap; gap: 10px; }
.an-seed {
  display: flex; align-items: center; gap: 10px; background: var(--card);
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px;
}
.an-seed-bom { border-color: var(--green-2); background: var(--green-soft); }
.an-seed-rank { font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--muted-2); }
.an-seed-bom .an-seed-rank { color: var(--green-dim); }
.an-seed-nome { font-size: 14px; color: var(--text); font-weight: 600; }
.an-seed-meta { font-family: var(--mono); font-size: 11px; color: var(--muted-2); }

.an-spark { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 5px; height: 60px; margin-top: 8px; }
.an-bar { flex: 1; min-width: 6px; background: linear-gradient(180deg, var(--green-2), var(--green-dim)); border-radius: 4px 4px 0 0; opacity: .85; }
.an-spark-lbl { grid-column: 1 / -1; font-family: var(--mono); font-size: 11px; color: var(--muted-2); margin-top: 4px; }

@media (max-width: 780px) {
  .an-hero { grid-template-columns: 1fr; }
  .an-treino-body { grid-template-columns: 1fr; }
}

/* ===================== O JEITO VELHO (comparativo boolean x Sylision) ===================== */
.compara {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  max-width: 980px;
  margin: 30px auto 0;
}
.comp-col {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: var(--shadow-sm);
}
.comp-col.old { background: var(--bg-2); border-color: var(--border-strong); }
.comp-col.new { border-color: var(--green); box-shadow: 0 0 0 1px var(--green) inset, var(--shadow-md); }
.comp-col h3 {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.comp-col.old h3 { color: var(--muted); }
.comp-col.new h3 { color: var(--green-dim); }
.comp-col ul { list-style: none; margin: 0; padding: 0; }
.comp-col li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 13px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
}
.comp-col li:last-child { margin-bottom: 0; }
.comp-col.old li { color: var(--muted); }
.comp-col.old li::before {
  content: "✕"; position: absolute; left: 0; top: 0;
  color: var(--red); font-weight: 700;
}
.comp-col.new li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--green-2); font-weight: 700;
}
.jeito-velho-foot { margin-top: 24px; }
@media (max-width: 720px) {
  .compara { grid-template-columns: 1fr; }
}