/* ════════════════════════════════════════════════════════
   SECTECH V10 — Ajustes finais de experiência
   Foco: Sectech primeiro, Stella IA como complemento inteligente,
   tipografia estável, marca maior, responsividade e CRM por conversa.
═════════════════════════════════════════════════════════ */

:root {
  --v10-max: 1280px;
  --v10-safe-x: clamp(1rem, 3vw, 2.25rem);
  --v10-cyan: #00f2fe;
  --v10-blue: #4facfe;
  --v10-violet: #8b5cf6;
}

/* Marca maior e mais legível no header */
.header .brand {
  min-width: clamp(260px, 25vw, 390px) !important;
  gap: clamp(.75rem, 1.15vw, 1.15rem) !important;
}

.header .brand-mark,
.mobile-panel .brand-mark,
.footer .brand-mark {
  width: clamp(170px, 17vw, 240px) !important;
  height: clamp(54px, 5.8vw, 76px) !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
}

.header .brand-mark img,
.mobile-panel .brand-mark img,
.footer .brand-mark img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
  filter: drop-shadow(0 0 14px rgba(0, 242, 254, .14)) !important;
}

.header .brand-name,
.mobile-panel .brand-name,
.footer .brand-name {
  display: none !important;
}

.header .brand-sub,
.mobile-panel .brand-sub,
.footer .brand-sub {
  display: block !important;
  max-width: 210px !important;
  color: rgba(203, 226, 246, .78) !important;
  font-size: clamp(.56rem, .68vw, .72rem) !important;
  line-height: 1.35 !important;
  letter-spacing: clamp(.12em, .52vw, .22em) !important;
  text-transform: uppercase !important;
  white-space: normal !important;
}

/* Header mais equilibrado em notebooks */
.header .nav {
  width: min(var(--v10-max), calc(100% - (var(--v10-safe-x) * 2))) !important;
  min-height: clamp(84px, 7.2vw, 96px) !important;
}

.header .nav-links {
  gap: clamp(.85rem, 1.35vw, 1.7rem) !important;
}

.header .nav-links a {
  font-size: clamp(.68rem, .78vw, .82rem) !important;
  letter-spacing: clamp(.11em, .55vw, .2em) !important;
}

.header .nav-actions {
  flex: 0 0 auto !important;
}

.header .btn {
  white-space: nowrap !important;
}

.flag-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  flex: 0 0 40px !important;
  box-shadow: 0 0 0 1px rgba(0, 242, 254, .18), 0 0 22px rgba(0, 242, 254, .08) !important;
}

.flag-btn img {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

/* Tipografia premium sem exagero */
.cinematic-shell {
  padding-top: clamp(116px, 10vw, 148px) !important;
}

.hero-v9 {
  gap: clamp(2.4rem, 5vw, 6rem) !important;
}

.hero-v9 h1,
.glitch-lite {
  font-size: clamp(3.05rem, 7.1vw, 7.25rem) !important;
  line-height: .89 !important;
  letter-spacing: clamp(-.078em, -0.55vw, -.05em) !important;
  max-width: 1040px !important;
}

.hero-lede-v9 {
  max-width: 760px !important;
  font-size: clamp(1.05rem, 1.42vw, 1.24rem) !important;
  line-height: 1.75 !important;
  color: rgba(207, 224, 240, .82) !important;
}

.section-title {
  font-size: clamp(2.45rem, 4.4vw, 5.1rem) !important;
  line-height: .98 !important;
  letter-spacing: clamp(-.062em, -0.35vw, -.035em) !important;
}

.section-subtitle,
.hero-copy {
  font-size: clamp(1.03rem, 1.55vw, 1.25rem) !important;
  line-height: 1.75 !important;
}

.card-title,
.case-title {
  font-size: clamp(1.55rem, 2.2vw, 2.35rem) !important;
  line-height: 1.08 !important;
}

.card-text,
.case-body p {
  font-size: clamp(.98rem, 1.18vw, 1.12rem) !important;
  line-height: 1.68 !important;
}

/* Hero: Stella como complemento, não como foco único */
.stella-stage {
  min-height: clamp(520px, 48vw, 680px) !important;
}

.orb-system {
  transform: scale(.9) !important;
  opacity: .86 !important;
}

.hud-card strong {
  font-size: clamp(.98rem, 1vw, 1.08rem) !important;
}

.hud-card span {
  font-size: clamp(.78rem, .9vw, .92rem) !important;
  line-height: 1.48 !important;
}

.command-bar {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.command-bar article strong {
  font-size: clamp(1.15rem, 1.6vw, 1.75rem) !important;
}

.command-bar article span {
  font-size: clamp(.72rem, .82vw, .88rem) !important;
}

/* Faixa de temas que a Stella domina */
.stella-scope-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  margin-top: 1.35rem;
}

.stella-scope-chip {
  border: 1px solid rgba(0, 242, 254, .18);
  background: linear-gradient(135deg, rgba(0, 242, 254, .065), rgba(139, 92, 246, .055));
  border-radius: 999px;
  padding: .72rem .9rem;
  color: rgba(224, 246, 255, .86);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

/* Stella panel: conversa mais clara e dinâmica */
.stella-fab {
  width: 156px !important;
  height: 62px !important;
  border-radius: 999px !important;
  gap: .65rem !important;
  padding: 0 .95rem !important;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.95), rgba(0,242,254,.18) 28%, transparent 45%),
    linear-gradient(135deg, rgba(8,15,30,.96), rgba(2,6,23,.98)) !important;
}

.stella-fab-label {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
  color: #eaffff;
  font-weight: 950;
  letter-spacing: .02em;
  font-size: .86rem;
  white-space: nowrap;
}

.stella-fab-label small {
  font-size: .58rem;
  color: rgba(154, 231, 255, .78);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.stella-panel {
  width: min(460px, calc(100vw - 32px)) !important;
  height: min(680px, calc(100vh - 128px)) !important;
  border-radius: 28px !important;
}

.stella-head {
  padding: 1.15rem 1.25rem !important;
}

.stella-head-id strong {
  font-size: 1.02rem !important;
}

.stella-status {
  font-size: .72rem !important;
}

.stella-progress {
  padding: .78rem 1.25rem;
  border-bottom: 1px solid rgba(0,242,254,.1);
  background: rgba(0,242,254,.028);
}

.stella-progress-top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: rgba(219,242,255,.78);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .55rem;
}

.stella-progress-bar {
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}

.stella-progress-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--v10-blue), var(--v10-cyan), var(--v10-violet));
  box-shadow: 0 0 18px rgba(0,242,254,.34);
  transition: width .3s ease;
}

.stella-msg {
  font-size: .92rem !important;
  line-height: 1.62 !important;
}

.stella-msg.bot {
  background: linear-gradient(135deg, rgba(0,242,254,.08), rgba(79,172,254,.035)) !important;
}

.stella-msg.system {
  align-self: center;
  max-width: 100%;
  font-size: .75rem !important;
  color: rgba(190,225,245,.72);
  background: rgba(255,255,255,.035);
  border: 1px dashed rgba(0,242,254,.18);
  text-align: center;
}

.stella-quick {
  max-height: 96px;
  overflow: auto;
  scrollbar-width: thin;
}

.stella-quick button {
  font-size: .76rem !important;
  padding: .48rem .82rem !important;
}

.stella-form {
  align-items: center !important;
}

.stella-form input {
  min-height: 44px !important;
}

.stella-mic-btn,
.stella-icon-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0,242,254,.18) !important;
  background: rgba(0,242,254,.07) !important;
  color: #dff8ff !important;
  border-radius: 999px !important;
}

.stella-mic-btn.listening {
  animation: stellaMicPulse .85s ease-in-out infinite alternate;
  border-color: rgba(25,230,176,.62) !important;
}

@keyframes stellaMicPulse {
  from { box-shadow: 0 0 0 rgba(25,230,176,0); }
  to { box-shadow: 0 0 24px rgba(25,230,176,.32); }
}

.stella-wa-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding: .72rem .95rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: #fff;
  font-size: .82rem;
  font-weight: 950;
  box-shadow: 0 14px 36px rgba(34, 197, 94, .18);
}

.stella-summary-card {
  align-self: stretch;
  max-width: 100%;
  border: 1px solid rgba(0,242,254,.18);
  border-radius: 18px;
  padding: .9rem;
  background: rgba(255,255,255,.04);
  color: #dff8ff;
  font-size: .82rem;
  line-height: 1.55;
}

.stella-summary-card strong {
  display: block;
  color: #9eefff;
  margin-bottom: .25rem;
}

/* IA nativa */
.ai-native-panel {
  border-radius: clamp(24px, 3vw, 36px) !important;
}

.ai-native-log {
  min-height: 330px !important;
}

.ai-bubble {
  font-size: clamp(.9rem, 1vw, 1rem) !important;
  line-height: 1.6 !important;
}

/* Tabelas e CRM */
.table-wrap {
  overflow-x: auto !important;
}

/* Desktop menor/notebook */
@media (max-width: 1180px) {
  .header .brand {
    min-width: clamp(230px, 25vw, 330px) !important;
  }

  .header .brand-mark {
    width: clamp(150px, 15vw, 210px) !important;
  }

  .header .brand-sub {
    max-width: 150px !important;
  }

  .header .nav-links a[href="crm.html"] {
    display: none !important;
  }

  .hero-v9 {
    grid-template-columns: 1fr !important;
  }

  .stella-stage {
    min-height: 480px !important;
  }

  .command-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Tablet */
@media (max-width: 920px) {
  .header .brand {
    min-width: auto !important;
  }

  .header .brand-mark {
    width: clamp(160px, 34vw, 220px) !important;
    height: 58px !important;
  }

  .header .brand > span:last-child {
    display: none !important;
  }

  .hero-v9 h1,
  .glitch-lite {
    font-size: clamp(2.85rem, 10vw, 5.4rem) !important;
    line-height: .93 !important;
  }

  .section-title {
    font-size: clamp(2.25rem, 7vw, 4.4rem) !important;
  }

  .stella-scope-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile */
@media (max-width: 640px) {
  .header .nav {
    min-height: 76px !important;
  }

  .header .brand-mark {
    width: 152px !important;
    height: 52px !important;
  }

  .cinematic-shell {
    padding-top: 92px !important;
  }

  .hero-v9 h1,
  .glitch-lite {
    font-size: clamp(2.55rem, 12.4vw, 4rem) !important;
    line-height: .97 !important;
    letter-spacing: -.055em !important;
  }

  .hero-lede-v9 {
    font-size: 1rem !important;
    line-height: 1.68 !important;
  }

  .hero-actions-v9,
  .hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .hero-actions-v9 .btn,
  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .command-bar {
    grid-template-columns: 1fr !important;
  }

  .stella-stage {
    min-height: 390px !important;
  }

  .hud-stack {
    gap: .75rem !important;
  }

  .stella-scope-grid {
    grid-template-columns: 1fr;
  }

  .stella-fab {
    width: 62px !important;
    height: 62px !important;
    padding: 0 !important;
  }

  .stella-fab-label {
    display: none !important;
  }

  .stella-panel {
    right: 10px !important;
    left: 10px !important;
    bottom: 82px !important;
    width: auto !important;
    height: min(660px, calc(100vh - 104px)) !important;
    max-height: none !important;
    border-radius: 24px !important;
  }

  .stella-quick {
    max-height: 120px;
  }

  .stella-form {
    padding: .85rem !important;
    gap: .45rem !important;
  }

  .stella-form input {
    font-size: .82rem !important;
    padding-inline: .85rem !important;
  }

  .stella-msg {
    max-width: 92% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cinema-track,
  .orb-ring-v9,
  .stella-fab-pulse {
    animation: none !important;
  }
}


/* Páginas internas que usam .site-header/.nav-shell */
.site-header .brand img {
  width: clamp(168px, 16vw, 238px) !important;
  max-height: 68px !important;
  object-fit: contain !important;
}

.site-header .brand {
  min-width: clamp(260px, 24vw, 360px) !important;
  gap: .9rem !important;
}

.site-header .brand span {
  font-size: clamp(.56rem, .72vw, .72rem) !important;
  line-height: 1.35 !important;
  letter-spacing: clamp(.1em, .45vw, .2em) !important;
}

.site-header .main-nav a {
  font-size: clamp(.72rem, .84vw, .86rem) !important;
}

@media (max-width: 920px) {
  .site-header .brand {
    min-width: auto !important;
  }
  .site-header .brand img {
    width: clamp(156px, 36vw, 224px) !important;
  }
  .site-header .brand span {
    display: none !important;
  }
}