/* ============================================================
   Fenaprove · Landing pages por público
   Conceito "Convergência" — adições sobre site.css
   (consultor.html · expositor.html · dono.html)
   Só componentes que o site.css ainda não tem. A identidade
   (cores, tipografia, botões, reveal) vem toda de site.css.
   ============================================================ */

/* ─── Badge de público (topo do hero) ─── */
.hero__badge {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .4rem 1rem; margin-bottom: 1.1rem;
  border: 1px solid rgba(67,203,255,.35); border-radius: 999px;
  background: rgba(67,203,255,.08); backdrop-filter: blur(4px);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--cyan);
}
.hero__badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 0 4px rgba(67,203,255,.18);
}

/* chip de público no header (identifica a landing atual) */
.site-header__aud {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cyan);
  padding: .3rem .7rem; border: 1px solid rgba(67,203,255,.3);
  border-radius: 5px; background: rgba(67,203,255,.06); white-space: nowrap;
}

/* ─── Hero: nota de apoio abaixo do CTA ─── */
.hero__note {
  margin-top: 1.1rem; font-size: var(--fs-sm);
  color: var(--paper-70, rgba(250,250,247,.7));
}
.hero__note strong { color: var(--paper); font-weight: 600; }

/* ─── Feature split (texto + mídia) — reaproveitável ─── */
.feature { padding: clamp(3rem, 7vw, 6rem) 0; }
.feature--tint { background: linear-gradient(180deg, transparent, rgba(67,203,255,.03)); }
.feature__layout {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.feature--flip .feature__media { order: -1; }
.feature__title { font-size: clamp(1.7rem, 1.1rem + 2.6vw, 2.8rem); margin: 1rem 0 1.25rem; }
.feature__lede { font-size: var(--fs-md); color: var(--paper-70, rgba(250,250,247,.74)); line-height: 1.75; margin-bottom: 1.5rem; }
.feature__list { display: flex; flex-direction: column; gap: .7rem; }
.feature__list li {
  position: relative; padding-left: 1.7rem;
  font-size: var(--fs-base); color: var(--paper-90, rgba(8,0,28,.92));
  color: var(--paper); line-height: 1.5;
}
.feature__list li::before {
  content: ""; position: absolute; left: 0; top: .3em; width: 15px; height: 15px;
  background: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2343CBFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
}

/* mídia enquadrada */
.feature__media--frame { border-radius: 10px; overflow: hidden; aspect-ratio: 4/3; box-shadow: 0 30px 70px rgba(8,0,28,.5); }
.feature__media--frame img { width: 100%; height: 100%; object-fit: cover; }
/* mídia flutuante (mockups PNG transparentes) */
.feature__media--float {
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; padding: clamp(1.5rem, 4vw, 3rem);
  background: radial-gradient(ellipse at center, rgba(67,203,255,.14), transparent 68%);
}
.feature__media--float img {
  width: auto; max-height: 460px; object-fit: contain;
  filter: drop-shadow(0 34px 60px rgba(8,0,28,.6));
}

/* ─── Como participar (passos numerados) ─── */
.steps { padding: clamp(3rem, 7vw, 6rem) 0; }
.steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.step {
  position: relative; padding: 1.9rem 1.6rem; border-radius: 10px;
  border: 1px solid rgba(67,203,255,.16); background: rgba(8,0,28,.4);
  transition: transform .3s var(--ease-out-quint, ease), border-color .3s;
}
.step:hover { transform: translateY(-4px); border-color: rgba(67,203,255,.4); }
.step__num { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-2xl); line-height: 1; color: var(--cyan); }
.step__title { font-size: var(--fs-md); font-weight: 600; margin: .75rem 0 .5rem; }
.step p { font-size: var(--fs-sm); color: var(--paper-70, rgba(250,250,247,.7)); line-height: 1.6; }

/* ─── Faixa de logos/ecossistema ─── */
.logos-strip { padding: clamp(2.5rem, 5vw, 4rem) 0; border-top: 1px solid rgba(67,203,255,.12); border-bottom: 1px solid rgba(67,203,255,.12); }
.logos-strip__label { text-align: center; font-size: var(--fs-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--paper-50, rgba(250,250,247,.5)); margin-bottom: 1.75rem; }
.logos-strip__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem 3rem; }
.logos-strip__row img { height: 30px; width: auto; opacity: .8; filter: grayscale(1) brightness(1.6); transition: opacity .25s, filter .25s; }
.logos-strip__row img:hover { opacity: 1; filter: none; }

/* ─── Switch entre públicos (fim da página) ─── */
.aud-switch { padding: clamp(3rem, 6vw, 5rem) 0; }
.aud-switch__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.aud-card {
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1.75rem; border-radius: 10px;
  border: 1px solid rgba(250,250,247,.12); background: rgba(250,250,247,.03);
  transition: transform .3s var(--ease-out-quint, ease), border-color .3s, background .3s;
}
.aud-card:hover { transform: translateY(-4px); border-color: rgba(67,203,255,.4); background: rgba(67,203,255,.05); }
.aud-card__eyebrow { font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }
.aud-card__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); }
.aud-card p { font-size: var(--fs-sm); color: var(--paper-70, rgba(250,250,247,.7)); line-height: 1.6; }
.aud-card__link { margin-top: auto; padding-top: .75rem; display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-sm); font-weight: 600; color: var(--cyan); }
.aud-card__link svg { width: 1.05em; height: 1.05em; }

/* ─── Responsivo ─── */
@media (max-width: 860px) {
  .feature__layout { grid-template-columns: 1fr; }
  .feature--flip .feature__media { order: 0; }
  .steps__grid { grid-template-columns: 1fr; }
  .aud-switch__grid { grid-template-columns: 1fr; }
  .site-header__aud { display: none; }
}