/* ============================================
   Projeto Passé — Coletivo Raiz Design System
   "Um sistema visual que cresce com a comunidade"
   ============================================ */

:root {
  /* ===== Verde — Primária ===== */
  --green-50:   #E8F0E0;
  --green-100:  #C8DCB7;
  --green-300:  #88B36C;
  --green-500:  #3D8B3F;   /* primário */
  --green-700:  #1F5C28;
  --green-900:  #0B2E13;

  /* ===== Petróleo — Estrutura ===== */
  --teal-100:   #C2D9D4;
  --teal-300:   #5FA197;
  --teal-500:   #1F7368;
  --teal-700:   #0E534B;
  --teal-900:   #07332E;

  /* ===== Creme & Acentos Terra ===== */
  --cream-50:   #FBF6E9;   /* fundo principal */
  --cream-100:  #F4ECD3;
  --sand-300:   #E1C58E;
  --clay-300:   #E2A28A;
  --clay-500:   #C2614F;
  --clay-700:   #8C3D2A;

  /* ===== Tinta — Texto ===== */
  --ink-900: #14140E;
  --ink-700: #2E2E22;
  --ink-500: #5D5D49;
  --ink-300: #9B9B85;
  --ink-100: #D9D9C5;

  /* ===== Aliases semânticos ===== */
  --paper:       var(--cream-50);
  --paper-2:     var(--cream-100);
  --ink:         var(--ink-900);
  --ink-soft:    var(--ink-700);
  --ink-mute:    var(--ink-500);
  --rule:        rgba(20, 20, 14, 0.10);
  --rule-strong: rgba(20, 20, 14, 0.20);
  --accent:      var(--green-500);
  --accent-deep: var(--green-700);
  --accent-soft: var(--green-100);

  /* ===== Tipografia ===== */
  --display: 'Fraunces', 'Recoleta', Georgia, serif;
  --body:    'Nunito', system-ui, -apple-system, sans-serif;
  --mono:    'Nunito', system-ui, monospace;

  /* ===== Motion ===== */
  --ease: cubic-bezier(.2,.7,.2,1);

  /* ===== Raios ===== */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--green-100); color: var(--green-900); }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--cream-100); }
::-webkit-scrollbar-thumb {
  background: var(--green-300);
  border: 3px solid var(--cream-100);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--green-500); }

/* Acessibilidade — foco visível e skip link (ADR-016) */
:focus-visible {
  outline: 3px solid var(--green-500);
  outline-offset: 3px;
  border-radius: 4px;
}
.skip-link {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus {
  left: 16px; top: 16px; width: auto; height: auto;
  padding: 12px 20px;
  background: var(--green-700); color: var(--cream-50);
  z-index: 100;
  border-radius: var(--r-pill);
  font-weight: 700;
}

/* ============================================
   Layout primitives
   ============================================ */

.shell {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 720px) { .shell { padding: 0 20px; } }

/* ============================================
   Tipografia — escalas Coletivo Raiz
   ============================================ */

.eyebrow {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-700);
  display: inline-block;
}

.h-display {
  font-family: var(--display);
  font-weight: 700;
  font-style: normal;
  font-size: clamp(48px, 7vw, 88px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
  color: var(--ink-900);
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
.h-display .grow {
  color: var(--green-500);
  font-style: italic;
  font-weight: 600;
}
.h-display .deep {
  color: var(--teal-700);
}

.h-section {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
  color: var(--ink-900);
  font-variation-settings: "opsz" 96, "SOFT" 50;
}
.h-section .grow { color: var(--green-500); font-style: italic; font-weight: 600; }

.h-card {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink-900);
  font-variation-settings: "opsz" 48, "SOFT" 50;
}
.h-card .grow { color: var(--green-500); font-style: italic; font-weight: 600; }

.lede {
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: pretty;
  max-width: 60ch;
}

.body { font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.small { font-size: 14px; line-height: 1.5; color: var(--ink-mute); }
.mono  { font-family: var(--mono); font-weight: 600; letter-spacing: 0.04em; }

/* ============================================
   Tags & chips (pílulas)
   ============================================ */

.tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--green-900);
  background: var(--green-100);
  border-radius: var(--r-pill);
}
.tag .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green-500);
}
.tag.teal  { background: var(--teal-100);  color: var(--teal-900); }
.tag.teal  .dot { background: var(--teal-500); }
.tag.clay  { background: #F7D8C9; color: var(--clay-700); }
.tag.clay  .dot { background: var(--clay-500); }
.tag.sand  { background: var(--cream-100); color: var(--ink-700); border: 1px solid var(--sand-300); }
.tag.sand  .dot { background: var(--sand-300); }
.tag.outline { background: transparent; color: var(--ink-700); border: 1px solid var(--rule-strong); }
.tag.outline .dot { background: var(--ink-500); }

/* ============================================
   Botões
   ============================================ */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  transition: all .25s var(--ease);
  white-space: nowrap;
}
.btn .arrow { transition: transform .25s var(--ease); display: inline-block; }
.btn:hover .arrow { transform: translateX(4px); }

.btn-primary {
  background: var(--green-500);
  color: var(--cream-50);
  border-color: var(--green-500);
}
.btn-primary:hover {
  background: var(--green-700);
  border-color: var(--green-700);
}

.btn-deep {
  background: var(--teal-700);
  color: var(--cream-50);
  border-color: var(--teal-700);
}
.btn-deep:hover {
  background: var(--teal-900);
  border-color: var(--teal-900);
}

.btn-ghost {
  background: transparent;
  color: var(--ink-900);
  border-color: var(--ink-900);
}
.btn-ghost:hover {
  background: var(--ink-900);
  color: var(--cream-50);
}

.btn-soft {
  background: var(--green-100);
  color: var(--green-900);
  border-color: var(--green-100);
}
.btn-soft:hover {
  background: var(--green-300);
  border-color: var(--green-300);
}

.btn-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--body);
  font-weight: 700;
  color: var(--green-700);
  border-bottom: 2px solid var(--green-500);
  padding-bottom: 2px;
}
.btn-link:hover { color: var(--green-500); }

.btn-lg { padding: 18px 32px; font-size: 17px; }

/* ============================================
   Topbar
   ============================================ */

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(251, 246, 233, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0;
}
.topbar .brand {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}
.topbar .brand .accent { color: var(--green-500); font-style: italic; font-weight: 600; }
.topbar .brand .sep    { color: var(--ink-300); font-size: 14px; font-weight: 400; }
.topbar nav { display: flex; gap: 28px; }
.topbar nav a {
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  transition: all .2s var(--ease);
}
.topbar nav a:hover { color: var(--green-700); background: var(--green-100); }
.topbar nav a.active { color: var(--cream-50); background: var(--green-500); }

@media (max-width: 720px) { .topbar nav { display: none; } }

/* ============================================
   Section frame
   ============================================ */

section { position: relative; }

.sect {
  padding: clamp(72px, 9vw, 140px) 0;
  position: relative;
}
.sect + .sect { border-top: 1px solid var(--rule); }

.sect-head {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: 56px;
  margin-bottom: clamp(40px, 6vw, 72px);
  align-items: end;
}
@media (max-width: 900px) { .sect-head { grid-template-columns: 1fr; gap: 24px; } }

/* ============================================
   Hero — Coletivo Raiz style
   ============================================ */

.hero {
  position: relative;
  padding: clamp(72px, 10vw, 140px) 0 clamp(56px, 7vw, 100px);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -120px; right: -160px;
  width: 540px; height: 540px;
  background: var(--green-500);
  border-radius: 50% 42% 58% 50% / 50% 50% 50% 50%;
  opacity: .14;
  z-index: 0;
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -180px; left: -120px;
  width: 380px; height: 380px;
  background: var(--clay-500);
  border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%;
  opacity: .12;
  z-index: 0;
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }

.hero-meta {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-bottom: 40px;
}
.hero-tag {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 28px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--green-700);
  background: var(--green-100);
  padding: 8px 18px;
  border-radius: var(--r-pill);
}
.hero-tag::before {
  content: ''; width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green-500);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 56px;
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 32px; } }

.hero-bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  padding-top: 40px;
  border-top: 1px solid var(--rule);
}
@media (max-width: 900px) { .hero-bottom { grid-template-columns: 1fr; gap: 24px; } }

.hero-stats {
  display: flex; gap: clamp(24px, 4vw, 48px);
  flex-wrap: wrap;
}
.hero-stats .stat-num {
  font-family: var(--display);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--green-500);
}
.hero-stats .stat-lbl {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-mute);
  margin-top: 6px;
  max-width: 14ch;
}

.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================
   Cards / cells (Coletivo Raiz)
   ============================================ */

.cell {
  background: var(--cream-50);
  border: 1px solid var(--rule);
  padding: 32px;
  border-radius: var(--r-lg);
  position: relative;
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
  display: flex; flex-direction: column;
  min-height: 220px;
}
.cell.is-link:hover {
  transform: translateY(-4px);
  border-color: var(--green-300);
  box-shadow: 0 16px 36px -20px rgba(31, 92, 40, 0.25);
}
.cell .num {
  position: absolute; top: 20px; right: 24px;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-300);
}
.cell .kicker {
  display: inline-block;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-700);
  margin-bottom: 12px;
}
.cell .read {
  font-family: var(--body);
  font-size: 14px;
  font-weight: 700;
  color: var(--green-700);
  border-bottom: 2px solid var(--green-500);
  padding-bottom: 2px;
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex; gap: 6px; align-items: center;
  transition: color .2s var(--ease);
}
.cell.is-link:hover .read { color: var(--green-500); }
.cell .body { margin: 10px 0 16px; }

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 1000px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cards-grid { grid-template-columns: 1fr; } }

/* ============================================
   Endereço (Coletivo Raiz)
   ============================================ */

.addr {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 0;
  background: var(--cream-50);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
}
@media (max-width: 880px) { .addr { grid-template-columns: 1fr; } }
.addr-info { padding: 48px; }
.addr-info address {
  font-style: normal;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 16px 0 28px;
  font-variation-settings: "opsz" 72;
}
.addr-info address .grow {
  color: var(--green-500);
  font-style: italic;
  font-weight: 600;
}
.addr-meta {
  display: grid; grid-template-columns: repeat(3, auto);
  gap: 20px 28px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
@media (max-width: 600px) { .addr-meta { grid-template-columns: 1fr 1fr; } }
.addr-meta .k {
  display: block;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 4px;
}
.addr-meta .v {
  font-family: var(--body);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-900);
}

.addr-map {
  border-left: 1px solid var(--rule);
  min-height: 420px;
  position: relative;
  overflow: hidden;
  background: var(--cream-100);
  height: 100%;
  align-self: stretch;
}
@media (max-width: 880px) {
  .addr-map {
    border-left: none;
    border-top: 1px solid var(--rule);
    min-height: 320px;
  }
}
.addr-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.addr-map-overlay {
  position: absolute;
  bottom: 16px; left: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--green-900);
  background: var(--cream-50);
  padding: 8px 16px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--green-500);
  white-space: nowrap;
  z-index: 2;
  box-shadow: 0 6px 18px -10px rgba(20,20,14,0.35);
  transition: all .25s var(--ease);
}
.addr-map-overlay::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 4px rgba(61,139,63,0.18);
}
.addr-map-overlay:hover {
  background: var(--green-500);
  color: var(--cream-50);
  border-color: var(--green-500);
}
.addr-map-overlay:hover::before {
  background: var(--cream-50);
  box-shadow: 0 0 0 4px rgba(251,246,233,0.25);
}

/* ============================================
   Camadas (3 colunas com formas orgânicas)
   ============================================ */

.camadas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) { .camadas { grid-template-columns: 1fr; } }

.camada {
  background: var(--cream-50);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 36px 32px;
  display: flex; flex-direction: column;
  min-height: 340px;
  position: relative;
  overflow: hidden;
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.camada:hover {
  transform: translateY(-4px);
  border-color: var(--green-300);
}
.camada::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 180px; height: 180px;
  border-radius: 50%;
  opacity: .14;
  pointer-events: none;
}
.camada[data-cor="vida"]::before     { background: var(--clay-500); border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%; }
.camada[data-cor="producao"]::before { background: var(--green-500); border-radius: 50% 42% 58% 50% / 50% 50% 50% 50%; }
.camada[data-cor="cultura"]::before  { background: var(--teal-500);  border-radius: 42% 58% 50% 50% / 60% 40% 50% 50%; }

.camada .num {
  position: absolute; top: 24px; right: 28px;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-300);
}
.camada .kicker {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-700);
  margin-bottom: 12px;
}
.camada[data-cor="vida"] .kicker     { color: var(--clay-700); }
.camada[data-cor="cultura"] .kicker  { color: var(--teal-700); }

.camada h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 4px 0 8px;
  color: var(--ink-900);
  font-variation-settings: "opsz" 72, "SOFT" 50;
}
.camada h3 .grow {
  display: block;
  font-style: italic;
  font-weight: 600;
  font-size: 18px;
  color: var(--green-500);
  margin-top: 4px;
}
.camada[data-cor="vida"]    h3 .grow { color: var(--clay-500); }
.camada[data-cor="cultura"] h3 .grow { color: var(--teal-500); }

.camada p { margin: 12px 0 24px; }
.camada ul {
  list-style: none; padding: 0;
  margin: auto 0 0;
  display: flex; flex-direction: column; gap: 6px;
}
.camada ul li {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 4px 0 4px 22px;
  position: relative;
}
.camada ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 11px;
  width: 10px; height: 10px;
  background: var(--green-500);
  border-radius: 50%;
}
.camada[data-cor="vida"]    ul li::before { background: var(--clay-500); }
.camada[data-cor="cultura"] ul li::before { background: var(--teal-500); }

/* ============================================
   Frentes (rows largas)
   ============================================ */

.frentes-list { display: flex; flex-direction: column; gap: 0; }

.frente-row {
  display: grid;
  grid-template-columns: 80px 1fr 1.1fr;
  gap: 32px;
  padding: 32px 0;
  border-top: 1px solid var(--rule);
  align-items: start;
  transition: padding .3s var(--ease);
}
.frente-row:last-child { border-bottom: 1px solid var(--rule); }
.frente-row:hover { padding-left: 12px; }

.frente-row .case-num {
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -0.02em;
  color: var(--green-500);
  line-height: 1;
  padding-top: 8px;
}
.frente-row h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: var(--ink-900);
  font-variation-settings: "opsz" 72;
}
.frente-row h3 .grow {
  font-style: italic; font-weight: 600;
  color: var(--green-500);
}
.frente-row .resp {
  font-family: var(--body);
  font-size: 14px;
  color: var(--ink-mute);
}
.frente-row .resp strong {
  color: var(--ink-900);
  font-weight: 700;
}
.frente-row .right {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}
@media (max-width: 900px) {
  .frente-row { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }
}

/* ============================================
   Marcos (timeline cards)
   ============================================ */

.marcos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 900px) { .marcos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .marcos { grid-template-columns: 1fr; } }

.marco {
  background: var(--cream-50);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 28px;
  display: flex; flex-direction: column;
  min-height: 200px;
  transition: transform .25s var(--ease), border-color .25s var(--ease);
  position: relative;
  overflow: hidden;
}
.marco::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 6px; height: 100%;
  background: var(--green-500);
}
.marco:nth-child(1)::before { background: var(--green-500); }
.marco:nth-child(2)::before { background: var(--teal-500); }
.marco:nth-child(3)::before { background: var(--clay-500); }
.marco:nth-child(4)::before { background: var(--sand-300); }
.marco:hover { transform: translateY(-4px); border-color: var(--green-300); }
.marco .quando {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-700);
  margin-bottom: 12px;
}
.marco h4 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  color: var(--ink-900);
  font-variation-settings: "opsz" 48;
}
.marco p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }

/* ============================================
   Núcleo (pessoas)
   ============================================ */

.nucleo {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
@media (max-width: 1000px) { .nucleo { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .nucleo { grid-template-columns: repeat(2, 1fr); } }

.pessoa {
  background: var(--cream-50);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 28px 22px;
  text-align: left;
  transition: transform .25s var(--ease), border-color .25s var(--ease);
  position: relative;
  overflow: hidden;
}
.pessoa:hover { transform: translateY(-4px); border-color: var(--green-300); }
.pessoa .id {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-300);
  margin-bottom: 18px;
}
.pessoa .avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  color: var(--cream-50);
  font-variation-settings: "opsz" 36;
}
.pessoa .avatar.a-vlad   { background: var(--clay-500); }
.pessoa .avatar.a-neto   { background: var(--teal-700); }
.pessoa .avatar.a-laira  { background: var(--green-500); }
.pessoa .avatar.a-marcus { background: var(--teal-500); }
.pessoa .avatar.a-mae    { background: var(--clay-700); }
.pessoa h4 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
  color: var(--ink-900);
  font-variation-settings: "opsz" 48;
}
.pessoa h4 .grow {
  font-style: italic; font-weight: 600;
  color: var(--green-500);
}
.pessoa p {
  font-family: var(--body);
  font-size: 13px;
  color: var(--ink-mute);
  margin: 0;
  line-height: 1.5;
}

/* ============================================
   Princípios
   ============================================ */

.principios {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 800px) { .principios { grid-template-columns: 1fr; } }

.principios .p {
  background: var(--cream-50);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 28px 32px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.principios .p:hover { transform: translateY(-3px); border-color: var(--green-300); }
.principios .p .n {
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: 44px;
  line-height: 1;
  color: var(--green-500);
  letter-spacing: -0.02em;
  flex-shrink: 0;
  font-variation-settings: "opsz" 96;
}
.principios .p .t {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px; line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink-900);
  font-variation-settings: "opsz" 48, "SOFT" 80;
}

/* ============================================
   Footer
   ============================================ */

footer {
  border-top: 1px solid var(--rule);
  padding: 72px 0 36px;
  position: relative;
  background: var(--cream-100);
  overflow: hidden;
}
footer::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 320px; height: 320px;
  background: var(--green-500);
  border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%;
  opacity: .10;
  pointer-events: none;
}
footer .footer-mark {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(48px, 12vw, 180px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin: 32px 0 32px;
  color: var(--ink-900);
  font-variation-settings: "opsz" 144, "SOFT" 50;
  position: relative; z-index: 1;
}
footer .footer-mark .grow {
  font-style: italic;
  font-weight: 600;
  color: var(--green-500);
}
footer .footer-mark .accent { color: var(--green-500); }
footer .meta {
  display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 16px;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-mute);
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  position: relative; z-index: 1;
}

/* ============================================
   Reduce 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;
  }
}