/* =============================================================================
   Infinoos People — estilos específicos (usa css/base.css)
   ========================================================================== */

@keyframes marquee25 { 0% { transform: translateX(0); } 100% { transform: translateX(-25%); } }

/* ----------------------------------------------------------------- hero -- */
.ppl-hero {
  position: relative; min-height: 100vh; overflow: hidden;
  display: flex; align-items: center; background: #0B1526;
}
.ppl-hero__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.18); transform-origin: 60% 50%;
}
.ppl-hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11, 21, 38, 0.85) 0%, rgba(11, 21, 38, 0.7) 40%, rgba(11, 21, 38, 0.35) 100%),
    radial-gradient(600px 500px at 15% 60%, rgba(59, 184, 255, 0.28), transparent 65%);
}
.ppl-hero__inner {
  position: relative; z-index: 2;
  max-width: 1760px; margin: 0 auto;
  padding: 88px 32px 72px; width: 100%; color: #fff;
}
.ppl-hero__copy {
  max-width: 760px; display: flex; flex-direction: column; gap: 22px;
  animation: pageEnterIn .55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ppl-hero__copy h1 {
  font-size: clamp(38px, 6vw, 84px);
  line-height: 1.05; letter-spacing: -0.03em;
  text-wrap: balance; color: #fff;
}
.ppl-hero__copy h1 .thin { font-weight: 300; color: rgba(255, 255, 255, 0.85); }
.ppl-hero__copy h1 strong { font-weight: 700; }
.ppl-hero__copy p {
  font-size: clamp(16px, 1.5vw, 20px); line-height: 1.55;
  color: rgba(255, 255, 255, 0.75); max-width: 56ch;
}

/* ----------------------------------------------------------- statement -- */
.ppl-statement {
  max-width: 1760px; margin: 0 auto; padding: 0 32px;
  min-height: 100vh; text-align: center;
  display: flex; flex-direction: column; gap: 26px;
  align-items: center; justify-content: center;
}
.ppl-statement__tag {
  font-size: 12.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-dim);
}
.ppl-statement__h2 {
  font-size: clamp(46px, 8vw, 128px);
  font-weight: 700; line-height: 1.02; letter-spacing: -0.035em;
  max-width: 16ch; text-wrap: balance;
  background: linear-gradient(90deg, #3BB8FF 0%, #8B5CF6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ppl-statement__sub {
  font-size: clamp(15px, 1.4vw, 19px);
  color: var(--text-dim); line-height: 1.6; max-width: 62ch;
}

/* --------------------------------------------------------------- módulos -- */
.ppl-modules {
  max-width: 1760px; margin: 0 auto;
  padding: clamp(60px, 10vh, 120px) 32px 420px;
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: flex-start;
}

/* ---------------------------------------------------------------- faixa -- */
/* A faixa é puxada para dentro do respiro inferior da seção de módulos
   (margin-top negativa). O `--faixa-vao-abaixo` controla a distância entre ela e
   todo o conteúdo seguinte — App do colaborador, planos, complementos e FAQ
   sobem ou descem juntos ao mexer nesse valor. */
.ppl-marquee {
  --faixa-vao-abaixo: 140px;
  margin-top: -300px; margin-bottom: var(--faixa-vao-abaixo);
  padding: 24px 0 32px; overflow: hidden;
  background: #0B1526; color: #fff;
  position: relative; z-index: 2;
}
.ppl-marquee__track {
  display: flex; white-space: nowrap;
  animation: marquee25 12s linear infinite;
  will-change: transform;
}
.ppl-marquee__seq {
  display: flex; align-items: center; flex-shrink: 0;
  gap: 32px; padding-right: 32px;
}
.ppl-marquee__seq span {
  font-size: clamp(48px, 8vw, 110px); letter-spacing: -0.03em; line-height: 1;
}
.ppl-marquee__seq .bold { font-weight: 700; }
.ppl-marquee__seq .light { font-weight: 300; color: rgba(255, 255, 255, 0.85); }
.ppl-marquee__seq svg { flex-shrink: 0; }

/* No escuro a faixa mantém o #0B1526 da arte. No claro ela usa exatamente o
   fundo do site, então some como bloco e sobra só a tipografia. */
[data-theme="light"] .ppl-marquee { background: var(--bg); color: var(--text); }
[data-theme="light"] .ppl-marquee__seq .light { color: var(--text-dim); }
[data-theme="light"] .ppl-marquee__seq svg path { stroke: var(--brand); }

/* --------------------------------------------------- app do colaborador -- */
.approw {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 20px; padding: 44px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
}
.approw__copy { display: flex; flex-direction: column; gap: 16px; }
.approw__copy h2 {
  font-size: clamp(22px, 2.6vw, 30px); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.15;
}
.approw__copy > p { font-size: 14.5px; color: var(--text-dim); line-height: 1.6; }
.approw__shot {
  width: 100%; height: 380px; object-fit: cover;
  border-radius: 20px; display: block;
}

/* ----------------------------------------------------------- planos ----- */
.ppl-plans {
  max-width: 1760px; margin: 0 auto;
  padding: clamp(80px, 12vh, 180px) 32px 64px;
}
.planlist { display: flex; flex-direction: column; }
.planlist__end { border-top: 1px solid var(--line); }

.planrow {
  position: relative;
  display: grid; grid-template-columns: 1.1fr 1.4fr;
  gap: clamp(24px, 4vw, 80px); align-items: start;
  padding: clamp(32px, 4vw, 52px) clamp(20px, 3vw, 40px);
  border-top: 1px solid var(--line); border-radius: 20px;
  color: var(--text); background: transparent; box-shadow: none;
  transform: scale(1);
  transition: background .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.planrow:hover {
  color: var(--text);
  background: var(--surface-2);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
  transform: scale(1.015);
}
.planrow__frame {
  position: absolute; inset: 0; border-radius: 20px;
  border: 1.5px solid var(--accent);
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.planrow:hover .planrow__frame { opacity: 1; }
.planrow__head { display: flex; flex-direction: column; gap: 14px; }
.planrow__tag {
  font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent);
}
.planrow__name {
  font-size: clamp(40px, 5vw, 68px); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1;
  transition: color .3s ease;
}
.planrow:hover .planrow__name { color: var(--accent); }
.planrow__limit { font-size: 13.5px; color: var(--text-dim); }
.planrow__feats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; align-self: center;
}
.planrow__feats div {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 14.5px; line-height: 1.45; color: var(--text);
}
.planrow__feats span:first-child { color: var(--accent); flex-shrink: 0; margin-top: 1px; }

/* ---------------------------------------------------------- complementos -- */
.ppl-comp {
  max-width: 1760px; margin: 0 auto;
  padding: clamp(60px, 8vh, 120px) 32px 56px;
}
.ppl-comp .accent { color: var(--brand); }
.ppl-comp .sec-head--center h2 { font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -0.025em; }

.comphero {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr; gap: 16px;
}
.compcard {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 16px; padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .2s, border-color .2s;
}
.compcard:hover { border-color: var(--brand); }
.compcard__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; }
.compcard__icon { color: var(--brand); display: flex; }
.compcard .card__titlerow { margin-top: 4px; }
.compcard p { font-size: 13.5px; color: var(--text-dim); line-height: 1.55; flex: 1; }
.compcard__price {
  font-size: 11px; color: var(--brand);
  border-top: 1px solid var(--line-2); padding-top: 10px;
}

.compbig {
  grid-column: 4; grid-row: 1 / span 2;
  background: var(--paper); border-radius: 16px; padding: 22px;
  display: flex; flex-direction: column; gap: 18px; color: var(--paper-ink);
}
.compbig__shot {
  position: relative; border-radius: 12px; overflow: hidden;
  height: 190px; flex-shrink: 0;
}
.compbig__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.compbig__title { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.compbig p { font-size: 14px; color: rgba(11, 21, 38, 0.65); line-height: 1.6; flex: 1; }
.compbig__cta {
  display: inline-flex; align-items: center; justify-content: center;
  align-self: center; overflow: hidden;
  background: var(--gradient-hero); color: #fff;
  border-radius: 999px; height: 52px; width: 52px; padding: 0;
  font-size: 14.5px; font-weight: 600; white-space: nowrap;
  transition: width .45s cubic-bezier(.4, 0, .2, 1), padding .45s ease;
}
.compbig__cta:hover { color: #fff; width: 230px; padding: 0 22px; }
.compbig__cta svg { flex-shrink: 0; }
.compbig__cta span {
  max-width: 0; opacity: 0; overflow: hidden; margin-left: 0;
  transition: max-width .45s cubic-bezier(.4, 0, .2, 1), opacity .3s ease, margin-left .45s ease;
}
.compbig__cta:hover span { max-width: 180px; opacity: 1; margin-left: 10px; }

/* -------------------------------------------------------------------- faq */
/* .faq__togglewrap agora vive em base.css (compartilhado com LOG e WMS) */

/* ------------------------------------------------------------ responsivo -- */
@media (max-width: 1024px) {
  .planrow { grid-template-columns: 1fr; gap: 20px; }
  .planrow__feats { grid-template-columns: 1fr; }
  .comphero { grid-template-columns: repeat(2, 1fr); }
  .compbig { grid-column: 1 / span 2; grid-row: auto; }
  .approw { grid-template-columns: 1fr; }
  .ppl-modules { padding-bottom: 360px; }
}

@media (max-width: 640px) {
  .ppl-hero__inner { padding: 72px 18px 56px; }
  .ppl-statement { padding: 64px 18px; min-height: 0; }
  .ppl-modules { padding: 56px 18px 260px; min-height: 0; }
  .ppl-marquee { --faixa-vao-abaixo: 96px; margin-top: -200px; }
  .comphero { grid-template-columns: 1fr; }
  .compbig { grid-column: 1; }
  .approw { padding: 26px; }
  .ppl-plans, .ppl-comp { padding-left: 18px; padding-right: 18px; }
}