/* ==========================================================================
   Gildson Soares — Portfólio
   Base compartilhada: tokens, tipografia, cabeçalho, botões, seletor de modo.
   ========================================================================== */

:root {
  --bg: #0b0d11;          /* grafite profundo */
  --bg-2: #0f1217;
  --surface: #141820;
  --surface-2: #1a1f29;
  --line: #232a36;
  --line-2: #2f3846;
  --ink: #eef2f8;
  --ink-2: #a3adbd;
  --ink-3: #6b7587;
  --accent: #3d8bff;      /* azul elétrico — o único acento */
  --accent-ink: #06101f;
  --accent-soft: rgba(61, 139, 255, 0.14);
  --ok: #3ccf91;

  --f: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* escala tipográfica */
  --t-xs: 12px;
  --t-sm: 14px;
  --t-md: 16px;
  --t-lg: 20px;
  --t-xl: clamp(24px, 2.4vw, 30px);
  --t-2xl: clamp(32px, 4.2vw, 52px);
  --t-3xl: clamp(42px, 7.4vw, 104px);

  /* escala de espaço */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: clamp(40px, 5vw, 64px); --s6: clamp(64px, 7.5vw, 96px); --s7: 168px;

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1280px;
  --radius: 14px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f);
  font-size: var(--t-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.rotulo {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rotulo b { color: var(--accent); font-weight: 500; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- modo (cliente × recrutador) ---------- */

html[data-modo="cliente"] [data-so="recrutador"],
html[data-modo="recrutador"] [data-so="cliente"] { display: none !important; }

/* ---------- botões ---------- */

.btn {
  --h: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--h);
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink);
  font: 600 15px/1 var(--f);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease), color 0.25s;
}
.btn:hover { border-color: var(--ink-2); }
.btn:active { transform: scale(0.98); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--primario {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn--primario:hover { background: #5b9dff; border-color: #5b9dff; }
.btn--pequeno { --h: 40px; padding: 0 16px; font-size: 14px; }

.seta { transition: transform 0.3s var(--ease); }
a:hover .seta, button:hover .seta { transform: translateX(4px); }
.seta--diag { transform: none; }
a:hover .seta--diag { transform: translate(3px, -3px); }

/* ---------- cabeçalho ---------- */

.topo {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: 14px 0;
  transition: background 0.4s var(--ease), border-color 0.4s, padding 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.topo.rolado {
  background: rgba(11, 13, 17, 0.78);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-color: var(--line);
  padding: 10px 0;
}
.topo .wrap { display: flex; align-items: center; gap: var(--s2); }

.marca {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-right: auto;
}
.marca__selo {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  font-size: 13px; font-weight: 800; letter-spacing: 0.02em;
}
.marca__selo i { font-style: normal; color: var(--accent); }
.marca__nome { font-size: 15px; }
.marca__nome small { display: block; font-weight: 500; font-size: 12px; color: var(--ink-3); letter-spacing: 0; line-height: 1.3; }

/* seletor de modo */
.modo {
  position: relative;
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(20, 24, 32, 0.8);
}
.modo button {
  position: relative;
  z-index: 1;
  border: 0;
  background: none;
  color: var(--ink-2);
  font: 600 13px/1 var(--f);
  padding: 10px 16px;
  min-height: 36px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.3s;
}
.modo button[aria-pressed="true"] { color: var(--accent-ink); }
.modo__pilula {
  position: absolute;
  top: 4px; bottom: 4px; left: 0;
  width: var(--pilula-l, 50%);
  border-radius: 999px;
  background: var(--accent);
  transform: translateX(var(--pilula-x, 4px));
  transition: transform 0.45s var(--ease), width 0.45s var(--ease);
}

.topo__cta { flex: none; }

@media (max-width: 860px) {
  .marca__nome small { display: none; }
  .topo__cta { display: none; }
}
@media (max-width: 520px) {
  .marca__nome { display: none; }
  .topo .wrap { gap: 10px; }
  .modo button { padding: 9px 11px; font-size: 12px; }
}
@media (max-width: 350px) {
  .modo button { padding: 9px 8px; font-size: 11px; }
}

/* ---------- troca de modo: conteúdo some/volta com suavidade ---------- */

.trocando main { opacity: 0.001; transform: translateY(8px); }
main { overflow-x: clip; transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }

/* ---------- rodapé ---------- */

.rodape {
  border-top: 1px solid var(--line);
  padding: var(--s4) 0 calc(var(--s4) + env(safe-area-inset-bottom));
  font-size: var(--t-sm);
  color: var(--ink-3);
}
.rodape .wrap { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center; justify-content: space-between; }
.rodape nav { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); }
.rodape a { text-decoration: none; color: var(--ink-2); }
.rodape a:hover { color: var(--ink); }

/* ---------- janela da agenda (Google Agenda) ---------- */

.agenda {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: 16px;
  visibility: hidden; opacity: 0;
  transition: opacity .3s var(--ease), visibility 0s linear .3s;
}
.agenda.aberta { visibility: visible; opacity: 1; transition: opacity .3s var(--ease); }
.agenda__fundo { position: absolute; inset: 0; background: rgba(5, 7, 10, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.agenda__caixa {
  position: relative;
  width: min(100%, 980px); height: min(100%, 760px);
  display: flex; flex-direction: column;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
  box-shadow: 0 40px 120px -30px rgba(0,0,0,.9);
  transform: translateY(16px) scale(.98);
  transition: transform .4s var(--ease);
}
.agenda.aberta .agenda__caixa { transform: none; }
.agenda__topo { display: flex; align-items: center; gap: 16px; padding: 10px 12px 10px 18px; border-bottom: 1px solid var(--line); }
.agenda__topo .rotulo { margin-right: auto; }
.agenda__aba { font-size: 13px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.agenda__aba:hover { color: var(--ink); }
.agenda__fechar {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-2); background: transparent; color: var(--ink);
  font: 400 22px/1 var(--f); cursor: pointer;
}
.agenda iframe { flex: 1; width: 100%; border: 0; background: #fff; }
.agenda-aberta body { overflow: hidden; }
@media (max-width: 520px) {
  .agenda { padding: 0; }
  .agenda__caixa { width: 100%; height: 100%; border-radius: 0; border: 0; }
  .agenda__aba { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .agenda, .agenda__caixa { transition: none; }
}

/* ---------- troca de idioma ---------- */

.idioma {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 10px;
  border-radius: 999px; border: 1px solid var(--line-2);
  font: 700 12px/1 var(--mono); letter-spacing: .06em;
  color: var(--ink-2); text-decoration: none;
  transition: color .25s, border-color .25s;
}
.idioma:hover { color: var(--ink); border-color: var(--ink-2); }