/* ═══════════════════════════════════════════════════════
   FULLTREINA — Tokens, reset e primitivas de acessibilidade
   ═══════════════════════════════════════════════════════ */

/* ─── Design Tokens ─── */
:root {
  /* Palette */
  --black:       #09090b;
  --graphite:    #18181b;
  --graphite-l:  #27272a;
  --slate:       #3f3f46;
  --muted:       #a1a1aa;
  --light:       #e4e4e7;
  --white:       #fafafa;
  --accent:      #3b82f6;
  --accent-deep: #2563eb;
  --teal:        #06b6d4;
  --accent-glow: rgba(59, 130, 246, 0.25);

  /* Famílias de serviço */
  --fam-ativos:         #3b82f6;
  --fam-confiabilidade: #06b6d4;
  --fam-pcm:            #6366f1;
  --fam-sap:            #f59e0b;
  --fam-ia:             #8b5cf6;
  --fam-digital:        #10b981;

  /* Cor local do card/página — sobrescrita por [data-familia] */
  --c:  var(--accent);
  --c2: var(--teal);

  /* Surfaces */
  --bg:          #09090b;
  --bg-card:     rgba(24, 24, 27, 0.6);
  --glass:       rgba(9, 9, 11, 0.8);
  --border:      rgba(63, 63, 70, 0.4);
  --border-hover:rgba(59, 130, 246, 0.5);

  /* Layout */
  --max-w: 1400px;
  --header-h: 84px;

  /* Motion */
  --ease:  cubic-bezier(0.16, 1, 0.3, 1);
  --tr:    all 0.5s var(--ease);
  --tr-fast: all 0.3s var(--ease);
}

/* Mapeamento família → cor local */
[data-familia="ativos"]         { --c: var(--fam-ativos);         --c2: #60a5fa; }
[data-familia="confiabilidade"] { --c: var(--fam-confiabilidade); --c2: #22d3ee; }
[data-familia="pcm"]            { --c: var(--fam-pcm);            --c2: #818cf8; }
[data-familia="sap"]            { --c: var(--fam-sap);            --c2: #fbbf24; }
[data-familia="ia"]             { --c: var(--fam-ia);             --c2: #a78bfa; }
[data-familia="digital"]        { --c: var(--fam-digital);        --c2: #34d399; }

/* ─── Reset & Base ─── */
*, *::before, *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--light);
  line-height: 1.7;
  overflow-x: hidden;
}

/* Textura sutil sobre o fundo — tira o aspecto "chapado" */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4, .logo {
  font-family: "Outfit", sans-serif;
  line-height: 1.1;
  color: var(--white);
}

h2 { font-weight: 700; }

a {
  text-decoration: none;
  color: inherit;
  transition: var(--tr-fast);
}

img { max-width: 100%; display: block; }

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 4rem);
}

.container-narrow {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 4rem);
}

/* ─── Acessibilidade ─── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--accent);
  color: #fff;
  padding: 0.8rem 1.5rem;
  border-radius: 0 0 12px 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ─── Utility ─── */
.accent-text {
  background: linear-gradient(135deg, var(--accent), var(--teal));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.centered { text-align: center; }

.icon {
  width: 1em; height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ─── Scroll progress ─── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), var(--teal));
  z-index: 1100;
  pointer-events: none;
}