/* ==========================================================================
   Turbina Social — base visual compartilhada
   Usada pela landing (tema monoka), pelo /services público e pelo /services
   do cliente logado. Mobile-first: o CSS base é o do celular; @media (min-width)
   só ACRESCENTA. Tudo prefixado com .ts- / escopado em .ts e .sv para não
   brigar com Bootstrap 4, core.css e monoka.css.
   ========================================================================== */

.ts, .sv {
  --ink: #0f0a1f;
  --body: #4a4560;
  --muted: #7a7491;
  --line: #e8e4f4;
  --bg: #ffffff;
  --soft: #f7f5fd;
  --soft-2: #efeafc;
  --brand: #6d28d9;
  --brand-2: #c026d3;
  --pink: #ec4899;
  --ok: #059669;
  --ok-soft: #d1fae5;
  --grad: linear-gradient(135deg, #7c3aed 0%, #c026d3 62%, #ec4899 100%);
  --grad-soft: linear-gradient(135deg, rgba(124,58,237,.12), rgba(236,72,153,.12));
  --r: 20px;
  --r-sm: 12px;
  --shadow-sm: 0 6px 20px -12px rgba(76, 29, 149, .28);
  --shadow: 0 30px 60px -32px rgba(76, 29, 149, .5);
  --nav-h: 64px;
  --maxw: 1180px;
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.ts, .ts *, .ts *::before, .ts *::after,
.sv, .sv *, .sv *::before, .sv *::after { box-sizing: border-box; }

.ts {
  font-family: var(--font);
  color: var(--body);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
:where(.ts) img { max-width: 100%; height: auto; display: block; }
:where(.ts) a { text-decoration: none; color: inherit; }
:where(.ts) h1, :where(.ts) h2, :where(.ts) h3, :where(.ts) h4 {
  font-family: var(--font); color: var(--ink); font-weight: 800;
  line-height: 1.12; letter-spacing: -.025em; margin: 0; text-wrap: balance;
}
:where(.ts) p, :where(.ts) figure, :where(.ts) blockquote { margin: 0; }
:where(.ts) ul { list-style: none; margin: 0; padding: 0; }
:where(.ts) button { font-family: inherit; }

body.ts-body { margin: 0; background: #fff; }
.ts-wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* ---------------------------------------------------------------- ícones */
.ts-i { display: inline-block; vertical-align: middle; flex: none; }

.ts-plat {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  border-radius: 28%; color: #fff; background: var(--grad);
  box-shadow: 0 8px 18px -10px rgba(15, 10, 31, .55);
}
.ts-plat--instagram { background: linear-gradient(45deg, #f9a825 0%, #ee2a7b 48%, #6228d7 100%); }
.ts-plat--tiktok    { background: linear-gradient(135deg, #25f4ee -40%, #0f0f12 38%, #0f0f12 62%, #fe2c55 140%); }
.ts-plat--youtube   { background: #ff1f3d; }
.ts-plat--facebook  { background: #1877f2; }
.ts-plat--x         { background: #0f1419; }
.ts-plat--telegram  { background: #229ed9; }
.ts-plat--spotify   { background: #1db954; }
.ts-plat--kwai      { background: linear-gradient(135deg, #ff8a00, #ff4d00); }
.ts-plat--twitch    { background: #9146ff; }
.ts-plat--other     { background: var(--grad); }

/* tile do tipo de serviço: cor suave + ícone na cor cheia */
.ts-kind {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border-radius: 14px;
  background: var(--soft-2); color: var(--brand);
}
.ts-kind--followers { background: #ede9fe; color: #6d28d9; }
.ts-kind--likes     { background: #fce7f3; color: #db2777; }
.ts-kind--views     { background: #e0f2fe; color: #0369a1; }
.ts-kind--comments  { background: #fef3c7; color: #b45309; }
.ts-kind--shares    { background: #dcfce7; color: #15803d; }
.ts-kind--reach     { background: #ffedd5; color: #c2410c; }
.ts-kind--live      { background: #fee2e2; color: #b91c1c; }
.ts-kind--other     { background: var(--soft-2); color: var(--brand); }

/* ---------------------------------------------------------------- botões */
.ts-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border-radius: 999px; border: 1.5px solid transparent;
  font-size: .98rem; font-weight: 700; line-height: 1; cursor: pointer; white-space: nowrap;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.ts a.ts-btn, .ts button.ts-btn { text-decoration: none; }
.ts a.ts-btn--primary, .ts .ts-btn--primary {
  background: var(--grad); color: #fff; box-shadow: 0 14px 28px -14px rgba(192, 38, 211, .75);
}
.ts a.ts-btn--primary:hover, .ts .ts-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -14px rgba(192, 38, 211, .85); color: #fff; }
.ts .ts-btn--primary:active { transform: translateY(0); }
.ts a.ts-btn--ghost, .ts .ts-btn--ghost { background: #fff; color: var(--brand); border-color: var(--line); }
.ts a.ts-btn--ghost:hover, .ts .ts-btn--ghost:hover { border-color: var(--brand); color: var(--brand); }
.ts a.ts-btn--text, .ts .ts-btn--text { background: transparent; color: var(--ink); padding: 0 14px; }
.ts a.ts-btn--text:hover, .ts .ts-btn--text:hover { color: var(--brand); }
.ts a.ts-btn--light, .ts .ts-btn--light { background: #fff; color: var(--brand); box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .5); min-height: 54px; font-size: 1.02rem; }
.ts a.ts-btn--light:hover { color: var(--brand); transform: translateY(-2px); }
.ts .ts-btn--sm { min-height: 40px; padding: 0 18px; font-size: .9rem; }
.ts .ts-btn--block { width: 100%; }
.ts .ts-btn:focus-visible, .ts a:focus-visible, .ts summary:focus-visible { outline: 3px solid rgba(124, 58, 237, .45); outline-offset: 2px; }

/* ------------------------------------------------------------------- nav */
.ts-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(170%) blur(16px); backdrop-filter: saturate(170%) blur(16px);
  border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s;
}
.ts-nav { transition: border-color .2s, box-shadow .2s, transform .25s ease; }
@media (max-width: 919px) { .ts-nav.is-hidden { transform: translateY(-100%); } }
.ts-nav.is-stuck { border-color: var(--line); box-shadow: 0 8px 30px -22px rgba(76, 29, 149, .5); }
.ts-nav__in { height: var(--nav-h); display: flex; align-items: center; gap: 14px; }
.ts-nav__brand { display: flex; align-items: center; margin-right: auto; }
.ts-nav__brand img { height: 34px; width: auto; }
.ts-nav__links { display: none; align-items: center; gap: 4px; }
.ts-nav__links a { padding: 8px 14px; border-radius: 10px; font-weight: 600; font-size: .95rem; color: var(--body); transition: color .15s, background .15s; }
.ts-nav__links a:hover, .ts-nav__links a.is-active { color: var(--brand); background: var(--soft-2); }
.ts-nav__actions { display: flex; align-items: center; gap: 6px; }
.ts-nav__actions .ts-btn--primary { display: none; }
.ts-nav__burger {
  width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.ts-nav__burger .ts-i:last-child { display: none; }
.ts-nav.is-open .ts-nav__burger .ts-i:first-child { display: none; }
.ts-nav.is-open .ts-nav__burger .ts-i:last-child { display: inline-block; }

/* menu de tela cheia (celular) */
.ts-menu {
  position: fixed; inset: var(--nav-h) 0 0 0; background: #fff; padding: 12px 20px 28px;
  display: none; flex-direction: column; gap: 4px; overflow-y: auto; border-top: 1px solid var(--line);
}
.ts-nav.is-open .ts-menu { display: flex; }
.ts-menu a.ts-menu__link {
  display: flex; align-items: center; justify-content: space-between; padding: 16px 6px;
  font-size: 1.12rem; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--line);
}
.ts-menu__cta { display: grid; gap: 10px; margin-top: 22px; }
body.ts-lock { overflow: hidden; }

@media (min-width: 920px) {
  .ts-nav__links { display: flex; }
  .ts-nav__actions .ts-btn--primary { display: inline-flex; }
  .ts-nav__burger, .ts-menu { display: none !important; }
  .ts-nav__brand { margin-right: 0; }
  .ts-nav__in { gap: 28px; }
  .ts-nav__actions { margin-left: auto; }
}

/* --------------------------------------------------- dock fixo (celular) */
.ts-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line); display: flex; gap: 10px;
  transform: translateY(110%); transition: transform .25s ease;
}
.ts-dock.is-on { transform: none; }
.ts-dock .ts-btn { flex: 1; min-height: 46px; padding: 0 12px; }
.ts-dock .ts-btn--ghost { flex: 0 0 auto; padding: 0 22px; }
@media (min-width: 920px) { .ts-dock { display: none; } }

/* --------------------------------------------------------- login (sheet) */
.ts-sheet {
  position: fixed; inset: 0; z-index: 1100; display: none; align-items: flex-end; justify-content: center;
  background: rgba(15, 10, 31, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.ts-sheet:target, .ts-sheet.is-open { display: flex; }
.ts-sheet__panel {
  width: 100%; max-width: 440px; max-height: 94vh; overflow-y: auto; background: #fff; color: var(--body);
  border-radius: 26px 26px 0 0; padding: 26px 22px calc(26px + env(safe-area-inset-bottom));
  box-shadow: var(--shadow); animation: ts-sheet-in .28s ease both;
}
.ts-sheet__close {
  float: right; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--soft); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; margin: -6px -6px 0 0;
}
.ts-sheet h2 { font-size: 1.5rem; margin-bottom: 4px; }
.ts-sheet__sub { color: var(--muted); font-size: .94rem; margin-bottom: 20px; }
.ts-field { margin-bottom: 14px; }
.ts-field input[type=email], .ts-field input[type=password], .ts-field input[type=text] {
  width: 100%; height: 52px; padding: 0 16px; border-radius: var(--r-sm); border: 1.5px solid var(--line);
  background: var(--soft); color: var(--ink); font: 500 1rem var(--font);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.ts-field input:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px rgba(124, 58, 237, .14); }
.ts-field input::placeholder { color: #a39cb8; }
.ts-sheet__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 18px; font-size: .9rem; }
.ts-sheet__row label { display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; font-weight: 600; }
.ts-sheet__row input { width: 17px; height: 17px; accent-color: var(--brand); }
.ts-sheet__row a { color: var(--brand); font-weight: 700; }
.ts-sheet__alt { text-align: center; margin-top: 16px; font-size: .92rem; color: var(--muted); }
.ts-sheet__alt a { color: var(--brand); font-weight: 700; }
@keyframes ts-sheet-in { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 600px) {
  .ts-sheet { align-items: center; }
  .ts-sheet__panel { border-radius: 26px; padding: 30px 30px 28px; }
}

/* ---------------------------------------------------------------- rodapé */
.ts-footer { background: #130a26; color: rgba(255, 255, 255, .7); padding: 56px 0 0; }
.ts-footer__grid { display: grid; gap: 28px 18px; grid-template-columns: 1fr 1fr; }
.ts-footer__brand { grid-column: 1 / -1; }
.ts-footer h4 { color: #fff; font-size: .95rem; letter-spacing: .02em; margin-bottom: 14px; }
.ts-footer p { font-size: .92rem; color: rgba(255, 255, 255, .6); max-width: 38ch; margin-bottom: 16px; }
.ts-footer ul { display: grid; gap: 4px; }
.ts-footer ul a { display: inline-block; padding: 6px 0; color: rgba(255, 255, 255, .72); font-size: .94rem; transition: color .15s; }
.ts-footer ul a:hover { color: #fff; }
.ts-footer__brand img { height: 36px; width: auto; margin-bottom: 16px; }
.ts-footer__social { display: flex; gap: 10px; margin-top: 4px; }
.ts-footer__social a { width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .09); display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: background .18s, transform .18s; }
.ts-footer__social a:hover { background: var(--grad); transform: translateY(-2px); }
.ts-footer__bottom { margin-top: 40px; border-top: 1px solid rgba(255, 255, 255, .1); padding: 22px 0 calc(22px + 64px); font-size: .86rem; color: rgba(255, 255, 255, .5); display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }
.ts-footer select { max-width: 180px; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: #fff; font: 600 .9rem var(--font); }
.ts-footer select option { color: #111; }
@media (min-width: 720px) { .ts-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; } .ts-footer__brand { grid-column: auto; } .ts-footer__bottom { padding-bottom: 22px; } }

/* ---------------------------------------------------- revelar ao rolar */
/* Só esconde se o JS que revela estiver rodando (classe ts-js no <html>); sem JS o conteúdo aparece. */
.ts-js .ts-reveal:not(.is-in) { opacity: 0; transform: translateY(18px); }
.ts-reveal { transition: opacity .55s ease, transform .55s ease; }

@media (prefers-reduced-motion: reduce) {
  .ts *, .sv * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .ts-js .ts-reveal:not(.is-in) { opacity: 1; transform: none; }
}