/* Identidade da LIGA (padrão): preto de engrenagem + vinho da seta da logo,
   sobre papel claro. Os nomes das variáveis são históricos (--navy/--red) —
   o que muda entre liga e imersão são os VALORES. */
:root {
  --navy: #17171B;
  --navy-2: #2A2A31;
  --navy-soft: #202025;
  --navy-line: rgba(255,255,255,0.14);
  --white: #FFFFFF;
  --offwhite: #F7F5F2;
  --graphite: #37343A;
  --graphite-soft: #6B6570;
  --line: #E6E2DE;
  --red: #8A1E2D;
  --red-2: #A93245;
  --red-hover: #6D1523;
  --red-glow: rgba(138,30,45,0.30);
  --navy-glow: rgba(23,23,27,0.28);
  --good: #15803D;
  --good-soft: #EAF6EE;
  --pending: #B45309;
  --pending-soft: #FDF3E3;
  --internal: #64748B;
  --internal-soft: #EEF1F5;
  --lunch: #B8752E;
  --lunch-soft: #FBF1E4;
  --lunch-dark: #8A5A21;
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Archivo", "Inter", ui-sans-serif, system-ui, sans-serif;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --gradient-primary: linear-gradient(135deg, var(--navy) 0%, var(--red) 100%);
  --gradient-primary-15: linear-gradient(135deg, rgba(23,23,27,0.10) 0%, rgba(138,30,45,0.08) 100%);
  --shadow-soft: 0 1px 2px rgba(23,23,27,0.05), 0 10px 28px -10px rgba(23,23,27,0.14);
  --shadow-lift: 0 16px 36px -10px rgba(23,23,27,0.22);
  color-scheme: light;
}

/* Dentro do acervo da imersão, o visual original SP (navy + vermelho) volta. */
body.imersao {
  --navy: #081B33;
  --navy-2: #123259;
  --navy-soft: #0F2947;
  --offwhite: #F5F7FA;
  --graphite: #334155;
  --graphite-soft: #475569;
  --line: #E2E6EC;
  --red: #D31E24;
  --red-2: #F04E4E;
  --red-hover: #B5151A;
  --red-glow: rgba(211,30,36,0.32);
  --navy-glow: rgba(8,27,51,0.28);
  --gradient-primary-15: linear-gradient(135deg, rgba(8,27,51,0.10) 0%, rgba(211,30,36,0.08) 100%);
  --shadow-soft: 0 1px 2px rgba(8,27,51,0.05), 0 10px 28px -10px rgba(8,27,51,0.14);
  --shadow-lift: 0 16px 36px -10px rgba(8,27,51,0.22);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  background-color: var(--offwhite);
  color: var(--graphite);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; }
.num { font-variant-numeric: tabular-nums; }
button { font-family: inherit; }
hr.hair { border: none; border-top: 1px solid var(--line); margin: 0; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #C7CDD8; }
::-webkit-scrollbar-thumb:hover { background: #A7AFBE; }

.eyebrow {
  font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 11px; font-weight: 700; color: var(--graphite-soft); margin: 0;
}

.btn-primary {
  font-size: 13.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 12px 22px; border-radius: var(--radius-sm); border: none; color: #fff; cursor: pointer;
  background: var(--red);
  transition: background 0.15s ease, transform 0.1s ease;
}
.btn-primary:hover { background: var(--red-hover); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-ghost {
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 9px 16px; border-radius: var(--radius-md); border: 1px solid var(--navy-line);
  background: transparent; color: #fff; cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.btn-ghost:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.08); }

.field { display: flex; flex-direction: column; gap: 7px; }
.field label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--graphite-soft);
}
.field input, .field select {
  font: inherit; font-size: 14.5px; padding: 11px 13px; border-radius: var(--radius-sm);
  background: var(--white); border: 1px solid #CBD2DC; color: var(--graphite);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field input:focus, .field select:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-glow);
}
.field select option { background-color: var(--white); color: var(--graphite); }

.logo-mark { display: block; object-fit: contain; }

@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeSlideIn 0.32s cubic-bezier(0.16, 1, 0.3, 1); }
@media (prefers-reduced-motion: reduce) { .fade-in { animation: none; } }

/* Mesma linguagem de "montagem" da tela de login, reaproveitada onde listas carregam */
@keyframes staggerIn { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
.stagger-in { animation: staggerIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
@media (prefers-reduced-motion: reduce) { .stagger-in { animation: none; } }

/* Carrosséis da liga (Início e landing): filmstrip de fotos e marquee de
   logos — CSS puro, trilha duplicada para loop contínuo, pausa no hover. */
.strip { overflow: hidden; position: relative; }
.strip::before, .strip::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 48px; z-index: 2; pointer-events: none;
}
.strip::before { left: 0; background: linear-gradient(90deg, var(--strip-fade, var(--offwhite)), transparent); }
.strip::after { right: 0; background: linear-gradient(270deg, var(--strip-fade, var(--offwhite)), transparent); }
.strip-track {
  display: flex; align-items: center; gap: 14px; width: max-content;
  animation: stripScroll var(--strip-speed, 46s) linear infinite;
}
.strip:hover .strip-track { animation-play-state: paused; }
.strip.reverse .strip-track { animation-direction: reverse; }
@keyframes stripScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .strip-track { animation: none; flex-wrap: wrap; width: auto; }
  .strip::before, .strip::after { display: none; }
}
.strip-photo {
  width: 250px; height: 170px; flex: none; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  filter: saturate(0.96);
}
.logo-chip {
  display: flex; align-items: center; justify-content: center; flex: none;
  height: 62px; padding: 0 26px; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.logo-chip img { height: 26px; max-width: 120px; object-fit: contain; display: block; }
.logo-chip.dark { background: var(--navy); border-color: var(--navy); }

/* Marquee de empresas (referência aprovada pelo Marcell): band PRETO sobre
   página clara, logos monocromáticos brancos em duas fileiras
   contra-rotantes, fade nas bordas, pausa no hover. Usar este componente
   para os próximos carrosséis de logos. */
.marquee-band {
  padding: 44px 0 50px; background: var(--navy);
  border-top: 1px solid var(--navy); border-bottom: 1px solid var(--navy);
}
.marquee-label {
  display: flex; align-items: center; gap: 16px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.22em;
  color: rgba(255,255,255,0.45); margin: 0 0 32px;
}
.marquee-label .rule { height: 1px; flex: 1; background: rgba(255,255,255,0.14); }
.marquee {
  --gap: clamp(3rem, 8vw, 6rem);
  display: flex; flex-direction: column; gap: 30px; overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 18%, black 82%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 18%, black 82%, transparent);
}
.m-row { display: flex; overflow: hidden; gap: var(--gap); }
.m-track {
  display: flex; flex: none; align-items: center; gap: var(--gap);
  animation: marquee var(--duration, 45s) linear infinite;
  will-change: transform; backface-visibility: hidden;
}
.m-row.reverse .m-track { animation-direction: reverse; }
.marquee:hover .m-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(calc(-100% - var(--gap))); } }
.m-logo {
  display: block; height: 27px; width: auto; flex: none;
  filter: brightness(0) invert(1); opacity: 0.85; transition: opacity 0.3s;
}
.m-logo:hover { opacity: 1; }
.m-word {
  flex: none; font-family: var(--font-display); font-weight: 600; font-size: 25px;
  text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255,255,255,0.85); line-height: 1;
}
@media (prefers-reduced-motion: reduce) {
  .m-track { animation: none; }
  .m-row { overflow-x: auto; }
  .m-track[aria-hidden="true"] { display: none; }
  .marquee { mask-image: none; -webkit-mask-image: none; }
}

@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton {
  background: linear-gradient(90deg, #EDEFF3 25%, #E1E5EC 50%, #EDEFF3 75%);
  background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm);
  color: transparent !important;
}