/* =========================================================
   Synchroone — estilos próprios (sobre o template Mombo)
   Cor da marca: var(--bs-primary) = #0066ff
   Tudo aqui é aditivo: componentes novos, seções educacionais,
   interativos e SLOTS de mídia para o time de marketing.
   ========================================================= */

:root {
  --sy-primary: #0066ff;
  --sy-primary-dark: #0052cc;
  --sy-primary-soft: #e9f1ff;
  --sy-ink: #0f172a;
  --sy-ink-soft: #475569;
  --sy-line: #e6ebf2;
  --sy-safe: #16a34a;
  --sy-warn: #f59e0b;
  --sy-danger: #ef4444;
  --sy-radius: 18px;
}

/* ---------- SLOT DE MÍDIA (marketing troca a imagem/vídeo aqui) ---------- */
.media-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background:
    linear-gradient(135deg, var(--sy-primary-soft), #f7faff);
  border: 1px dashed #b9cdf3;
  border-radius: var(--sy-radius);
  overflow: hidden;
  color: #6f8bbd;
  text-align: center;
}
.media-slot[data-ratio="16x9"] { aspect-ratio: 16 / 9; }
.media-slot[data-ratio="4x3"]  { aspect-ratio: 4 / 3; }
.media-slot[data-ratio="1x1"]  { aspect-ratio: 1 / 1; }
.media-slot[data-ratio="3x4"]  { aspect-ratio: 3 / 4; }
.media-slot img,
.media-slot video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-slot__hint {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
}
.media-slot__hint i { font-size: 22px; opacity: .7; }
.media-slot.has-media .media-slot__hint { display: none; }

/* ---------- CARTÃO PADRÃO ---------- */
.sy-card {
  background: #fff;
  border: 1px solid var(--sy-line);
  border-radius: var(--sy-radius);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 18px 40px -24px rgba(2, 32, 92, .18);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.sy-card.hoverable:hover {
  transform: translateY(-6px);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 30px 60px -28px rgba(0, 102, 255, .35);
  border-color: rgba(0, 102, 255, .25);
}

/* ícone em badge */
.sy-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--sy-primary-soft);
  color: var(--sy-primary);
  font-size: 22px;
}
.sy-icon.sy-icon-solid { background: var(--sy-primary); color: #fff; }
.sy-icon-sm { width: 40px; height: 40px; border-radius: 11px; font-size: 17px; }

/* kicker */
.sy-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sy-primary);
}
.sy-kicker::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sy-primary);
}

/* ---------- TABS DO MODELO HÍBRIDO ---------- */
.sy-toggle {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  background: #f1f5fb;
  border-radius: 999px;
}
.sy-toggle button {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 14px;
  color: var(--sy-ink-soft);
  cursor: pointer;
  transition: all .25s ease;
}
.sy-toggle button.active {
  background: var(--sy-primary);
  color: #fff;
  box-shadow: 0 10px 24px -12px rgba(0, 102, 255, .8);
}
.sy-pane { display: none; }
.sy-pane.active { display: block; animation: syFade .4s ease; }
@keyframes syFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- STATUS S/W/D/U ---------- */
.sy-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px; font-weight: 600; font-size: 13px;
}
.sy-status .dot { width: 9px; height: 9px; border-radius: 50%; }
.sy-status.s { background: rgba(22,163,74,.1); color: #15803d; } .sy-status.s .dot { background: var(--sy-safe); }
.sy-status.w { background: rgba(245,158,11,.12); color: #b45309; } .sy-status.w .dot { background: var(--sy-warn); }
.sy-status.d { background: rgba(239,68,68,.1); color: #b91c1c; } .sy-status.d .dot { background: var(--sy-danger); }
.sy-status.u { background: rgba(100,116,139,.12); color: #475569; } .sy-status.u .dot { background: #94a3b8; }

/* ---------- CALCULADORA DE ROI ---------- */
.sy-roi { background: #fff; border: 1px solid var(--sy-line); border-radius: 24px; overflow: hidden; box-shadow: 0 30px 70px -40px rgba(2,32,92,.4); }
.sy-roi__result { background: linear-gradient(135deg, var(--sy-primary), var(--sy-primary-dark)); color: #fff; }
.sy-range { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 999px; background: #e2e8f0; outline: none; }
.sy-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--sy-primary); cursor: pointer; box-shadow: 0 0 0 4px rgba(0,102,255,.2); }
.sy-range::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--sy-primary); cursor: pointer; }

/* ---------- COMPARATIVO ---------- */
.sy-compare { border-collapse: separate; border-spacing: 0; }
.sy-compare th, .sy-compare td { padding: 16px 18px; border-bottom: 1px solid var(--sy-line); text-align: left; vertical-align: middle; }
.sy-compare thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--sy-ink-soft); background: #f4f8fd; }
.sy-compare thead th:first-child { border-top-left-radius: 14px; }
.sy-compare thead th:last-child { border-top-right-radius: 14px; }
.sy-compare tbody tr { transition: background .2s ease; }
.sy-compare tbody tr:hover { background: #f8fbff; }
.sy-compare tr.col-best { background: var(--sy-primary-soft); }
.sy-compare tr.col-best:hover { background: #dfeaff; }
.sy-compare tr.col-best td { font-weight: 600; color: var(--sy-ink); }
.sy-compare tr.col-best td:first-child { box-shadow: inset 4px 0 0 var(--sy-primary); }
.sy-compare td:last-child { font-weight: 600; }
.sy-compare tr:last-child td { border-bottom: 0; }

/* ---------- FLUXO 4 CAMADAS ---------- */
.sy-flow { counter-reset: step; }
.sy-flow .sy-step { position: relative; }
.sy-flow .sy-step .num {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--sy-primary); color: #fff; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- FAQ ---------- */
.sy-faq .accordion-button:not(.collapsed) { color: var(--sy-primary); background: var(--sy-primary-soft); box-shadow: none; }
.sy-faq .accordion-button:focus { box-shadow: none; border-color: rgba(0,102,255,.25); }
.sy-faq .accordion-item { border: 1px solid var(--sy-line); border-radius: 14px !important; margin-bottom: 12px; overflow: hidden; }

/* ---------- BLOG (CMS) ---------- */
.sy-post-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.sy-post-card .cover { aspect-ratio: 16/9; background: var(--sy-primary-soft); overflow: hidden; }
.sy-post-card .cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.sy-post-card:hover .cover img { transform: scale(1.05); }
.sy-skeleton { background: linear-gradient(90deg,#eef2f7 25%,#f7fafc 37%,#eef2f7 63%); background-size: 400% 100%; animation: syShimmer 1.4s ease infinite; border-radius: 12px; }
@keyframes syShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ---------- DASHBOARD MOCK (hero) ---------- */
.sy-glass { background: rgba(255,255,255,.9); backdrop-filter: blur(8px); border: 1px solid #fff; border-radius: 16px; box-shadow: 0 24px 60px -30px rgba(2,32,92,.45); }
.sy-float { animation: syFloat 6s ease-in-out infinite; }
.sy-float.delay { animation-delay: 1.4s; }
@keyframes syFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- HEADER ---------- */
.sy-navbar { padding: 16px 0; transition: all .3s ease; }
.sy-navbar.scrolled { background: rgba(255,255,255,.9); backdrop-filter: blur(14px); box-shadow: 0 6px 24px -16px rgba(2,32,92,.35); padding: 10px 0; }
.sy-navbar .nav-link { font-weight: 500; color: var(--sy-ink) !important; padding: 8px 16px !important; border-radius: 999px; transition: all .2s ease; }
.sy-navbar .nav-link:hover { color: var(--sy-primary) !important; }
.sy-navbar .nav-link.active { color: var(--sy-primary) !important; background: var(--sy-primary-soft); }
.sy-navbar .navbar-collapse { gap: 8px; }
@media (max-width: 991px){ .sy-navbar.scrolled, .sy-navbar { background:#fff; box-shadow:0 6px 24px -16px rgba(2,32,92,.25);} .sy-navbar .navbar-collapse{ padding:16px 0; } }

/* ---------- FOOTER ---------- */
.sy-footer { background: #0b1220; color: #cbd5e1; }
.sy-footer h6 { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.sy-footer-links a, a.sy-footer-links { color: #94a3b8; text-decoration: none; transition: color .2s ease; }
.sy-footer-links li { margin-bottom: 8px; }
.sy-footer-links a:hover, a.sy-footer-links:hover { color: #fff; }
.sy-social { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.15); color:#cbd5e1; transition:all .25s ease; }
.sy-social:hover { background: var(--sy-primary); border-color: var(--sy-primary); color:#fff; }
.py-6 { padding-top: 4rem; padding-bottom: 4rem; }

/* ---------- ÁRVORE DE ATIVOS (espelha a plataforma) ---------- */
.sy-tree { font-size: 14px; }
.sy-tree-node { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 10px; transition: background .2s ease; }
.sy-tree-node:hover { background: var(--sy-primary-soft); }
.sy-tree-caret { width: 14px; color: #94a3b8; flex-shrink: 0; font-size: 14px; line-height: 1; }
.sy-tree-badge { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.sy-tree-badge.path { background: rgba(0,102,255,.1); color: var(--sy-primary); }
.sy-tree-badge.s { background: rgba(22,163,74,.12); color: #16a34a; }
.sy-tree-badge.w { background: rgba(245,158,11,.14); color: #d97706; }
.sy-tree-badge.d { background: rgba(239,68,68,.12); color: #dc2626; }
.sy-tree-badge.u { background: rgba(148,163,184,.18); color: #64748b; }
.sy-tree-label { flex: 1; color: var(--sy-ink); font-weight: 500; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sy-tree-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.sy-tree-dot.s { background: #16a34a; } .sy-tree-dot.w { background: #f59e0b; } .sy-tree-dot.d { background: #ef4444; } .sy-tree-dot.u { background: #94a3b8; }
.sy-tree-children { margin-left: 18px; padding-left: 13px; border-left: 1px solid var(--sy-line); }
.sy-tree-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--sy-ink-soft); }
.sy-tree-legend span { display: inline-flex; align-items: center; gap: 6px; }

/* seletor de idioma */
.sy-lang-btn { border:1px solid var(--sy-line); background:#fff; color:var(--sy-ink); font-weight:600; border-radius:999px; }
.sy-lang-btn:hover { border-color:var(--sy-primary); color:var(--sy-primary); }
.sy-lang .dropdown-item.active { color:var(--sy-primary); font-weight:600; background:var(--sy-primary-soft); }
.sy-lang .dropdown-menu { border:1px solid var(--sy-line); border-radius:14px; box-shadow:0 18px 40px -20px rgba(2,32,92,.3); padding:6px; min-width:9rem; }
.sy-lang .dropdown-item { border-radius:10px; padding:8px 12px; }

/* hero base (TODAS as páginas) — cabeçalho claro e compacto */
.sy-hero { padding-top: 150px; position: relative; overflow: hidden; background: linear-gradient(170deg, #dde9fc 0%, #e9f1fd 38%, #f4f8fd 72%, #ffffff 100%); }
.sy-hero .display-3 { font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.sy-rotator { color: var(--sy-primary); display:inline-block; }
.sy-rotator::after { content:""; display:inline-block; width:3px; height:.92em; background:currentColor; margin-left:3px; vertical-align:-2px; border-radius:1px; animation:syCaret 1s steps(1) infinite; }

/* hero AZUL de altura cheia — SOMENTE na home (classe extra .sy-hero-blue no <section>) */
.sy-hero-blue { padding-bottom: 70px; min-height: 100vh; display: flex; align-items: center; color: #fff; background: linear-gradient(125deg, var(--sy-primary) 0%, #0b57d0 52%, #0a3aa0 100%); }
.sy-hero-blue::after { content:""; position:absolute; inset:0; background: radial-gradient(circle at 82% 16%, rgba(255,255,255,.16), transparent 46%); pointer-events:none; }
.sy-hero-blue .sy-hero-copy .text-dark, .sy-hero-blue .sy-hero-copy h1 { color:#fff !important; }
.sy-hero-blue .sy-hero-copy .text-muted { color: rgba(255,255,255,.85) !important; }
.sy-hero-blue .sy-hero-copy .sy-rotator { color:#fff !important; }
.sy-hero-blue .sy-hero-copy .sy-kicker { background:transparent; border:0; padding:0; color:rgba(255,255,255,.8); }
.sy-hero-blue .sy-hero-copy .sy-kicker::before { background:#9ec1ff; }
.sy-hero-blue .sy-hero-copy .sy-chip { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); color:#fff; box-shadow:none; }
.sy-hero-blue .sy-hero-copy .sy-chip .text-sy-primary { color:#9ec1ff !important; }

/* navbar transparente sobre o hero azul: logo branca + links brancos enquanto não rolou */
.sy-logo-light { display:none; }
body.has-blue-hero .sy-navbar:not(.scrolled) .sy-logo-dark { display:none; }
body.has-blue-hero .sy-navbar:not(.scrolled) .sy-logo-light { display:inline-block; }
body.has-blue-hero .sy-navbar:not(.scrolled) .nav-link { color:#fff !important; }
body.has-blue-hero .sy-navbar:not(.scrolled) .nav-link:hover,
body.has-blue-hero .sy-navbar:not(.scrolled) .nav-link.active { color:#fff !important; background: rgba(255,255,255,.16); }
body.has-blue-hero .sy-navbar:not(.scrolled) .sy-lang-btn { background: rgba(255,255,255,.14); color:#fff; border-color: rgba(255,255,255,.34); }
body.has-blue-hero .sy-navbar:not(.scrolled) .btn-primary { background:#fff; color: var(--sy-primary); border-color:#fff; }
body.has-blue-hero .sy-navbar:not(.scrolled) .navbar-toggler-icon { filter: invert(1) brightness(2); }

/* ---------- FORMULÁRIO MULTI-STEP ---------- */
.sy-steps-bar { height: 8px; border-radius: 999px; background: #eef2f7; overflow: hidden; }
.sy-steps-bar > span { display: block; height: 100%; background: var(--sy-primary); border-radius: 999px; transition: width .4s cubic-bezier(.22,1,.36,1); }
.sy-step-pane { display: none; }
.sy-step-pane.active { display: block; animation: syFade .35s ease; }
.sy-optcard {
  display: flex; flex-direction: column; gap: 4px;
  width: 100%; text-align: left; cursor: pointer;
  padding: 16px; border-radius: 14px;
  border: 1.5px solid var(--sy-line); background: #fff;
  transition: all .2s ease;
}
.sy-optcard:hover { border-color: #b9cdf3; }
.sy-optcard.selected { border-color: var(--sy-primary); background: var(--sy-primary-soft); box-shadow: 0 0 0 3px rgba(0,102,255,.12); }
.sy-optcard .t { font-weight: 700; color: var(--sy-ink); font-size: 14px; }
.sy-optcard .d { font-size: 12px; color: var(--sy-ink-soft); }
.sy-form-tabs { display: inline-flex; gap: 6px; padding: 6px; background: #f1f5fb; border-radius: 999px; }
.sy-form-tabs button { border: 0; background: transparent; border-radius: 999px; padding: 9px 18px; font-weight: 600; font-size: 14px; color: var(--sy-ink-soft); cursor: pointer; transition: all .2s; }
.sy-form-tabs button.active { background: var(--sy-primary); color: #fff; box-shadow: 0 10px 24px -12px rgba(0,102,255,.8); }
.sy-summary-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; background:#fff; border:1px solid var(--sy-line); font-size:13px; font-weight:600; color:var(--sy-ink); }

/* utilidades */
/* mais respiro vertical entre as seções (override do template, que vinha apertado em 3rem) */
.py-7 { padding-top: 4.75rem !important; padding-bottom: 4.75rem !important; }
.sy-bg-soft { background: #eef4fc; }
.sy-bg-blue { background: linear-gradient(160deg, #e2ecfb, #eef4fd); }
/* faixa azul de marca (texto branco) p/ diferenciar o ritmo da página */
.sy-band { background: linear-gradient(120deg, var(--sy-primary) 0%, #0b57d0 55%, #0a3aa0 100%); color: #fff; position: relative; overflow: hidden; }
.sy-band::after { content:""; position:absolute; inset:0; background: radial-gradient(circle at 80% 20%, rgba(255,255,255,.18), transparent 45%); pointer-events:none; }
.sy-band .text-dark, .sy-band h2, .sy-band h3, .sy-band h4, .sy-band h5, .sy-band h6 { color:#fff !important; }
.sy-band .text-muted { color: rgba(255,255,255,.8) !important; }
/* quando a faixa azul vira fundo de uma seção com conteúdo: kicker, ícones e cards viram "vidro" */
.sy-band .sy-kicker { background: rgba(255,255,255,.15); color:#fff; border-color: rgba(255,255,255,.28); }
.sy-band .sy-icon { background: rgba(255,255,255,.16); color:#fff; box-shadow:none; }
.sy-band .sy-card { background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); box-shadow:none; backdrop-filter: blur(2px); }
.sy-band .sy-card.hoverable:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.34); transform: translateY(-3px); }
.sy-band .sy-card .text-muted, .sy-band .sy-card .small, .sy-band .small { color: rgba(255,255,255,.82) !important; }
.sy-band .btn-outline-primary { color:#fff; border-color: rgba(255,255,255,.6); }
.sy-band .btn-outline-primary:hover { background:#fff; color: var(--sy-primary); border-color:#fff; }
.sy-bg-grid {
  background-image:
    linear-gradient(rgba(15,23,42,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.04) 1px, transparent 1px);
  background-size: 44px 44px;
}
.sy-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--sy-line), transparent); }
.text-sy-primary { color: var(--sy-primary) !important; }
.bg-sy-soft { background: var(--sy-primary-soft) !important; }
.sy-chip { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border:1px solid #dfe7f5; border-radius:999px; font-size:13px; font-weight:600; color:var(--sy-ink); background:#fff; box-shadow:0 4px 14px -6px rgba(2,32,92,.18); }

/* ===== SHOWCASE · Chat de IA conceitual (animado) ===== */
.sy-chat { background:#fff; border:1px solid var(--sy-line); border-radius:20px; box-shadow:0 34px 80px -50px rgba(2,32,92,.5); overflow:hidden; }
.sy-chat__head { display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--sy-line); background:#fbfcfe; }
.sy-chat__macs { display:flex; gap:6px; }
.sy-chat__macs i { width:10px; height:10px; border-radius:50%; display:inline-block; }
.sy-chat__title { font-size:13px; font-weight:700; color:var(--sy-ink); }
.sy-chat__title small { font-weight:500; color:var(--sy-ink-soft); }
.sy-chat__body { padding:18px; height:340px; display:flex; flex-direction:column; gap:11px; overflow-y:auto; scroll-behavior:smooth; }
.sy-chat__body::-webkit-scrollbar { width:0; } .sy-chat__body { -ms-overflow-style:none; scrollbar-width:none; }
.sy-msg { max-width:84%; padding:11px 14px; border-radius:16px; font-size:13.5px; line-height:1.5; opacity:0; transform:translateY(8px); animation:syMsgIn .32s ease forwards; }
.sy-msg.user { align-self:flex-end; background:var(--sy-primary); color:#fff; border-bottom-right-radius:5px; }
.sy-msg.ai { align-self:flex-start; background:#f1f5fb; color:var(--sy-ink); border-bottom-left-radius:5px; }
@keyframes syMsgIn { to { opacity:1; transform:none; } }
.sy-typing { display:inline-flex; gap:4px; align-items:center; padding:3px 0; }
.sy-typing i { width:6px; height:6px; border-radius:50%; background:#9fb4d4; display:inline-block; animation:syTyping 1s infinite; }
.sy-typing i:nth-child(2){ animation-delay:.15s; } .sy-typing i:nth-child(3){ animation-delay:.3s; }
@keyframes syTyping { 0%,60%,100%{ opacity:.3; transform:translateY(0);} 30%{ opacity:1; transform:translateY(-3px);} }
.sy-chat__badge { display:inline-flex; align-items:center; gap:5px; margin-top:9px; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; }
.sy-chat__badge.s { background:rgba(22,163,74,.12); color:#16a34a; }
.sy-chat__badge.w { background:rgba(245,158,11,.15); color:#b45309; }
.sy-chat__badge.d { background:rgba(239,68,68,.12); color:#dc2626; }
.sy-chat__badge .bdot { width:7px; height:7px; border-radius:50%; background:currentColor; }
.sy-chat__caret { display:inline-block; width:2px; height:1em; background:currentColor; margin-left:1px; vertical-align:-2px; animation:syCaret 1s steps(1) infinite; }
@keyframes syCaret { 50%{ opacity:0; } }
.sy-chat__input { display:flex; align-items:center; gap:9px; padding:13px 16px; border-top:1px solid var(--sy-line); color:var(--sy-ink-soft); font-size:13px; background:#fbfcfe; }
.sy-chat__input .ph { flex:1; }
.sy-chat__input .snd { width:30px; height:30px; border-radius:50%; background:var(--sy-primary); color:#fff; display:flex; align-items:center; justify-content:center; }
.sy-chat__badge.i { background:rgba(0,102,255,.1); color:var(--sy-primary); }

/* ===== SHOWCASE · Planta viva (pulso) + Sinal→Diagnóstico (gráfico vivo) ===== */
.sy-tree-node .sy-tree-dot.w { animation: syDotW 1.9s ease-out infinite; }
.sy-tree-node .sy-tree-dot.d { animation: syDotD 1.4s ease-out infinite; }
@keyframes syDotW { 0%{ box-shadow:0 0 0 0 rgba(245,158,11,.5);} 100%{ box-shadow:0 0 0 6px rgba(245,158,11,0);} }
@keyframes syDotD { 0%{ box-shadow:0 0 0 0 rgba(239,68,68,.55);} 100%{ box-shadow:0 0 0 6px rgba(239,68,68,0);} }
.sy-vibe { position:relative; width:100%; min-height:220px; display:flex; align-items:stretch; }
.sy-vibe svg { width:100%; height:100%; display:block; }
.sy-vibe .thr { stroke-dasharray:4 5; stroke-width:1.3; }
.sy-vibe .thr.w { stroke:var(--sy-warn); opacity:.8; }
.sy-vibe .thr.d { stroke:var(--sy-danger); opacity:.7; }
.sy-vibe .thrlbl { font-size:8px; font-weight:700; letter-spacing:.04em; }
.sy-vibe .area { opacity:.12; }
.sy-vibe .line { fill:none; stroke:var(--sy-primary); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.sy-vibe .pt { fill:#fff; stroke-width:3; opacity:1; transition:stroke .4s ease; }
.sy-vibe .pt.alarm { animation:syPt 1.4s ease-out infinite; }
@keyframes syPt { 0%{ filter:drop-shadow(0 0 0 rgba(245,158,11,.7)); } 100%{ filter:drop-shadow(0 0 7px rgba(245,158,11,0)); } }
.sy-diag { margin-top:14px; border:1px solid var(--sy-line); border-left:3px solid var(--sy-warn); border-radius:12px; padding:12px 14px; background:#fffdf7; opacity:0; transform:translateY(8px); transition:opacity .55s ease, transform .55s ease; pointer-events:none; }
.sy-diag.show { opacity:1; transform:none; }
.fw-500 { font-weight:500; }

/* ===== SHOWCASE · Mapa vivo da planta (hero) ===== */
.sy-map { background:#fff; border-radius:18px; box-shadow:0 44px 100px -55px rgba(2,32,92,.65); overflow:hidden; max-width:480px; }
.sy-map__head { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--sy-line); background:#fbfcfe; }
.sy-map__live { display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:800; color:#16a34a; text-transform:uppercase; letter-spacing:.06em; }
.sy-map__live i { width:7px; height:7px; border-radius:50%; background:#16a34a; animation:syBlink 1.4s infinite; }
@keyframes syBlink { 50%{ opacity:.25; } }
.sy-map__title { font-size:12.5px; font-weight:700; color:var(--sy-ink); display:flex; align-items:center; gap:6px; }
.sy-map__title i { color:var(--sy-primary); }
.sy-map__kpis { margin-left:auto; display:flex; gap:9px; font-size:11px; font-weight:800; }
.sy-map__kpis .k { display:inline-flex; align-items:center; gap:4px; }
.sy-map__kpis .k i { width:7px; height:7px; border-radius:50%; }
.sy-map__kpis .k.s i{ background:var(--sy-safe);} .sy-map__kpis .k.s{ color:#15803d; }
.sy-map__kpis .k.w i{ background:var(--sy-warn);} .sy-map__kpis .k.w{ color:#b45309; }
.sy-map__kpis .k.d i{ background:var(--sy-danger);} .sy-map__kpis .k.d{ color:#b91c1c; }
.sy-map__grid { position:relative; display:flex; gap:10px; padding:14px; background:linear-gradient(180deg,#f6faff,#ffffff); overflow:hidden; }
.sy-zone { flex:1; border:1px solid #e3ebf7; border-radius:12px; padding:10px 10px 12px; background:rgba(255,255,255,.55); }
.sy-zone__name { font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#8195b5; }
.sy-zone__nodes { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.sy-node { width:64px; display:flex; flex-direction:column; align-items:center; gap:5px; }
.sy-node .tile { position:relative; width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:17px; background:var(--sy-primary-soft); color:var(--sy-primary); transition:background .4s, color .4s; }
.sy-node .tile em { position:absolute; top:-3px; right:-3px; width:11px; height:11px; border-radius:50%; border:2px solid #fff; background:var(--sy-safe); }
.sy-node.w .tile { background:rgba(245,158,11,.15); color:#b45309; } .sy-node.w .tile em{ background:var(--sy-warn); animation:syDotW 1.9s ease-out infinite; }
.sy-node.d .tile { background:rgba(239,68,68,.13); color:#dc2626; } .sy-node.d .tile em{ background:var(--sy-danger); animation:syDotD 1.4s ease-out infinite; }
.sy-node .lbl { font-size:9.5px; color:#64748b; font-weight:600; text-align:center; line-height:1.12; }
.sy-scan { position:absolute; top:0; bottom:0; left:-100px; width:100px; background:linear-gradient(90deg, transparent, rgba(0,102,255,.12), transparent); animation:syScan 4.8s linear infinite; pointer-events:none; }
@keyframes syScan { 0%{ left:-100px; } 100%{ left:100%; } }
.sy-map__alert { display:flex; align-items:center; gap:10px; padding:11px 16px; border-top:1px solid var(--sy-line); background:#fff; }
.sy-map__alert .ic { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:var(--sy-primary-soft); color:var(--sy-primary); flex-shrink:0; transition:background .35s, color .35s; }
.sy-map__alert .tx { font-size:12px; font-weight:600; color:var(--sy-ink); flex:1; min-width:0; transition:opacity .35s ease; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sy-map__alert.w .ic{ background:rgba(245,158,11,.15); color:#b45309; }
.sy-map__alert.d .ic{ background:rgba(239,68,68,.13); color:#dc2626; }
.sy-map__alert.s .ic{ background:rgba(22,163,74,.12); color:#16a34a; }
.sy-spark { display:inline-flex; align-items:flex-end; gap:2px; height:22px; flex-shrink:0; }
.sy-spark i { width:3px; min-height:2px; background:var(--sy-primary); border-radius:2px; opacity:.7; transition:height .4s ease; }

/* ===== SHOWCASE · Blueprint vivo da planta (hero) ===== */
.sy-net { position:absolute; top:84px; left:0; right:0; bottom:0; z-index:1; overflow:hidden; pointer-events:none; }
.sy-net svg { width:100%; height:100%; display:block; }
.sy-net .edge { fill:none; stroke:rgba(255,255,255,.16); stroke-width:1.3; }
.sy-net .sig { fill:#cfe0ff; }
.sy-net .nd { pointer-events:auto; cursor:pointer; }
.sy-net .nd .hit { fill:transparent; }
.sy-net .nd .core { transition:r .2s ease; }
.sy-net .nd text { fill:rgba(255,255,255,.8); font-size:13px; font-weight:600; font-family:inherit; }
.sy-net .nd.hub text { fill:#fff; font-weight:700; font-size:15px; }
.sy-net .nd.s .core{ fill:#34d399; } .sy-net .nd.w .core{ fill:#fbbf24; } .sy-net .nd.d .core{ fill:#f87171; }
.sy-net .nd.p .core{ fill:#9ec1ff; } .sy-net .nd.hub .core{ fill:#fff; }
.sy-net .nd .ring{ fill:none; stroke-width:2; }
.sy-net .nd.s .ring{ stroke:#34d399; } .sy-net .nd.w .ring{ stroke:#fbbf24; } .sy-net .nd.d .ring{ stroke:#f87171; }
.sy-net .nd:hover .core{ r:9; }
.sy-net__tip { position:absolute; z-index:4; pointer-events:none; opacity:0; transform:translate(-50%,-12px); transition:opacity .18s ease; background:#fff; color:var(--sy-ink); border-radius:10px; padding:8px 11px; box-shadow:0 18px 40px -16px rgba(2,32,92,.5); font-size:12px; white-space:nowrap; }
.sy-net__tip.show { opacity:1; }
.sy-net__tip .t { font-weight:700; }
.sy-net__tip .s { display:inline-flex; align-items:center; gap:5px; font-weight:600; }
.sy-net__tip .s::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.sy-net__tip .st-s{ color:#16a34a; } .sy-net__tip .st-w{ color:#b45309; } .sy-net__tip .st-d{ color:#dc2626; } .sy-net__tip .st-p{ color:var(--sy-primary); }
.sy-net__tip .m { color:var(--sy-ink-soft); }
@media (max-width: 991px){ .sy-net { opacity:.5; } .sy-net__tip{ display:none; } }

/* ===== Blueprint · mini-card de detalhe (clique no nó) ===== */
.sy-net__card { position:absolute; z-index:5; width:250px; background:#fff; color:var(--sy-ink); border-radius:14px; box-shadow:0 30px 70px -28px rgba(2,32,92,.6); opacity:0; transform:translateY(10px) scale(.97); transform-origin:top left; transition:opacity .22s ease, transform .22s ease; pointer-events:none; overflow:hidden; }
.sy-net__card.show { opacity:1; transform:none; pointer-events:auto; }
.sy-net__card .hd { display:flex; align-items:center; gap:9px; padding:12px 14px; border-bottom:1px solid var(--sy-line); }
.sy-net__card .hd .d { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.sy-net__card .hd .nm { font-weight:700; font-size:13px; flex:1; min-width:0; line-height:1.15; }
.sy-net__card .hd .bg { font-size:10px; font-weight:800; padding:2px 8px; border-radius:999px; }
.sy-net__card .hd .x { cursor:pointer; color:var(--sy-ink-soft); font-size:14px; line-height:1; }
.sy-net__card .bd { padding:12px 14px; display:flex; flex-direction:column; gap:9px; }
.sy-net__row { display:flex; align-items:center; gap:9px; font-size:11.5px; }
.sy-net__row .lb { color:var(--sy-ink-soft); width:74px; flex-shrink:0; }
.sy-net__row .track { flex:1; height:6px; border-radius:999px; background:#eef2f8; overflow:hidden; }
.sy-net__row .fill { height:100%; width:0; border-radius:999px; transition:width .9s cubic-bezier(.2,.7,.2,1); }
.sy-net__row .vl { font-weight:700; width:62px; text-align:right; flex-shrink:0; }
.sy-net__act { margin-top:2px; padding:10px 14px; border-top:1px solid var(--sy-line); background:#fbfcfe; font-size:11.5px; min-height:42px; display:flex; align-items:center; gap:8px; }
.sy-net__act .dots i{ width:5px;height:5px;border-radius:50%;background:#9fb4d4;display:inline-block;margin-right:3px;animation:syTyping 1s infinite;}
.sy-net__act .dots i:nth-child(2){animation-delay:.15s;} .sy-net__act .dots i:nth-child(3){animation-delay:.3s;}
.sy-net__act .ok { display:inline-flex; align-items:center; gap:6px; color:#16a34a; font-weight:700; opacity:0; transform:translateX(-6px); transition:all .35s ease; }
.sy-net__act .ok.show { opacity:1; transform:none; }
.s-fill-s{background:#16a34a;} .s-fill-w{background:#f59e0b;} .s-fill-d{background:#ef4444;}
.s-bg-s{background:rgba(22,163,74,.12);color:#15803d;} .s-bg-w{background:rgba(245,158,11,.15);color:#b45309;} .s-bg-d{background:rgba(239,68,68,.12);color:#b91c1c;} .s-bg-p{background:var(--sy-primary-soft);color:var(--sy-primary);}
.s-dot-s{background:#16a34a;} .s-dot-w{background:#f59e0b;} .s-dot-d{background:#ef4444;} .s-dot-p{background:var(--sy-primary);}

/* ===== Faixa sutil do blueprint nos heros internos (família visual com a home) ===== */
.sy-hero-net { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; opacity:.5;
  -webkit-mask-image:radial-gradient(115% 95% at 72% 28%, #000 38%, transparent 100%);
  mask-image:radial-gradient(115% 95% at 72% 28%, #000 38%, transparent 100%); }
.sy-hero-net svg { width:100%; height:100%; display:block; }
.sy-hero-net .e { fill:none; stroke:rgba(0,102,255,.14); stroke-width:1.2; }
.sy-hero-net .n { fill:#9bbcf5; }
.sy-hero-net .n.w { fill:#f59e0b; } .sy-hero-net .n.d { fill:#ef4444; }
.sy-hero-net .sig { fill:rgba(0,102,255,.5); }
.sy-hero > .container { position:relative; z-index:1; }

/* ===== Soluções · visuais conceituais nos blocos ===== */
.sy-eq { display:flex; align-items:flex-end; gap:3px; height:72px; position:relative; }
.sy-eq i { flex:1; min-width:0; background:linear-gradient(180deg,#8fbcff,#2c7bff); border-radius:3px; height:34%; transition:height 1s cubic-bezier(.4,0,.2,1), background .45s ease; }
.sy-eq i.w { background:linear-gradient(180deg,#fcd34d,#f59e0b); }
.sy-eq i.d { background:linear-gradient(180deg,#fca5a5,#ef4444); }
.sy-eq__tip { position:absolute; bottom:100%; margin-bottom:8px; transform:translateX(-50%); padding:4px 9px; border-radius:8px; font-size:10.5px; font-weight:700; white-space:nowrap; box-shadow:0 12px 26px -12px rgba(2,32,92,.5); opacity:0; transition:opacity .25s ease; pointer-events:none; }
.sy-eq__tip.w { background:#fff7ed; color:#b45309; } .sy-eq__tip.d { background:#fef2f2; color:#dc2626; }
.sy-eq__tip.show { opacity:1; }
.sy-hyb-src { display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--sy-line); border-radius:11px; background:#fff; }
.sy-hyb-arrow { color:#9bb6e4; font-size:18px; }

/* ===== Como funciona · 4 passos vivos (pulso percorre e acende cada etapa) ===== */
.sy-step-c { display:inline-flex; align-items:center; justify-content:center; width:60px; height:60px; border-radius:50%; background:#fff; border:2px solid var(--sy-primary); color:var(--sy-primary); font-weight:800; font-size:20px; margin-bottom:1rem; box-shadow:0 8px 20px -8px rgba(0,102,255,.5); transition:all .35s ease; position:relative; z-index:1; }
.sy-step-c.active { background:var(--sy-primary); color:#fff; transform:scale(1.12); box-shadow:0 16px 34px -8px rgba(0,102,255,.85); }
.sy-steps__track { position:absolute; top:30px; left:12.5%; right:12.5%; height:2px; background:rgba(0,102,255,.12); border-radius:2px; }
.sy-steps__fill { position:absolute; top:30px; left:12.5%; width:0; height:2px; background:var(--sy-primary); border-radius:2px; }
.sy-steps__dot { position:absolute; top:50%; right:-7px; transform:translateY(-50%); width:13px; height:13px; border-radius:50%; background:var(--sy-primary); box-shadow:0 0 0 5px rgba(0,102,255,.18); }

/* ===== Slot de logo de parceiro/ecossistema (marketing troca por <img>) ===== */
.sy-logo-slot { display:flex; align-items:center; justify-content:center; height:78px; padding:14px 18px; background:#f6f8fc; border:1px solid var(--sy-line); border-radius:12px; }
.sy-logo-slot img { max-height:44px; max-width:150px; object-fit:contain; display:block; }
.sy-logo-slot span { font-weight:800; font-size:15px; color:#5b6b87; }
.sy-eco-role { display:inline-block; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--sy-primary); margin-bottom:8px; }
.sy-eco-meta { list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:7px; }
.sy-eco-meta li { display:flex; align-items:flex-start; gap:8px; font-size:12px; line-height:1.35; color:var(--sy-ink-soft); font-weight:500; }
.sy-eco-meta li i { color:var(--sy-primary); font-size:13px; margin-top:1px; flex-shrink:0; }

/* ===== Hero blueprint · diretor automático (card app-style + nó ativo) ===== */
.sy-net__card--auto { left:auto !important; top:auto !important; right:26px; bottom:26px; }
.sy-net .nd.active .core { r:10; filter: drop-shadow(0 0 7px currentColor); }
.sy-net__card .hd .sy-net__thumb { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.sy-net__thumb.t-s { background:rgba(22,163,74,.12); color:#16a34a; }
.sy-net__thumb.t-w { background:rgba(245,158,11,.15); color:#b45309; }
.sy-net__thumb.t-d { background:rgba(239,68,68,.12); color:#dc2626; }
.sy-net__thumb.t-p { background:var(--sy-primary-soft); color:var(--sy-primary); }
@media (max-width: 991px){ .sy-net__card { display:none; } }

/* ===== Seção do sensor · Sync Alert ===== */
.sy-sensor-stage { position:relative; display:flex; align-items:center; justify-content:center; padding:8px; min-height:420px; }
.sy-sensor-stage img { position:relative; z-index:1; max-width:100%; max-height:390px; object-fit:contain; filter: drop-shadow(0 40px 55px rgba(0,0,0,.45)); animation: syFloatSensor 5.5s ease-in-out infinite; }
@keyframes syFloatSensor { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
/* ondas de sinal (transmissão pra nuvem) */
.sy-sensor-wave { position:absolute; top:50%; left:50%; width:200px; height:200px; margin:-100px 0 0 -100px; border-radius:50%; border:1.5px solid rgba(255,255,255,.28); opacity:0; z-index:0; pointer-events:none; animation: syWave 3.6s ease-out infinite; }
.sy-sensor-wave:nth-child(2){ animation-delay:1.2s; } .sy-sensor-wave:nth-child(3){ animation-delay:2.4s; }
@keyframes syWave { 0%{ transform:scale(.4); opacity:.45; } 80%{ opacity:0; } 100%{ transform:scale(1.7); opacity:0; } }
.sy-sensor-badge { position:absolute; top:8px; left:8px; z-index:3; display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.16); color:#dffce9; font-size:11px; font-weight:800; padding:5px 11px; border-radius:999px; backdrop-filter:blur(4px); }
.sy-sensor-badge .d { width:7px; height:7px; border-radius:50%; background:#7ee0a6; animation:syBlink 1.4s infinite; }
/* chips de leitura flutuando ao redor */
.sy-sensor-chip { position:absolute; z-index:2; display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(6px); color:#fff; font-size:12px; font-weight:700; padding:7px 12px; border-radius:12px; box-shadow:0 16px 34px -18px rgba(0,0,0,.55); white-space:nowrap; animation: syFloatChip 4.4s ease-in-out infinite; }
.sy-sensor-chip i { color:#bcd4ff; font-size:14px; }
.sy-sensor-chip.c1 { top:40px; right:-6px; }
.sy-sensor-chip.c2 { bottom:96px; left:-14px; animation-delay:.8s; }
.sy-sensor-chip.c3 { bottom:34px; right:18px; animation-delay:1.6s; }
@keyframes syFloatChip { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
@media (max-width: 575px){ .sy-sensor-chip { display:none; } }
.sy-sensor-feats { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.sy-sensor-feats li { display:flex; align-items:flex-start; gap:10px; color:rgba(255,255,255,.92); font-size:14.5px; line-height:1.4; }
.sy-sensor-feats li i { color:#bcd4ff; font-size:16px; margin-top:1px; flex-shrink:0; }

/* ===== Hero blueprint · legenda da cena (auto) ===== */
.sy-net__cap { position:absolute; top:104px; right:26px; z-index:5; display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.16); color:#fff; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:6px 13px; border-radius:999px; backdrop-filter:blur(4px); opacity:0; transform:translateY(6px); transition:opacity .35s ease, transform .35s ease; pointer-events:none; }
.sy-net__cap::before { content:""; width:7px; height:7px; border-radius:50%; background:#7ee0a6; animation:syBlink 1.4s infinite; }
.sy-net__cap.show { opacity:1; transform:none; }
@media (max-width:991px){ .sy-net__cap { display:none; } }

/* ===== Hero blueprint · card em vidro azul translúcido (discreto, não branco) ===== */
.sy-net__card { background: rgba(8,28,72,.5); color:#fff; border:1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow:0 28px 64px -26px rgba(0,0,0,.6); }
.sy-net__card .hd { border-bottom-color: rgba(255,255,255,.12); }
.sy-net__card .hd .nm { color:#fff; }
.sy-net__card .hd .x { color: rgba(255,255,255,.55); }
.sy-net__row .lb { color: rgba(255,255,255,.72); }
.sy-net__row .vl { color:#fff; }
.sy-net__row .track { background: rgba(255,255,255,.15); }
.sy-net__act { background: rgba(255,255,255,.05); border-top-color: rgba(255,255,255,.12); color: rgba(255,255,255,.85); }
.sy-net__act .ok { color:#7ee0a6; }
.sy-net__act .dots i { background: rgba(255,255,255,.5); }

/* card do hero: mais claro e legível (sobre o vidro azul) */
.sy-net__card { background: rgba(13,40,98,.4); border-color: rgba(255,255,255,.22); box-shadow:0 26px 60px -24px rgba(0,0,0,.5); }
.sy-net__card .hd .bg { color:#fff; }
.sy-net__card .s-bg-s { background: rgba(52,211,153,.24); color:#c2f5da; }
.sy-net__card .s-bg-w { background: rgba(251,191,36,.26); color:#fde6a6; }
.sy-net__card .s-bg-d { background: rgba(248,113,113,.26); color:#ffcccc; }
.sy-net__card .sy-net__thumb.t-s { background: rgba(52,211,153,.2); color:#9af0c2; }
.sy-net__card .sy-net__thumb.t-w { background: rgba(251,191,36,.2); color:#fcd884; }
.sy-net__card .sy-net__thumb.t-d { background: rgba(248,113,113,.2); color:#ffb4b4; }
.sy-net__card .sy-net__thumb.t-p { background: rgba(255,255,255,.16); color:#cfe0ff; }
.sy-net__row .track { background: rgba(255,255,255,.2); }
.sy-net__act { background: rgba(255,255,255,.09); border-top-color: rgba(255,255,255,.14); }
.sy-net__act .ok { color:#8af0b4; }

/* ===== Como funciona · Configurador por tipo de ativo ===== */
.sy-tb-saved { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:#16a34a; }
.sy-tb-types { display:flex; flex-wrap:wrap; gap:8px; }
.sy-tb-type { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--sy-line); background:#fff; border-radius:999px; padding:7px 14px; font-size:12.5px; font-weight:600; color:var(--sy-ink-soft); cursor:pointer; transition:all .25s ease; }
.sy-tb-type i { font-size:13px; }
.sy-tb-type.active { background:var(--sy-primary); border-color:var(--sy-primary); color:#fff; box-shadow:0 8px 20px -10px rgba(0,102,255,.7); }
.sy-tb-params { border-top:1px solid var(--sy-line); padding-top:13px; display:flex; flex-direction:column; gap:11px; }
.sy-tb-row { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; }
.sy-tb-row .lb { color:var(--sy-ink-soft); display:inline-flex; align-items:center; gap:8px; min-width:0; }
.sy-tb-row .lb i { color:var(--sy-primary); font-size:14px; flex-shrink:0; }
.sy-tb-row .vl { font-weight:700; color:var(--sy-ink); white-space:nowrap; transition:opacity .25s ease; }
.sy-tb-foot { display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--sy-ink-soft); background:var(--sy-primary-soft); border-radius:10px; padding:9px 12px; line-height:1.35; }
.sy-tb-foot i { color:var(--sy-primary); flex-shrink:0; }

/* ===== Ajustes responsivos (mobile/tablet) ===== */
@media (max-width: 991.98px) {
  .sy-hero { padding-top: 116px; }
  .sy-hero-blue { min-height: auto; padding-bottom: 52px; }
  .sy-net { opacity: .26; }
  .sy-sensor-chip { display: none; }            /* evita overflow no layout empilhado */
  .sy-sensor-stage { min-height: 320px; }
}
@media (max-width: 767.98px) {
  .sy-hero { padding-top: 104px; }
  .sy-hero .display-3 { font-size: 2.4rem; line-height: 1.1; }
  .sy-net { display: none; }                     /* hero limpo no celular: só azul + texto */
  .sy-sensor-stage { min-height: 240px; }
  .sy-sensor-stage img { max-height: 240px; }
  .py-7 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .py-6 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .sy-sensor-feats li { font-size: 13.5px; }
}
@media (max-width: 575.98px) {
  .sy-hero .display-3 { font-size: 2.05rem; }
  .sy-band .display-5, .sy-hero .display-5 { font-size: 1.7rem; }
}

/* FIX mobile: na navbar branca do mobile, voltar logo/links/botões ao tema claro (mesmo no hero azul) */
@media (max-width: 991.98px) {
  body.has-blue-hero .sy-navbar:not(.scrolled) .sy-logo-dark { display: inline-block; }
  body.has-blue-hero .sy-navbar:not(.scrolled) .sy-logo-light { display: none; }
  body.has-blue-hero .sy-navbar:not(.scrolled) .nav-link { color: var(--sy-ink) !important; background: transparent; }
  body.has-blue-hero .sy-navbar:not(.scrolled) .nav-link.active,
  body.has-blue-hero .sy-navbar:not(.scrolled) .nav-link:hover { color: var(--sy-primary) !important; }
  body.has-blue-hero .sy-navbar:not(.scrolled) .sy-lang-btn { background: #fff; color: var(--sy-ink); border-color: var(--sy-line); }
  body.has-blue-hero .sy-navbar:not(.scrolled) .btn-primary { background: var(--sy-primary); color: #fff; border-color: var(--sy-primary); }
  body.has-blue-hero .sy-navbar:not(.scrolled) .navbar-toggler-icon { filter: none; }
}

/* ===== Mobile · refinamento completo (tipografia, toque, componentes) ===== */
html, body { overflow-x: hidden; }
@media (max-width: 991.98px) {
  .sy-hero-net { opacity: .34; }
  h2.fw-800 { font-size: 1.72rem; }
}
@media (max-width: 767.98px) {
  h2.fw-800 { font-size: 1.5rem; line-height: 1.2; }
  .display-5 { font-size: 1.75rem; line-height: 1.12; }
  .lead { font-size: 1.02rem; }
  .sy-hero-net { opacity: .22; }
  .sy-hero-copy .btn { width: 100%; }            /* botões do hero empilhados e largos (toque) */
  .sy-vibe { min-height: 170px; }
  .sy-chat__body { height: 300px; }
  .sy-tb-type { padding: 6px 11px; font-size: 12px; }
  .sy-tb-row { font-size: 12.5px; }
  .sy-optcard { min-height: 52px; }
}
@media (max-width: 575.98px) {
  h2.fw-800 { font-size: 1.42rem; }
  .display-5 { font-size: 1.55rem; }
  .lead { font-size: .98rem; }
  .btn { padding-top: .62rem; padding-bottom: .62rem; }
  .sy-logo-slot { height: 64px; }
  .sy-eco-meta li { font-size: 11.5px; }
  .p-4.p-md-5 { padding: 1.25rem !important; }
  .sy-hero .sy-kicker, .sy-band .sy-kicker { font-size: 11px; }
}