/* ==========================================================================
   03 — COMPONENTES · botões, menu, faixa, marquee, cards com holofote…
   ========================================================================== */

/* ---------- Botões ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 56px; padding: 0 30px; border-radius: 999px; overflow: hidden; isolation: isolate;
  font-weight: 800; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; text-align: center;
  background: var(--cream); color: var(--ink);
  transition: transform 0.5s var(--ease-out), color 0.4s, box-shadow 0.4s;
  box-shadow: 0 14px 40px rgba(215, 156, 115, 0.22);
}
/* preenchimento cobre que sobe no hover */
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--copper); transform: translateY(101%); border-radius: 50% 50% 0 0 / 120% 120% 0 0; transition: transform 0.55s var(--ease-out), border-radius 0.55s var(--ease-out); }
.btn:hover::before { transform: translateY(0); border-radius: 0; }
.btn:hover { box-shadow: 0 18px 50px rgba(215, 156, 115, 0.4); }
.btn:active { transform: scale(0.97); }
.btn--lg { min-height: 64px; padding: 0 36px; font-size: 15px; }
.btn--sm { min-height: 44px; padding: 0 22px; font-size: 12px; }
.btn--block { width: 100%; }
.btn--ghost { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn--ghost:hover { color: var(--ink); box-shadow: none; }
.btn__arrow { position: relative; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--ink); transition: transform 0.4s var(--ease-out); }
.btn__arrow::before { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border: solid var(--cream); border-width: 1.6px 1.6px 0 0; transform: translate(-65%, -50%) rotate(45deg); }
.btn:hover .btn__arrow { transform: translateX(5px) rotate(-45deg); }

.link-arrow { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream); padding: 6px 0; position: relative; }
.link-arrow::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--copper); transform: scaleX(0.3); transform-origin: left; transition: transform 0.5s var(--ease-out); }
.link-arrow:hover::after { transform: scaleX(1); }
.link-arrow i { width: 18px; height: 1px; background: currentColor; position: relative; transition: width 0.4s var(--ease-out); }
.link-arrow i::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border: solid currentColor; border-width: 1px 1px 0 0; transform: rotate(45deg); }
.link-arrow:hover i { width: 30px; }

.note { margin-top: 14px; font-size: 13px; color: var(--text-mute); }
.cta-row { display: flex; flex-direction: column; align-items: center; margin-top: clamp(44px, 6vw, 72px); text-align: center; }

/* ---------- Progresso de rolagem ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100; transform-origin: left; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--copper-deep), var(--cream)); }

/* ---------- Faixa de vagas ---------- */
.ticker { position: relative; z-index: 60; background: var(--cream); color: var(--ink); overflow: hidden; }
.ticker .mq { padding: 9px 0; }
.ticker__item { display: inline-block; padding-right: 3.2em; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.ticker__item::after { content: ""; display: inline-block; vertical-align: middle; width: 5px; height: 5px; margin-left: 3.2em; border-radius: 50%; background: var(--copper-deep); }
.ticker__item b { font-weight: 800; }

/* ---------- Marquee (motor em js/modules/marquee-engine.js) ---------- */
[data-marquee] { overflow: hidden; }
.mq__track { display: flex; width: max-content; will-change: transform; }
.mq__set { display: flex; flex: none; align-items: center; white-space: nowrap; }

/* ---------- Menu ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 70; transform: translateY(-110%); transition: transform 0.6s var(--ease-out); padding: 12px 0; background: var(--glass); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border-bottom: 1px solid var(--line); }
.nav.is-visible { transform: none; }
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav__links { display: flex; gap: clamp(18px, 3vw, 40px); }
.nav__links a { position: relative; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); padding: 6px 0; transition: color 0.3s; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--copper); transform: scaleX(0); transform-origin: right; transition: transform 0.45s var(--ease-out); }
.nav__links a:hover { color: var(--cream); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }

.brand { display: inline-flex; flex-direction: column; line-height: 1; }
.brand b { font-family: var(--font-display); font-weight: 400; font-size: 24px; color: var(--cream); letter-spacing: 0.01em; }
.brand small { margin-top: 5px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.42em; text-transform: uppercase; color: var(--copper); }
.brand--lg b { font-size: 34px; }

/* ---------- Spotlight nos cards (a luz segue o cursor) ---------- */
.spot { position: relative; --sx: 50%; --sy: 50%; }
.spot::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.4s;
  background: radial-gradient(420px circle at var(--sx) var(--sy), rgba(215, 156, 115, 0.2), transparent 60%);
}
.spot:hover::before { opacity: 1; }

/* ---------- Listas ---------- */
.ticks { display: grid; gap: 14px; }
.ticks li { position: relative; padding-left: 32px; color: var(--text-soft); font-size: 16px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 9px; border: solid var(--copper); border-width: 0 0 2px 2px; transform: rotate(-45deg) scale(0.9); }
.ticks b { color: var(--cream); font-weight: 700; }
.ticks--no li::before { width: 14px; height: 14px; top: 5px; border: 0; transform: none; background:
  linear-gradient(45deg, transparent 45%, #d9786a 45% 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, #d9786a 45% 55%, transparent 55%); }

/* ---------- Acordeão (FAQ) ---------- */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__trigger { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 4px; text-align: left; font-size: clamp(17px, 1.6vw, 20px); font-weight: 600; color: var(--cream); transition: color 0.3s, padding 0.4s var(--ease-out); }
.accordion__trigger:hover { color: var(--copper); padding-left: 14px; }
.accordion__icon { flex: none; width: 36px; height: 36px; position: relative; border-radius: 50%; border: 1px solid var(--line-strong); transition: transform 0.5s var(--ease-out), background 0.3s, border-color 0.3s; }
.accordion__icon::before, .accordion__icon::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--cream); transform: translate(-50%, -50%); transition: opacity 0.3s, background 0.3s; }
.accordion__icon::before { width: 12px; height: 1.5px; }
.accordion__icon::after { width: 1.5px; height: 12px; }
.accordion__item.is-open .accordion__icon { transform: rotate(180deg); background: var(--copper); border-color: var(--copper); }
.accordion__item.is-open .accordion__icon::before { background: var(--ink); }
.accordion__item.is-open .accordion__icon::after { opacity: 0; }
.accordion__panel { max-height: 0; overflow: hidden; transition: max-height 0.55s var(--ease-out); }
.accordion__panel > div { padding: 0 4px 28px; max-width: 680px; color: var(--text-soft); }