/* =========================================================
   FluxUI v6.8 — Experience, legibility and pre-attendance
   Carregado após o stylesheet principal para vencer legados.
   ========================================================= */

/* Mantém o índice fora do fluxo após as regras genéricas de camada. */
.capability-card > .cap-index {
  position: absolute !important;
  inset: 18px 18px auto auto !important;
  z-index: 2;
}

.capability-card.is-visible > :is(h3,p,.cap-tags),
body.motion-reduced .capability-card > :is(h3,p,.cap-tags) {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Um único indicador ativo evita o desenho em formato de “L”. */
.process-grid .process-step::after {
  content: none !important;
  display: none !important;
}

.process-grid .process-step {
  opacity: .62;
}

.process-grid .process-step.is-active {
  opacity: 1;
  transform: translate3d(4px,0,0);
}

/* Todos os campos reservam a mesma faixa de feedback. */
.contact-form,
.form-grid,
.form-grid > label {
  min-width: 0;
}

.form-grid {
  grid-template-columns: repeat(2,minmax(0,1fr));
  align-items: start;
}

.form-grid > label:not(.form-honeypot) {
  grid-template-rows: auto minmax(44px,auto) minmax(12px,auto);
  align-content: start;
}

.form-grid > label:not(.form-honeypot) > :is(input,select,textarea) {
  grid-row: 2;
}

.form-grid > label:not(.form-honeypot) > .field-error {
  grid-row: 3;
}

/* O conteúdo nunca fica preso em opacity: 0 se o observer falhar. */
html:not(.has-js) .reveal,
body.motion-reduced .reveal {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
}

html.has-js body:not(.motion-reduced) .reveal:not(.is-visible) {
  animation: fluxV68RevealFailsafe .01s 4s forwards;
}

@keyframes fluxV68RevealFailsafe {
  to {
    opacity: 1;
    visibility: visible;
    transform: none;
    filter: none;
  }
}

/* Loader consistente em desktop, mobile e preferência de motion reduzido. */
.site-loader {
  display: grid !important;
}

@media (min-width: 761px) {
  .site-loader {
    padding: 28px;
  }

  .loader-shell {
    width: min(620px,calc(100vw - 72px));
  }

  .loader-modal {
    min-height: 350px;
    padding: 36px 38px;
  }
}

/* Statement com hierarquia editorial legível e sem scroll artificial. */
.statement-section {
  min-height: auto !important;
  padding: clamp(88px,9vw,126px) 0 !important;
}

.statement-section .statement-grid {
  position: static !important;
  top: auto !important;
  grid-template-columns: minmax(120px,.22fr) minmax(0,1.08fr) minmax(280px,.62fr);
  gap: clamp(30px,4.5vw,70px);
  align-items: start;
}

.statement-grid h2 {
  max-width: 790px;
  font-size: clamp(40px,4.25vw,64px);
  line-height: 1.045;
  letter-spacing: -.052em;
  text-wrap: balance;
}

.statement-grid p {
  max-width: 430px;
  margin-top: 8px;
  color: #a3afbd;
  font-size: clamp(13px,1vw,15px);
  line-height: 1.78;
}

[data-statement-title] .statement-word {
  color: #7d8896;
}

[data-statement-title] .statement-word.is-lit {
  color: #f3f7fb;
}

/* Textos de solução com contraste mínimo estável. */
.solution-type {
  color: #7f8b99;
  font-size: 9px;
}

.solution-copy h3 {
  font-size: clamp(23px,2vw,30px);
  line-height: 1.12;
}

.solution-copy p {
  color: #9ca8b6;
  font-size: 12px;
  line-height: 1.75;
}

.solution-copy ul {
  color: #8d99a7;
  font-size: 10px;
}

/* Comparativo antes/depois: leitura de evolução contínua. */
.art-redesign {
  position: relative;
  overflow: hidden;
}

.redesign-before,
.redesign-after {
  position: relative;
  overflow: hidden;
}

.redesign-before i,
.redesign-after i {
  transform-origin: left center;
}

.redesign-arrow {
  display: grid;
  place-items: center;
  gap: 5px;
}

.redesign-arrow span {
  display: block;
  font-size: 21px;
}

.redesign-arrow small {
  color: #526d95;
  font-size: 6px;
  font-weight: 800;
  letter-spacing: .12em;
  writing-mode: vertical-rl;
}

body.motion-native:not(.motion-reduced) .solution-card.is-visible .redesign-before i {
  animation: fluxV68BeforeLine 3.2s ease-in-out infinite;
}

body.motion-native:not(.motion-reduced) .solution-card.is-visible .redesign-after i {
  animation: fluxV68AfterLine 3.2s cubic-bezier(.16,1,.3,1) infinite;
}

body.motion-native:not(.motion-reduced) .solution-card.is-visible .redesign-arrow span {
  animation: fluxV68Arrow 1.65s cubic-bezier(.16,1,.3,1) infinite;
}

.redesign-before i:nth-of-type(2),
.redesign-after i:nth-of-type(2) { animation-delay: .14s !important; }
.redesign-before i:nth-of-type(3),
.redesign-after i:nth-of-type(3) { animation-delay: .28s !important; }

@keyframes fluxV68BeforeLine {
  0%,100% { opacity: .62; transform: scaleX(.94); }
  50% { opacity: .34; transform: scaleX(.78); }
}

@keyframes fluxV68AfterLine {
  0%,18% { opacity: .48; transform: scaleX(.72); }
  52%,100% { opacity: 1; transform: scaleX(1); box-shadow: 0 0 18px rgba(77,143,247,.14); }
}

@keyframes fluxV68Arrow {
  0%,100% { color: #628bc8; transform: translateX(-3px); }
  50% { color: #a9caff; transform: translateX(4px); }
}

/* Etapas mantêm um único action indicator e contraste adequado. */
.process-grid .process-step {
  opacity: .68;
}

.process-grid .process-step.is-active {
  opacity: 1;
}

.process-grid .process-step.is-active::before {
  opacity: 1;
  transform: scaleY(1);
}

.process-grid .process-step h3 {
  color: #dce3ec;
}

.process-grid .process-step p {
  color: #8e99a7;
  font-size: 11px;
}

/* Atalhos flutuantes. */
.floating-actions {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1500;
  display: flex;
  align-items: center;
  gap: 9px;
}

.back-to-top,
.fluxia-trigger,
.fluxia-header button,
.fluxia-primary,
.fluxia-secondary,
.fluxia-options button {
  border: 0;
  font: inherit;
  cursor: pointer;
}

.back-to-top {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid #2a3541;
  border-radius: 13px;
  color: #b8c7da;
  background: rgba(12,16,20,.9);
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s ease, visibility .25s linear, transform .35s cubic-bezier(.16,1,.3,1), border-color .25s ease;
  backdrop-filter: blur(16px);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  border-color: #527bb6;
  color: #fff;
  transform: translateY(-2px);
}

.fluxia-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 7px 13px 7px 8px;
  border: 1px solid rgba(96,151,239,.34);
  border-radius: 15px;
  color: #e8f1ff;
  background: linear-gradient(145deg,rgba(30,56,91,.96),rgba(11,17,24,.96));
  box-shadow: 0 18px 46px rgba(0,0,0,.34), 0 0 30px rgba(65,125,220,.09);
  text-align: left;
  transition: transform .32s cubic-bezier(.16,1,.3,1), border-color .25s ease;
  backdrop-filter: blur(18px);
}

.fluxia-trigger:hover {
  border-color: rgba(116,174,255,.58);
  transform: translateY(-2px);
}

.fluxia-trigger-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  color: #f5f8fc;
  background: rgba(255,255,255,.055);
  font: 800 14px/1 Manrope,sans-serif;
}

.fluxia-trigger-mark span { color: #72a8ff; }
.fluxia-trigger > span:last-child { display: grid; gap: 2px; }
.fluxia-trigger strong { font-size: 11px; }
.fluxia-trigger small { color: #8698ae; font-size: 8px; }

/* FluxIA: pré-atendimento local, acessível e sem dependências externas. */
.fluxia-panel {
  position: fixed;
  right: 22px;
  bottom: 82px;
  z-index: 1600;
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto;
  width: min(390px,calc(100vw - 32px));
  max-height: min(650px,calc(100dvh - 110px));
  overflow: hidden;
  border: 1px solid rgba(112,155,216,.24);
  border-radius: 22px;
  color: #e8edf5;
  background:
    radial-gradient(circle at 90% 0%,rgba(71,133,226,.13),transparent 34%),
    rgba(9,13,18,.975);
  box-shadow: 0 38px 110px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.035);
  opacity: 0;
  transform: translateY(16px) scale(.975);
  transform-origin: bottom right;
  transition: opacity .26s ease, transform .4s cubic-bezier(.16,1,.3,1);
  backdrop-filter: blur(24px) saturate(130%);
}

.fluxia-panel[hidden] { display: none !important; }
.fluxia-panel.is-open { opacity: 1; transform: translateY(0) scale(1); }

.fluxia-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 18px 15px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.fluxia-header > div { display: grid; gap: 5px; }
.fluxia-header h2 { margin: 0; font: 800 23px/1 Manrope,sans-serif; letter-spacing: -.045em; }
.fluxia-status { display: flex; align-items: center; gap: 7px; color: #7790ad; font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.fluxia-status i { width: 5px; height: 5px; border-radius: 50%; background: #62a0ff; box-shadow: 0 0 12px rgba(98,160,255,.7); }
.fluxia-header button { width: 34px; height: 34px; border: 1px solid #27313c; border-radius: 10px; color: #9eabb9; background: #11171d; font-size: 20px; }
.fluxia-header button:hover { color: #fff; border-color: #435a76; }

.fluxia-body {
  min-height: 310px;
  padding: 18px;
  overflow-y: auto;
}

.fluxia-intro { display: grid; gap: 9px; }
.fluxia-intro > span { color: #679cf0; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.fluxia-intro strong { font: 750 18px/1.2 Manrope,sans-serif; letter-spacing: -.03em; }
.fluxia-intro p { margin: 0; color: #8492a2; font-size: 11px; line-height: 1.6; }

.fluxia-options { display: grid; gap: 8px; margin-top: 18px; }
.fluxia-options button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid #252f3a;
  border-radius: 12px;
  color: #cbd5e1;
  background: rgba(255,255,255,.018);
  font-size: 11px;
  text-align: left;
  transition: color .2s ease, border-color .24s ease, background .24s ease, transform .28s cubic-bezier(.16,1,.3,1);
}
.fluxia-options button::after { content: "→"; color: #536a87; }
.fluxia-options button:hover { color: #fff; border-color: rgba(91,151,247,.42); background: rgba(77,143,247,.055); transform: translateX(3px); }

.fluxia-context { display: grid; gap: 9px; margin-top: 18px; }
.fluxia-context label { color: #bfc9d6; font-size: 10px; font-weight: 700; }
.fluxia-context textarea {
  width: 100%;
  min-height: 112px;
  padding: 12px;
  border: 1px solid #2a3541;
  border-radius: 12px;
  outline: 0;
  color: #eef3f9;
  background: #10161c;
  resize: vertical;
  font: 400 12px/1.55 Inter,sans-serif;
}
.fluxia-context textarea:focus { border-color: #4b76ad; box-shadow: 0 0 0 3px rgba(77,143,247,.08); }
.fluxia-context small { color: #697788; font-size: 8px; }
.fluxia-context small.is-error { color: #e18b92; }

.fluxia-primary,
.fluxia-secondary {
  min-height: 43px;
  padding: 0 14px;
  border-radius: 11px;
  font-size: 10px;
  font-weight: 750;
}
.fluxia-primary { color: #09111d; background: #e7f0ff; }
.fluxia-primary:hover { background: #fff; }
.fluxia-secondary { border: 1px solid #2a3541; color: #9eabb9; background: transparent; }
.fluxia-secondary:hover { color: #fff; border-color: #42536a; }

.fluxia-summary { display: grid; gap: 12px; margin-top: 18px; }
.fluxia-summary > span { color: #65a0ff; font-size: 8px; font-weight: 800; letter-spacing: .11em; }
.fluxia-summary > strong { font: 750 17px/1.25 Manrope,sans-serif; letter-spacing: -.025em; }
.fluxia-summary > p { margin: 0; color: #8d9bab; font-size: 10px; line-height: 1.65; white-space: pre-line; }
.fluxia-summary > div { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 3px; }

.fluxia-footer {
  display: grid;
  gap: 10px;
  padding: 13px 18px 15px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.fluxia-footer > span { color: #637182; font-size: 8px; line-height: 1.45; }
.fluxia-footer > i { display: block; height: 2px; overflow: hidden; border-radius: 99px; background: #1f2832; }
.fluxia-footer b { display: block; width: 25%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#437fdc,#8ab7ff); transform-origin: left; transition: width .42s cubic-bezier(.16,1,.3,1); }

@media (prefers-reduced-motion: reduce) {
  .site-loader { display: grid !important; }
  .redesign-before i,
  .redesign-after i,
  .redesign-arrow span { animation: none !important; }
  .back-to-top,
  .fluxia-trigger,
  .fluxia-panel,
  .fluxia-options button { transition-duration: .01ms !important; }
}

@media (max-width: 760px) {
  .capability-card > .cap-index {
    inset: 17px 17px auto auto !important;
  }

  .form-grid {
    grid-template-columns: minmax(0,1fr);
  }

  .form-grid > label:not(.form-honeypot) {
    grid-template-rows: auto minmax(49px,auto) minmax(13px,auto);
  }

  .process-grid .process-step.is-active {
    transform: none !important;
  }

  .hero-dashboard.reveal,
  .hero-dashboard.reveal.is-visible {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
  }

  .hero-dashboard .dashboard-body {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    min-height: 0 !important;
  }

  .hero-dashboard .dash-content { display: block !important; }

  .statement-section .statement-grid {
    grid-template-columns: minmax(0,1fr);
    gap: 20px;
  }

  .statement-grid h2 {
    font-size: clamp(34px,9.7vw,46px);
    line-height: 1.055;
  }

  .statement-grid p {
    max-width: none;
    font-size: 14px;
    line-height: 1.72;
  }

  .solution-copy p { font-size: 13px; }
  .process-grid .process-step p { font-size: 12px; }

  .floating-actions { right: 14px; bottom: 14px; gap: 7px; }
  .back-to-top { width: 42px; height: 42px; }
  .fluxia-trigger { min-height: 45px; padding: 6px; border-radius: 14px; }
  .fluxia-trigger > span:last-child { display: none; }
  .fluxia-trigger-mark { width: 32px; height: 32px; }

  .fluxia-panel {
    right: 12px;
    bottom: 68px;
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 84px);
    border-radius: 19px;
  }

  .fluxia-body { min-height: 290px; padding: 16px; }
  .fluxia-summary > div { grid-template-columns: 1fr; }
  .fluxia-primary,.fluxia-secondary { width: 100%; }
}

@media (max-width: 430px) {
  .hero-dashboard .dash-grid,
  .hero-dashboard .dash-lower {
    grid-template-columns: minmax(0,1fr) !important;
  }

  .art-redesign { grid-template-columns: minmax(0,1fr); }
  .redesign-arrow { transform: none !important; }
  .redesign-arrow small { writing-mode: horizontal-tb; }
}