/*
 * PDI Verdus — estilos de aplicacao
 * Depende de verdus.css (design tokens).
 */

/* Header */
.site-header {
  background: var(--verdus-white);
  border-bottom: 1px solid var(--neutral-200);
  padding: var(--sp-4) 0;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-logo img {
  height: 40px;
  width: auto;
}
.site-nav {
  display: flex;
  gap: var(--sp-6);
  align-items: center;
}
.site-nav a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--verdus-gris);
}
.site-nav a:hover { color: var(--verdus-bleu); text-decoration: none; }

/* Hero */
.hero {
  background: linear-gradient(135deg, var(--verdus-dark) 0%, var(--verdus-bleu) 100%);
  color: var(--verdus-white);
  padding: var(--sp-16) 0;
}
.hero h1 { color: var(--verdus-citron); font-size: var(--fs-5xl); }
.hero p  { font-size: var(--fs-lg); max-width: 640px; color: rgba(255,255,255,0.9); }
.hero .btn-cta-dark { margin-top: var(--sp-6); }

/* Secao de status (landing) */
.status-section { padding: var(--sp-12) 0; }
.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}
.status-item {
  padding: var(--sp-6);
  border-left: 4px solid var(--verdus-viridis);
  background: var(--verdus-white);
  border-radius: var(--radius-sm);
}
.status-item h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.status-item p  { color: var(--verdus-gris); margin: 0; }

/* Footer */
.site-footer {
  background: var(--verdus-dark);
  color: rgba(255,255,255,0.8);
  padding: var(--sp-8) 0;
  margin-top: var(--sp-16);
  font-size: var(--fs-sm);
}
.site-footer .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.site-footer img { height: 32px; }

/* Responsivo basico */
@media (max-width: 640px) {
  .hero h1 { font-size: var(--fs-3xl); }
  .site-nav { display: none; }
}