/* home.css — vitrine layout. Loaded after base.css + all four zone files. */

body.home {
  --bg: #0d0d0d;
  --text: #f4f2ee;
  --accent: #f4f2ee; /* base.css's #333333 fallback reads as near-black on this dark shell (.btn/.skip-link use --accent bg + --bg text) — AA fix E2.1 */
  /* E33/registro 12: a home não é uma zona (nenhum zone-*.css se aplica a ela), então o
     --text-dim do :root (#55524d) — pensado para bg claro — ficava escuro sobre este bg
     escuro. #b7b3ac dá ~9,3:1 sobre #0d0d0d (o footer agora usa var(--text-dim) sólido). */
  --text-dim: #b7b3ac;
  background: var(--bg);
  color: var(--text);
}

.home .site-nav { color: var(--text); }
.home .site-nav[data-theme="echoes"]  { color: #ecdcb8; }
.home .site-nav[data-theme="lighter"] { color: #2b2320; background-color: color-mix(in srgb, #fffaf3 85%, transparent) !important; }
.home .site-nav[data-theme="beyond"]  { color: #eef1ff; }
.home .site-nav[data-theme="shadows"] { color: #d8d5cd; }

/* ---------- hero ---------- */
.hero {
  min-height: 100vh;
  padding: 120px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.hero__tagline {
  text-align: center;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  margin: 0;
}
.hero__doors {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: minmax(420px, 1fr);
  gap: 18px;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}
.door {
  position: relative;
  border-radius: 20px;
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  overflow: hidden;
  isolation: isolate;
  transition: transform 320ms ease;
}
.door:hover, .door:focus-visible { transform: translateY(-6px); }
.door__portrait {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}
.door__portrait svg { width: 100%; height: auto; max-height: 340px; }
.door__eyebrow { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.door h2 { font-size: 1.6rem; margin: 0; }
.door p.door__theme { margin: 0; opacity: .85; }

@media (max-width: 900px) {
  .hero__doors {
    grid-template-columns: 1fr;
    scroll-snap-type: y mandatory;
  }
  .door { min-height: 82vh; scroll-snap-align: start; }
}

/* ---------- zone detail blocks ---------- */
.zone-detail {
  padding: 110px 0;
  transition: background var(--speed, 400ms) ease;
}
.zone-detail__inner {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 56px;
  align-items: center;
}
.zone-detail__portrait svg { width: 100%; max-width: 360px; }
.zone-detail .eyebrow {
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 10px;
  display: block;
}
.zone-detail__quote {
  font-size: 1.3rem;
  max-width: 46ch;
}
.zone-detail .chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 22px 0 28px;
}

@media (max-width: 900px) {
  .zone-detail__inner { grid-template-columns: 1fr; text-align: center; }
  .zone-detail .chips { justify-content: center; }
  .zone-detail__portrait svg { max-width: 240px; margin: 0 auto; }
}

/* ---------- feature cards (per-zone highlight) ---------- */
.features { padding: 100px 0; background: #0d0d0d; }
.features__intro { text-align: center; color: #f4f2ee; margin-bottom: 48px; }
.features__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.feature-card {
  border-radius: var(--radius);
  padding: 26px;
  background: var(--surface);
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 300px;
}
.feature-card__cover { border-radius: 10px; overflow: hidden; }
.feature-card__cover svg { width: 100%; height: 120px; }
.feature-card h3 { font-size: 1.05rem; }
.feature-card__byline { margin-top: auto; font-size: .85rem; opacity: .8; }

@media (max-width: 900px) {
  .features__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .features__grid { grid-template-columns: 1fr; }
}

/* ---------- newsletter + footer neutral shell on home ---------- */
.home .newsletter, .home .site-footer {
  background: #0d0d0d;
  color: #f4f2ee;
}