/* ==========================================================================
   VITRINE - tipografia e movimento da landing (welcome.php)
   --------------------------------------------------------------------------
   Tres vozes, em vez de uma so (Inter em tudo):
     - Display  Sora 800, apertada, para titulos; palavras-chave em degrade
                dourado ou prata com brilho que corre devagar.
     - Mono     JetBrains Mono, caixa alta e espacada, para rotulos, cargos e
                tudo que parece "terminal".
     - Serifa   Instrument Serif italico, so no cumprimento: a unica nota
                humana no meio da tecnica.
   O movimento e feito de transform/opacity (barato) e some com
   prefers-reduced-motion. O JS (vitrine-fx.js) so liga e desliga estados.
   ========================================================================== */

:root {
  --font-display: 'Sora', 'Inter', system-ui, -apple-system, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  /* Dourado para fundo claro: escuro o bastante para ler como texto grande. */
  --ft-gold-1: #7a4f06;
  --ft-gold-2: #9a6410;
  --ft-gold-3: #6a4505;
  --ft-ink-gold: #8a5a08;
}

:root:not([data-theme="light"]) {
  --ft-gold-1: #fff0c2;
  --ft-gold-2: #f4c75f;
  --ft-gold-3: #c98a1f;
  --ft-ink-gold: #f4c75f;
}

/* O heroi e escuro nos dois temas: la o dourado e o vivo. */
.signature-hero-card {
  --ft-gold-1: #fff0c2;
  --ft-gold-2: #f4c75f;
  --ft-gold-3: #c98a1f;
  --ft-ink-gold: #f4c75f;
}

html { scroll-behavior: smooth; }
#inicio, #equipe, #produtos, #tecnologia, #contato { scroll-margin-top: 92px; }

/* ------------------------------------------------------------ degrades -- */
.ft-gold,
.ft-silver {
  font-style: normal;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--ft-gold-2);
  background-size: 220% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: ft-shine 8s ease-in-out infinite alternate;
}

.ft-gold {
  background-image: linear-gradient(100deg, var(--ft-gold-1) 0%, var(--ft-gold-2) 36%, var(--ft-gold-3) 62%, var(--ft-gold-2) 100%);
}

.ft-silver {
  color: #cfd7e6;
  background-image: linear-gradient(100deg, #ffffff 0%, #b4bfd3 40%, #8e9bb3 62%, #e6ecf7 100%);
  animation-duration: 10s;
}

@keyframes ft-shine {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

/* Serifa italica: so no cumprimento. */
.ft-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.18em;
  letter-spacing: 0;
  color: var(--ft-ink-gold);
}


/* --------------------------------------------------------- titulo do heroi -- */
.signature-content-cell h1.ft-h1 {
  max-width: 840px;
  font-family: var(--font-display) !important;
  font-size: clamp(2.15rem, 4vw, 4.4rem) !important;
  font-weight: 800 !important;
  line-height: 1.01 !important;
  letter-spacing: -0.045em !important;
  text-wrap: balance;
}

.ft-h1 .w {
  display: inline-block;
  animation: ft-word 0.95s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 75ms + 140ms);
}

@keyframes ft-word {
  from { opacity: 0; transform: translateY(0.5em) rotateX(35deg); filter: blur(9px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

/* Linha dourada com brilho que se desenha embaixo de "Protheus." */
.ft-underline { position: relative; }

.ft-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.07em;
  height: max(3px, 0.07em);
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, #f4c75f 18%, #fff3c8 50%, #f4c75f 82%, transparent);
  box-shadow: 0 0 20px rgba(244, 199, 95, 0.75);
  transform: scaleX(0);
  transform-origin: left center;
  animation: ft-draw 1.1s 1.15s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes ft-draw { to { transform: scaleX(1); } }

/* Palavras-chave do paragrafo */
.signature-content-cell p b {
  color: #f7faff;
  font-weight: 600;
}

/* ------------------------------------------------------------- console -- */
.ft-console {
  display: flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  max-width: 100%;
  margin-top: 18px;
  padding: 9px 14px;
  border: 1px solid rgba(244, 199, 95, 0.22);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.32);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: rgba(226, 234, 246, 0.8);
  min-height: 38px;
}

.ft-prompt { color: #f4c75f; font-weight: 800; }
.ft-console-text { white-space: pre; overflow: hidden; text-overflow: ellipsis; }

.ft-caret {
  width: 7px;
  height: 1.1em;
  background: #6fe7ff;
  box-shadow: 0 0 10px rgba(111, 231, 255, 0.8);
  animation: ft-blink 1s steps(2, start) infinite;
}

@keyframes ft-blink { to { visibility: hidden; } }

/* --------------------------------------------------------------- pilulas -- */
.capability-pill {
  transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.capability-pill:hover {
  transform: translateY(-2px);
  border-color: rgba(244, 199, 95, 0.6);
  color: #fff;
  box-shadow: 0 6px 22px rgba(226, 170, 66, 0.22);
}

/* ------------------------------------------------------ logo 3D + globo -- */
.signature-brand-cell img.ft-logo3d {
  border-radius: 14px !important;
  transform: perspective(900px) rotateY(var(--ry, -14deg)) rotateX(var(--rx, 5deg)) !important;
  transition: transform 0.28s ease-out;
  box-shadow:
    0 0 0 1px rgba(244, 199, 95, 0.3),
    0 0 76px rgba(226, 170, 66, 0.24),
    0 42px 64px rgba(0, 0, 0, 0.55);
  animation: ft-float 7s ease-in-out infinite;
}

@keyframes ft-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -9px; }
}

.signature-message-cell > *:not(.ft-globe):not(.ft-glow) { position: relative; z-index: 1; }

.ft-globe {
  position: absolute;
  top: -24px;
  right: -10px;
  width: min(54%, 270px);
  aspect-ratio: 1;
  z-index: 0;
  pointer-events: none;
  opacity: 0.95;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 66%, transparent 80%);
  mask-image: radial-gradient(circle at 50% 50%, #000 66%, transparent 80%);
}

.signature-message-cell strong.ft-lead {
  max-width: 64%;
  color: #ffffff !important;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.65vw, 1.6rem) !important;
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.03em;
}

/* ----------------------------------------------------------- faixa mono -- */
.ft-marquee {
  position: relative;
  width: min(1440px, 100%);
  overflow: hidden;
  padding: 13px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

[data-theme="light"] .ft-marquee { border-color: rgba(20, 18, 10, 0.1); }

.ft-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 38px;
  padding-right: 38px;
  animation: ft-marquee 42s linear infinite;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ft-marquee:hover .ft-marquee-track { animation-play-state: paused; }

.ft-marquee-track span { color: var(--text-dim); }
.ft-marquee-track span:nth-child(4n + 3) {
  color: transparent;
  -webkit-text-stroke: 1px var(--ft-gold-2);
}

.ft-marquee-track i {
  font-style: normal;
  color: var(--ft-gold-2);
  font-size: 0.6rem;
}

@keyframes ft-marquee { to { transform: translateX(-50%); } }

/* --------------------------------------------------------- cabecalhos -- */
.welcome-section-head h2.ft-h2,
.product-panel h2.ft-h2,
.etiquetas-texto h2.ft-h2 {
  font-family: var(--font-display) !important;
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.042em;
  text-wrap: balance;
}

.ft-h2 .ft-line { display: block; }

.welcome-section-head { align-items: flex-end; }

/* Lista vertical em mono com a barra inclinada, ao lado do titulo da equipe. */
.ft-stack {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 2px 0 2px 26px;
  display: grid;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
  flex-shrink: 0;
}

.ft-stack::before {
  content: "";
  position: absolute;
  left: 4px;
  top: -6px;
  width: 2px;
  height: 78px;
  border-radius: 2px;
  background: linear-gradient(180deg, transparent, var(--ft-gold-2), transparent);
  transform: rotate(20deg);
  transform-origin: top left;
}

.ft-stack li:first-child { color: var(--ft-gold-2); }

@media (max-width: 980px) { .ft-stack { display: none; } }

/* -------------------------------------------------------------- equipe -- */
.team-card h3 {
  font-family: var(--font-display);
  font-size: 1.22rem !important;
  font-weight: 700;
  letter-spacing: -0.03em !important;
}

:root:not([data-theme="light"]) .team-role {
  color: color-mix(in srgb, var(--team-color, #f4c75f) 80%, #ffffff) !important;
}

[data-theme="light"] .team-role {
  color: color-mix(in srgb, var(--team-color, #9a6410) 62%, #000000) !important;
}

.team-card {
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.28s ease, box-shadow 0.28s ease;
}

.team-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--team-color, #f4c75f) 55%, transparent) !important;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.34), 0 0 0 1px color-mix(in srgb, var(--team-color, #f4c75f) 25%, transparent) !important;
}

.team-card:hover .team-photo {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--team-color, #f4c75f) 45%, transparent), 0 0 30px color-mix(in srgb, var(--team-color, #f4c75f) 55%, transparent);
}

.team-photo { transition: box-shadow 0.28s ease; }

/* ------------------------------------------------------ produto e cartoes -- */
.metric-item strong { font-weight: 800; }

.welcome-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em !important;
}

.welcome-mini-label {
  font-family: var(--font-mono);
  font-size: 0.7rem !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.welcome-card { position: relative; overflow: hidden; transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
.welcome-card:hover { transform: translateY(-5px); }
.welcome-card:hover .welcome-link-row span:last-child { transform: translateX(6px); }
.welcome-link-row span:last-child { transition: transform 0.25s ease; }

/* Numero grande, so contorno, no canto do cartao (o ::before/::after do cartao ja sao da borda). */
.ft-num {
  position: absolute;
  right: 18px;
  bottom: -12px;
  z-index: 0;
  font-family: var(--font-display);
  font-size: 5.6rem;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--ft-gold-2) 38%, transparent);
  pointer-events: none;
  transition: -webkit-text-stroke-color 0.3s ease, transform 0.3s ease;
}

.welcome-card:hover .ft-num {
  -webkit-text-stroke-color: var(--ft-gold-2);
  transform: translateY(-6px);
}

.signature-footer-strip strong {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ----------------------------------------------------- brilho do cursor -- */
.ft-spot { position: relative; }

.ft-glow {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 208, 110, 0.13), transparent 62%);
}

[data-theme="light"] .ft-glow { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(184, 127, 35, 0.12), transparent 62%); }
.signature-hero-card .ft-glow { background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 208, 110, 0.12), transparent 62%); }
.ft-spot:hover > .ft-glow { opacity: 1; }

/* -------------------------------------------------- aparecer ao rolar -- */
html.ft-js:not(.ft-fallback) [data-ft-reveal]:not(.is-in) {
  opacity: 0;
  transform: translateY(26px);
}

[data-ft-reveal] {
  transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: var(--d, 0ms);
}

html.ft-js:not(.ft-fallback) .capability-pill[data-ft-reveal]:not(.is-in) { transform: translateY(12px) scale(0.96); }

/* ----------------------------------------------------------- acessibilidade -- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ft-h1 .w,
  .ft-underline::after,
  .ft-gold,
  .ft-silver,
  .ft-marquee-track,
  .signature-brand-cell img.ft-logo3d,
  .ft-caret { animation: none !important; }
  .ft-underline::after { transform: scaleX(1); }
  .ft-marquee-track { flex-wrap: wrap; width: auto; justify-content: center; }
  [data-ft-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
}

@media (max-width: 760px) {
  .ft-globe { width: 50%; top: -18px; right: -14px; }
  .ft-num { font-size: 4.4rem; }
  .ft-marquee-track { font-size: 0.7rem; gap: 28px; padding-right: 28px; }
}

/* ------------------------------------------- heroi escuro nos dois temas -- */
/* O cartao do heroi continua preto no tema claro, mas varias regras do claro (marrom e cinza
   escuros) alcancavam o texto de dentro e ele sumia no fundo: "FEELTECH", os cartoes de
   Seguranca/Performance/Integracoes e o rotulo CONNECTED ECOSYSTEM ficavam em 2:1. */
[data-theme="light"] .signature-hero-card .signature-kicker { color: var(--nexus-gold-light) !important; }
[data-theme="light"] .signature-hero-card .brand-wordmark-feeltech { color: var(--nexus-gold-light) !important; }
[data-theme="light"] .signature-hero-card .brand-wordmark-maxim { color: var(--nexus-blue-light) !important; }
[data-theme="light"] .signature-hero-card .brand-subtitle { color: rgba(228, 235, 246, 0.6) !important; }
[data-theme="light"] .signature-hero-card .eco-tile { color: #f6f1e7 !important; }
[data-theme="light"] .signature-hero-card .eco-tile span { color: rgba(246, 241, 231, 0.88) !important; }
[data-theme="light"] .signature-hero-card .signature-message-cell::before { color: rgba(136, 189, 255, 0.7) !important; }
[data-theme="light"] .signature-hero-card .btn-secondary { color: #f7faff !important; border-color: rgba(255, 255, 255, 0.28) !important; }

/* ------------------------------------------------------------- celular -- */
/* Sora e mais larga que a Inter: "Especialistas" nao cabia na coluna estreita ao lado do
   logo. No celular o heroi vira uma coluna so: logo, texto, cartao de integracao. */
@media (max-width: 760px) {
  .welcome-container .signature-hero-card { grid-template-columns: minmax(0, 1fr) !important; }

  .welcome-container .signature-brand-cell {
    min-height: 0;
    padding: 24px 22px 0 !important;
  }

  .welcome-container .signature-brand-cell img.ft-logo3d { width: 118px !important; }
  .welcome-container .signature-brand-cell::after { display: none !important; }

  .welcome-container .signature-content-cell { padding: 20px 22px 8px !important; }

  .welcome-container .signature-content-cell h1.ft-h1 {
    font-size: clamp(2rem, 9.2vw, 2.7rem) !important;
    letter-spacing: -0.04em !important;
  }

  .welcome-container .signature-message-cell { margin: 8px 14px 14px !important; }
  .ft-console { max-width: 100%; }
}

/* ------------------------------------------------- Site e Produtos (vitrines) -- */
.site-hub h1,
.products-hub h1 {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  letter-spacing: -0.042em !important;
  line-height: 1.04 !important;
  text-wrap: balance;
}

.site-hub h2,
.products-hub h2 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
}

.site-card-label,
.product-badge {
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.site-card,
.product-card { transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.28s ease; }
.site-card:hover,
.product-card:hover { transform: translateY(-5px); }

/* --------------------------------------------- cartoes de entrada: grade e claro -- */
/* .welcome-cards nao tinha display:grid (so as colunas), entao os tres cartoes empilhavam em
   linhas largas. Com a grade eles ficam lado a lado, como o resto da pagina. */
.welcome-container.site-signature-home .welcome-cards { display: grid; }

/* No claro eram vidro quase preto (!important) em meio a cartoes claros. */
[data-theme="light"] .welcome-container.site-signature-home .welcome-card {
  background: var(--bg-card) !important;
  border-color: var(--border-main) !important;
  box-shadow: var(--shadow-sm) !important;
}

[data-theme="light"] .welcome-container .welcome-card h3 { color: var(--text-main) !important; }
[data-theme="light"] .welcome-container .welcome-card p { color: var(--text-dim) !important; }
[data-theme="light"] .welcome-container .welcome-mini-label,
[data-theme="light"] .welcome-container .welcome-link-row { color: var(--primary) !important; }
[data-theme="light"] .welcome-container .welcome-card svg { color: var(--primary); }

/* O numero grande fica atras do texto do cartao (a seta nao some sob o contorno). */
.welcome-card > :not(.ft-num):not(.ft-glow) { position: relative; z-index: 1; }

/* ------------------------------------------------------- coluna centralizada -- */
/* A landing foi desenhada como coluna flex centralizada (gap, align-items:center), mas a regra
   base do .welcome-container nao existe: o <main> era um bloco e cada secao (largura maxima
   1440px) ficava colada na esquerda, com o vazio todo sobrando na direita em telas largas. */
.welcome-container.site-signature-home {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.welcome-container.site-signature-home > .etiquetas-panel { width: min(1440px, 100%); }