/* =============================================================
   ADASP — alumnisaopaulo.com
   -------------------------------------------------------------
   Direção: a identidade sai da própria logo da ADASP — o escudo
   da bandeira de São Paulo. Paleta preto / branco / vermelho.
   SEM DOURADO, de propósito: dourado é o clichê do site maçônico
   empoeirado, que é anti-referência declarada deste projeto.

   A bandeira vira o RITMO DA PÁGINA: as seções alternam preto e
   branco em faixas de altura inteira. A listra nunca aparece como
   textura de fundo — isso barateia e entrega cara de template.

   O VERMELHO É EXCLUSIVO DA AÇÃO. Ele só aparece onde se pode
   clicar. Não pinta superfície, não pinta rótulo, não decora
   (regra 60-30-10). Quem carrega a cor como objeto é o brasão.

   ESPAÇAMENTO: só via tokens --s*, todos múltiplos de 4/8.
   Nenhum valor solto. Se precisar de um espaço que não está na
   escala, o certo é quase sempre usar o token vizinho.

   Para editar TEXTO, não mexa aqui: está tudo no index.html,
   marcado por comentários de seção.
   ============================================================= */

/* ---------- Tokens ---------- */
:root {
  /* --- Espaço. Escala 4/8. Nunca escreva px de espaçamento fora daqui. --- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;

  /* Margem lateral da página e respiro das faixas. Em degraus fixos,
     não em clamp(): clamp com vw produz valores fora da grade de 4px
     em toda largura intermediária. Degrau garante a grade sempre. */
  --gutter: var(--s4);   /* 16px — mínimo de margem lateral em mobile */
  --band-y: 56px;

  /* --- Cor (OKLCH). Hue 22 = o vermelho paulista. Os neutros são
     levemente tingidos para essa mesma matiz, nunca para "quente". --- */
  --red:        oklch(0.48 0.21 22);
  --red-hover:  oklch(0.42 0.20 22);
  --red-active: oklch(0.37 0.18 22);

  --ink:        oklch(0.15 0.012 22);
  --ink-2:      oklch(0.21 0.014 22);
  --paper:      oklch(0.97 0.006 22);
  --paper-2:    oklch(0.93 0.008 22);

  --on-paper:       oklch(0.18 0.012 22);
  --on-paper-soft:  oklch(0.40 0.015 22);
  --on-ink:         oklch(0.96 0.005 22);
  --on-ink-soft:    oklch(0.78 0.010 22);

  /* --- Tipografia. Duas famílias, escolhidas em eixos opostos:
     Archivo (grotesca, granítica) para display; Alegreya (humanista
     serifada, quente) para leitura. Decisão validada com o cliente. --- */
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Alegreya", Georgia, "Times New Roman", serif;

  --step-h1: clamp(2.4rem, 6.2vw, 4.5rem);
  --step-h2: clamp(1.85rem, 4.2vw, 3rem);
  --step-body: clamp(1.08rem, 1.5vw, 1.24rem);
  --step-lede: clamp(1.15rem, 2vw, 1.5rem);

  --radius: 4px;

  /* z-index semântico — nunca valores mágicos */
  --z-sticky: 100;
  --z-skip: 200;

  --ease: cubic-bezier(0.16, 1, 0.3, 1); /* ease-out-expo */
}

@media (min-width: 640px) {
  :root { --gutter: var(--s5); --band-y: 72px; }
}
@media (min-width: 1024px) {
  :root { --gutter: var(--s7); --band-y: var(--s9); }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--on-paper);
  font-family: var(--serif);
  font-size: var(--step-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

::selection { background: var(--red); color: oklch(0.99 0.002 22); }

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}
.band--ink :focus-visible,
.rodape :focus-visible { outline-color: var(--on-ink); }

.skip {
  position: absolute;
  left: -9999px;
  z-index: var(--z-skip);
  background: var(--ink);
  color: var(--on-ink);
  padding: var(--s4) var(--s5);
  font-family: var(--sans);
  font-weight: 600;
}
.skip:focus { left: var(--s4); top: var(--s4); }

.mono { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }

/* ---------- Layout ----------
   UMA linha de grid vertical para a página inteira. Todo conteúdo
   de toda seção — hero, faixas e rodapé — começa na MESMA borda
   esquerda. Antes existiam cinco bordas diferentes (48/212/260/460/
   749px) porque o hero tinha padding próprio e a seção estreita
   recentralizava o container. O olho não tinha âncora. */
.wrap {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Coluna de leitura: limita a MEDIDA do texto (50-70 caracteres) sem
   mexer na margem esquerda. É isto que `.wrap--narrow` deveria ter
   feito: ele reduzia o container e recentralizava, movendo a margem. */
.coluna { max-width: 68ch; }

.band { padding-block: var(--band-y); }
.band--paper { background: var(--paper); color: var(--on-paper); }
.band--ink   { background: var(--ink);   color: var(--on-ink); }

/* ---------- Tipografia ---------- */
.h2 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: var(--step-h2);
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin: 0 0 var(--s5);
}

.prose { max-width: 68ch; text-wrap: pretty; }
.prose p { margin: 0 0 var(--s5); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 500; }
.band--ink .prose p { color: var(--on-ink-soft); }

/* A frase que carrega o golpe da seção. Peso e escala, sem enfeite. */
.prose__hit {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.28;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin-block: var(--s6) !important;
}
.band--ink .prose__hit { color: var(--on-ink); }

/* ---------- Topbar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--ink);
  color: var(--on-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s3) var(--gutter);
  border-bottom: 1px solid oklch(1 0 0 / 0.1);
}

.topbar__brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: var(--s3);
  text-decoration: none;
  font-family: var(--sans);
  font-weight: 900;
  letter-spacing: 0.02em;
  font-size: 1.15rem;
}
/* O brasão original é JPEG de fundo branco. O fundo foi recortado por
   flood fill a partir das bordas, o que preservou os brancos INTERNOS
   (listras da bandeira, plumas do elmo). Por isso ele pousa em
   qualquer faixa sem retângulo branco e sem truque de blend mode. */
.topbar__brand img { width: auto; height: 32px; flex: none; }

.topbar__nav {
  display: flex;
  align-items: center;
  gap: var(--s5);
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
}
.topbar__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  color: var(--on-ink-soft);
  transition: color 0.2s var(--ease);
}
.topbar__nav a:hover { color: var(--on-ink); }

.topbar__cta {
  background: var(--red);
  color: oklch(0.99 0.002 22) !important;
  padding-inline: var(--s4);
  min-height: 44px;
  border-radius: var(--radius);
  transition: background 0.2s var(--ease);
}
.topbar__cta:hover { background: var(--red-hover); }
.topbar__cta:active { background: var(--red-active); }

/* Nos telefones o menu de âncoras sai; o CTA fica. */
@media (max-width: 640px) {
  .topbar__nav a:not(.topbar__cta) { display: none; }
}

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: var(--s4) var(--s6);
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  border-radius: var(--radius);
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn--red { background: var(--red); color: oklch(0.99 0.002 22); }
.btn--red:hover { background: var(--red-hover); transform: translateY(-2px); }
.btn--red:active { background: var(--red-active); transform: translateY(0); }
.btn--lg { min-height: 60px; padding-inline: var(--s7); font-size: 1.1rem; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: background 0.2s linear; }
  .btn--red:hover, .btn--red:active { transform: none; }
}

/* ---------- Hero ----------
   Sem padding lateral próprio: quem posiciona é `.wrap`, igual a
   todas as outras seções. Era daqui que vinha o desalinhamento de
   48px entre o h1 e os h2 da página. */
.hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(520px, 82svh, 780px);
  display: flex;
  align-items: flex-end;
  padding-block: var(--band-y);
  background: var(--ink);
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  z-index: -2;
}
/* Cortina de leitura. Sem ela o texto não bate 4.5:1 na foto.
   Medido no pior pixel do fundo: 7.9:1 no título. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
    oklch(0.12 0.01 22 / 0.94) 0%,
    oklch(0.12 0.01 22 / 0.78) 38%,
    oklch(0.12 0.01 22 / 0.35) 70%,
    oklch(0.12 0.01 22 / 0.20) 100%);
}
.hero__title {
  font-family: var(--sans);
  font-weight: 900;
  font-size: var(--step-h1);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--on-ink);
  text-wrap: balance;
  margin: 0 0 var(--s5);
}
.hero__lede {
  max-width: 54ch;
  font-size: var(--step-lede);
  line-height: 1.45;
  color: oklch(0.90 0.008 22);
  margin: 0 0 var(--s6);
  text-wrap: pretty;
}

/* Coreografia única de carregamento. O conteúdo já nasce visível:
   a animação parte de opacity 1 e só empurra a posição. Se o motor
   de animação não rodar, não some nada da página. */
@media (prefers-reduced-motion: no-preference) {
  .hero__title, .hero__lede, .hero .btn {
    animation: subir 0.9s var(--ease) backwards;
  }
  .hero__title { animation-delay: 0.05s; }
  .hero__lede  { animation-delay: 0.18s; }
  .hero .btn   { animation-delay: 0.3s; }
}
@keyframes subir {
  from { transform: translateY(14px); opacity: 0.001; }
  to   { transform: none; opacity: 1; }
}

/* ---------- Split (texto + mídia) ----------
   align-items: start, não center. Centralizar deixava a coluna curta
   flutuando (desnível de 142px no brasão, 143px no convite) e a
   headline não ancorava na borda de cima da mídia ao lado. */
.split {
  display: grid;
  gap: var(--s6);
  align-items: start;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s8); }
}
.figure { margin: 0; }
.figure img { width: 100%; height: auto; border-radius: var(--radius); }

/* O brasão vem antes do texto no HTML porque na seção do 23 de Maio
   ele é o objeto que a seção lê em voz alta: a data está na fita
   dele. No telefone, o texto vem primeiro. */
@media (min-width: 860px) {
  .split--brasao { grid-template-columns: 0.8fr 1.2fr; }
}
.brasao { margin: 0; }
.brasao img {
  width: 100%;
  max-width: 340px;
  height: auto;
}
@media (max-width: 859px) {
  .split--brasao .brasao { order: 2; }
  .brasao img { max-width: 200px; }
}

/* ---------- Dados ---------- */
.dados__lede {
  max-width: 60ch;
  color: var(--on-paper-soft);
  margin: 0 0 var(--s7);
}
.dados {
  margin: 0;
  border-top: 1px solid var(--paper-2);
}
.dados__item {
  display: grid;
  gap: var(--s2) var(--s6);
  grid-template-columns: 1fr;
  padding-block: var(--s5);
  border-bottom: 1px solid var(--paper-2);
}
@media (min-width: 720px) {
  .dados__item { grid-template-columns: 15rem 1fr; align-items: baseline; }
}
/* Rótulo em tom neutro, não vermelho: o vermelho é exclusivo da ação. */
.dados dt {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--on-paper-soft);
}
.dados dd { margin: 0; color: var(--on-paper); }

/* ---------- Convite ---------- */
.convite__lede {
  max-width: 56ch;
  font-size: var(--step-lede);
  line-height: 1.5;
  color: var(--on-ink-soft);
  margin: 0 0 var(--s6);
  text-wrap: pretty;
}
.convite__nota {
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--on-ink-soft);
  margin: var(--s4) 0 0;
}

/* ---------- Rodapé ---------- */
.rodape {
  background: var(--ink-2);
  color: var(--on-ink-soft);
  padding-top: var(--band-y);
  font-size: 1rem;
}
.rodape__grid {
  display: grid;
  gap: var(--s7);
  grid-template-columns: 1fr;
}
@media (min-width: 780px) {
  .rodape__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
.rodape__marca { display: flex; gap: var(--s4); align-items: flex-start; }
.rodape__marca img { width: auto; height: 72px; flex: none; }
.rodape__nome {
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.35;
  color: var(--on-ink);
  max-width: 30ch;
}
.rodape__col h3 {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-ink);
  margin: 0 0 var(--s4);
}
.rodape__col p { margin: 0 0 var(--s2); }
.rodape__col a {
  color: var(--on-ink);
  text-decoration: none;
  border-bottom: 1px solid oklch(1 0 0 / 0.25);
  transition: border-color 0.2s var(--ease);
}
.rodape__col a:hover { border-color: var(--on-ink); }

.rodape__base {
  margin-top: var(--s8);
  padding-block: var(--s5);
  border-top: 1px solid oklch(1 0 0 / 0.1);
}
.rodape__base p {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: oklch(0.62 0.01 22);
}