/* Sobrinho R & D - base layout styles */

:root {
  --brand-blue: #0d47a1;
  --brand-blue-dark: #002171;
  --brand-blue-light: #5472d3;
  --brand-accent: #bbdefb;
  --surface-card: rgba(255, 255, 255, 0.97);
  --text-on-card: #1a237e;
}

html {
  scroll-behavior: smooth;
}

body {
  background: linear-gradient(
    160deg,
    var(--brand-blue-dark) 0%,
    var(--brand-blue) 45%,
    var(--brand-blue-light) 100%
  );
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #fff;
}

.brand-wordmark {
  letter-spacing: 0.02em;
}

.brand-accent {
  color: var(--brand-accent);
  font-weight: 600;
}

.site-navbar {
  background: rgba(0, 33, 113, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.site-navbar .nav-link {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}

.site-navbar .nav-link:hover,
.site-navbar .nav-link:focus,
.site-navbar .nav-link.active {
  color: #fff;
}

.site-navbar .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.4);
}

.site-navbar .navbar-toggler-icon {
  filter: invert(1);
}

.site-card {
  background: var(--surface-card);
  color: var(--text-on-card);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.site-card .text-primary {
  color: var(--brand-blue) !important;
}

.site-card .btn-primary {
  background-color: var(--brand-blue);
  border-color: var(--brand-blue);
}

.site-card .btn-primary:hover,
.site-card .btn-primary:focus {
  background-color: var(--brand-blue-dark);
  border-color: var(--brand-blue-dark);
}

.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.site-footer a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.site-footer a:hover {
  color: #fff;
  text-decoration: underline;
}

.founder-photo {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border: 3px solid var(--brand-accent);
}

.lang-switch .btn {
  font-size: 0.8rem;
  padding: 0.2rem 0.55rem;
}

.lang-switch .btn.active {
  background-color: var(--brand-accent);
  border-color: var(--brand-accent);
  color: var(--brand-blue-dark);
}

.hero-section {
  padding: 3rem 0 2rem;
}

.page-section {
  padding: 2rem 0 4rem;
}

.error-code {
  font-size: 5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--brand-accent);
}

@media (max-width: 575.98px) {
  .founder-photo {
    width: 140px;
    height: 140px;
  }

  .error-code {
    font-size: 3.5rem;
  }
}