/* ==========================================================================
   Pillareck — Layout
   Containers, seções, navegação, hero e rodapé.
   ========================================================================== */

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* --- Seções: o ritmo claro/escuro é a espinha dorsal do design --- */
.section {
  padding-block: var(--section-y);
  background-color: var(--bg);
  color: var(--text);
  /* Junta de dilatação: a emenda entre temas é visível porque foi projetada */
  border-top: 1px solid var(--border);
}

/* Única variante: cinza sobrescreve o token do tema, não o tema em si.
   O fundo de toda seção vem exclusivamente de --bg (definido por data-theme). */
.section--gray { --bg: var(--light-bg-alt); }

/* ==========================================================================
   Navegação — fixa, adaptativa por seção (data-nav-theme via JS)
   ========================================================================== */

.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  transition: background-color var(--duration-fast) ease,
              border-color var(--duration-fast) ease,
              color var(--duration-fast) ease;
  color: var(--dark-text);
  border-bottom: 1px solid transparent;
}

.nav[data-nav-theme="dark"] {
  color: var(--dark-text);
}

.nav[data-nav-theme="light"] {
  color: var(--light-text);
}

/* Sem JavaScript não há troca de tema nem estado de scroll:
   a navbar assume fundo escuro sólido e permanece legível em todo o site. */
html:not(.js) .nav {
  background-color: rgba(5, 7, 11, 0.94);
  border-bottom-color: var(--dark-border);
  color: var(--dark-text);
  transition: none;
}

/* O botão do menu móvel depende de JS; sem ele, a navegação
   se dá pelo scroll da própria página e pelos links do rodapé. */
html:not(.js) .nav__toggle {
  display: none;
}

.nav.is-scrolled[data-nav-theme="dark"] {
  background-color: rgba(5, 7, 11, 0.82);
  border-bottom-color: var(--dark-border);
}

.nav.is-scrolled[data-nav-theme="light"] {
  background-color: rgba(255, 255, 255, 0.85);
  border-bottom-color: var(--light-border);
}

@supports (backdrop-filter: blur(12px)) {
  .nav.is-scrolled[data-nav-theme="dark"] { background-color: rgba(5, 7, 11, 0.6); }
  .nav.is-scrolled[data-nav-theme="light"] { background-color: rgba(255, 255, 255, 0.65); }
  .nav.is-scrolled { backdrop-filter: blur(12px); }
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  height: var(--nav-height);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.nav__wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

.nav__links {
  display: flex;
  gap: var(--space-3);
}

.nav__links a {
  font-size: var(--text-sm);
  font-weight: 500;
  opacity: 0.8;
  transition: opacity var(--duration-fast) ease;
}

.nav__links a:hover {
  opacity: 1;
}

/* --- Botão do menu móvel --- */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  align-items: center;
}

.nav__toggle-bar {
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast) ease;
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar:first-child {
  transform: translateY(3.75px) rotate(45deg);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar:last-child {
  transform: translateY(-3.75px) rotate(-45deg);
}

.nav__mobile {
  display: none;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) var(--container-pad) var(--space-4);
  background-color: var(--dark-bg);
  border-bottom: 1px solid var(--dark-border);
  color: var(--dark-text);
}

.nav__mobile.is-open {
  display: flex;
}

.nav__mobile nav {
  display: flex;
  flex-direction: column;
}

.nav__mobile nav a {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--dark-border);
}

/* ==========================================================================
   Hero — 100vh, escuro, topologia ao fundo
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--bg);
  color: var(--text);
  overflow: hidden;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__content {
  position: relative;
  z-index: 1;
  padding-block: var(--space-6) var(--space-5);
}

.hero__title {
  font-size: var(--text-hero);
  font-weight: 600;
  letter-spacing: -0.03em;
  max-width: 18ch;
}

.hero__title-muted {
  color: var(--dark-text-muted);
}

.hero__subtitle {
  margin-top: var(--space-3);
  max-width: 42ch;
  font-size: var(--text-xl);
  line-height: 1.5;
  color: var(--dark-text-muted);
}

.hero__actions {
  margin-top: var(--space-4);
}

.hero__disciplines {
  margin-top: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--dark-text-muted);
}

.hero__scroll-hint {
  position: absolute;
  bottom: var(--space-3);
  left: 50%;
  width: 1px;
  height: 2.5rem;
  background: linear-gradient(to bottom, transparent, var(--dark-text-muted));
  opacity: 0.6;
}

/* ==========================================================================
   Rodapé — fechamento sólido
   ========================================================================== */

.footer {
  background-color: var(--bg);
  color: var(--text);
  padding-block: var(--space-5) var(--space-4);
  /* Linha superior com brilho estático — não animado, como tudo em repouso */
  border-top: 1px solid var(--dark-border);
  box-shadow: 0 -1px 0 rgba(59, 130, 246, 0.25);
}

.footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
}

/* Lockup de fechamento: mesmo símbolo da navegação, em escala maior.
   Uma única construção de marca no site inteiro. */
.footer__wordmark {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}

.footer__mark {
  flex-shrink: 0;
}

.footer__slogan {
  margin-top: var(--space-2);
  color: var(--dark-text-muted);
  line-height: 1.5;
}

.footer__nav {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer__nav a {
  font-size: var(--text-sm);
  color: var(--dark-text-muted);
  transition: color var(--duration-fast) ease;
}

.footer__nav a:hover {
  color: var(--dark-text);
}

.footer__closing {
  border-top: 1px solid var(--dark-border);
  padding-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.footer__statement {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-lg);
}

/* O LED de uptime: aceso do primeiro ao último pixel. Nunca pisca. */
.footer__led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--status-dark);
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.6);
  flex-shrink: 0;
}

.footer__legal {
  font-size: var(--text-sm);
  color: var(--dark-text-muted);
}