/* ─────────────────────────────────────────────────────────────────────
   Intranet Ibiraçu — custom CSS além do Tailwind
   ───────────────────────────────────────────────────────────────────── */

:root {
  --brand-50:  #f0f9f3;
  --brand-100: #dcf0e1;
  --brand-200: #bce0c8;
  --brand-300: #8cc8a2;
  --brand-400: #58a978;
  --brand-500: #368950;
  --brand-600: #266b3f;
  --brand-700: #1f5634;
  --brand-800: #1b452c;
  --brand-900: #163a26;
  --brand-950: #0b2014;

  --bronze-400: #b89776;
  --bronze-500: #9b7d5f;
  --bronze-600: #7e6450;

  --bg-base:        #f5f8f6;
  --bg-elevated:    rgba(255, 255, 255, 0.72);
  --bg-card:        rgba(255, 255, 255, 0.85);
  --border-soft:    rgba(54, 137, 80, 0.16);
  --text-strong:    #14241b;
  --text-body:      #2f4a3a;
  --text-muted:     #6b7c72;

  --shadow-card:    0 1px 2px rgba(20,40,28,0.04), 0 4px 18px -8px rgba(20,40,28,0.10);
  --shadow-hover:   0 4px 6px rgba(20,40,28,0.06), 0 14px 28px -12px rgba(20,40,28,0.18);

  --font-display: 'Outfit', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
}

.dark {
  --bg-base:        #0a1410;
  --bg-elevated:    rgba(20, 35, 28, 0.55);
  --bg-card:        rgba(18, 32, 24, 0.78);
  --border-soft:    rgba(88, 169, 120, 0.18);
  --text-strong:    #dcf0e1;
  --text-body:      #b1cdb9;
  --text-muted:     #7a948a;

  --shadow-card:    0 1px 2px rgba(0,0,0,0.30), 0 6px 24px -10px rgba(0,0,0,0.50);
  --shadow-hover:   0 4px 8px rgba(0,0,0,0.35), 0 18px 36px -14px rgba(0,0,0,0.60);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--text-body);
  background-color: var(--bg-base);
  background-image:
    radial-gradient(at 8% 10%, rgba(54, 137, 80, 0.18) 0%, transparent 45%),
    radial-gradient(at 92% 6%, rgba(155, 125, 95, 0.16) 0%, transparent 40%),
    radial-gradient(at 50% 100%, rgba(54, 137, 80, 0.10) 0%, transparent 55%);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.dark body {
  background-image:
    radial-gradient(at 10% 10%, rgba(36, 90, 56, 0.32) 0%, transparent 50%),
    radial-gradient(at 90% 5%, rgba(118, 90, 70, 0.20) 0%, transparent 45%),
    radial-gradient(at 50% 100%, rgba(36, 90, 56, 0.18) 0%, transparent 55%);
}

/* SVG grain noise overlay — adds photographic depth */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

main, header, footer, section, aside { position: relative; z-index: 2; }

/* ── Typography ─────────────────────────────────────────────────────── */

.font-display { font-family: var(--font-display); letter-spacing: -0.02em; }
.font-body    { font-family: var(--font-body); }
.font-mono    { font-family: var(--font-mono); }

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-strong); letter-spacing: -0.02em; }

/* ── Glass card primitive ───────────────────────────────────────────── */

.glass {
  background-color: var(--bg-elevated);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border-soft);
  border-radius: 1.25rem;
  box-shadow: var(--shadow-card);
  transition: box-shadow 220ms ease, transform 220ms ease, border-color 220ms ease;
}

.glass-solid {
  background-color: var(--bg-card);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--border-soft);
  border-radius: 1.25rem;
  box-shadow: var(--shadow-card);
}

.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(54, 137, 80, 0.32);
}

.dark .hover-lift:hover { border-color: rgba(88, 169, 120, 0.30); }

/* ── Focus visible ──────────────────────────────────────────────────── */

*:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: 0.5rem;
}

/* ── Pulse dot (status indicators) ──────────────────────────────────── */

.pulse-dot {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-500);
}
.pulse-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--brand-500);
  opacity: 0.6;
  animation: pulse-ring 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse-ring {
  0%   { transform: scale(0.8); opacity: 0.6; }
  100% { transform: scale(2.4); opacity: 0;   }
}

.pulse-dot.up      { background: #16a34a; }
.pulse-dot.up::after      { background: #16a34a; }
.pulse-dot.degraded { background: #d97706; }
.pulse-dot.degraded::after { background: #d97706; }
.pulse-dot.down    { background: #dc2626; }
.pulse-dot.down::after    { background: #dc2626; }

/* ── Section icons (colored gradient pills) ─────────────────────────── */

.section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 0.625rem;
  color: #fff;
  box-shadow: 0 2px 6px -2px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.18);
  flex-shrink: 0;
}
.section-icon--brand    { background: linear-gradient(135deg, #58a978, #266b3f); }
.section-icon--sky      { background: linear-gradient(135deg, #38bdf8, #1d4ed8); }
.section-icon--amber    { background: linear-gradient(135deg, #fbbf24, #d97706); }
.section-icon--rose     { background: linear-gradient(135deg, #fb7185, #be123c); }
.section-icon--emerald  { background: linear-gradient(135deg, #34d399, #047857); }
.section-icon--green    { background: linear-gradient(135deg, #4ade80, #15803d); }
.section-icon--bronze   { background: linear-gradient(135deg, #b89776, #7e6450); }
.section-icon--slate    { background: linear-gradient(135deg, #94a3b8, #475569); }
.section-icon--red      { background: linear-gradient(135deg, #f87171, #b91c1c); }
.section-icon--teal     { background: linear-gradient(135deg, #2dd4bf, #0f766e); }
.section-icon--violet   { background: linear-gradient(135deg, #a78bfa, #6d28d9); }
.section-icon--fuchsia  { background: linear-gradient(135deg, #e879f9, #a21caf); }
.section-icon--orange   { background: linear-gradient(135deg, #fb923c, #c2410c); }

/* ── Stagger entrance ───────────────────────────────────────────────── */

.fade-up {
  opacity: 0;
  transform: translateY(8px);
  animation: fade-up 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes fade-up {
  to { opacity: 1; transform: translateY(0); }
}
.stagger > * { animation-delay: calc(var(--i, 0) * 80ms); }

/* ── Skeleton shimmer ───────────────────────────────────────────────── */

.skeleton {
  position: relative;
  overflow: hidden;
  background: linear-gradient(110deg, rgba(54,137,80,0.06) 8%, rgba(54,137,80,0.14) 18%, rgba(54,137,80,0.06) 33%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
  border-radius: 0.5rem;
}
.dark .skeleton {
  background: linear-gradient(110deg, rgba(88,169,120,0.08) 8%, rgba(88,169,120,0.18) 18%, rgba(88,169,120,0.08) 33%);
  background-size: 200% 100%;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── Holiday flip card ──────────────────────────────────────────────── */

.flip-card { perspective: 900px; }
.flip-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}
.flip-card:hover .flip-card__inner,
.flip-card:focus-within .flip-card__inner { transform: rotateY(180deg); }
.flip-card__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.85rem 1rem;
  border-radius: 1rem;
}
.flip-card__face--back {
  transform: rotateY(180deg);
  background: linear-gradient(135deg, var(--brand-600), var(--brand-800));
  color: var(--brand-50);
}

/* ── Dot pattern (decorative) ───────────────────────────────────────── */

.dot-pattern {
  background-image: radial-gradient(circle, rgba(54,137,80,0.18) 1px, transparent 1.2px);
  background-size: 14px 14px;
}
.dark .dot-pattern {
  background-image: radial-gradient(circle, rgba(88,169,120,0.18) 1px, transparent 1.2px);
}

/* ── News tabs ──────────────────────────────────────────────────────── */

.news-tab {
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: all 180ms ease;
  white-space: nowrap;
}
.news-tab:hover { color: var(--brand-600); background: rgba(54,137,80,0.06); }
.dark .news-tab:hover { color: var(--brand-300); background: rgba(88,169,120,0.10); }
.news-tab[aria-selected="true"] {
  color: var(--brand-700);
  background: rgba(54,137,80,0.12);
  border-color: var(--border-soft);
}
.dark .news-tab[aria-selected="true"] {
  color: var(--brand-200);
  background: rgba(88,169,120,0.16);
  border-color: rgba(88,169,120,0.30);
}

/* ── Tiny utility ───────────────────────────────────────────────────── */

.scrollbar-thin::-webkit-scrollbar       { width: 6px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(54,137,80,0.30); border-radius: 4px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }

.divide-soft > * + * { border-top: 1px solid var(--border-soft); }

/* ── TI/TRUSTIT dark section ────────────────────────────────────────── */

.section-ti {
  background:
    linear-gradient(135deg, var(--brand-800) 0%, var(--brand-900) 60%, var(--brand-950) 100%);
  color: var(--brand-50);
  border: 1px solid rgba(88,169,120,0.16);
}
.section-ti .ti-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  transition: all 200ms ease;
}
.section-ti .ti-card:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.18);
}

/* ── Quick-access card gradients ────────────────────────────────────── */

.qa-icon { transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1); }
.qa-card:hover .qa-icon { transform: rotate(-6deg) scale(1.04); }

/* ── Reduced motion ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .marquee__track { animation: none; transform: none; }
}