/* ══════════════════════════════════════
   MUSEU JUDAICO RJ — Home
   Estilos específicos da página inicial
══════════════════════════════════════ */

/* ── Icon extra size (hero) ── */
.icon-hero svg { width:64px; height:64px; stroke-width:0.9; }

/* ══════════════════════════════════════
   HERO — full viewport, editorial
══════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  background: var(--dark);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

/* Gradiente de profundidade */
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 100% 70% at 20% 20%, rgba(27,37,79,.7) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 90% 80%, rgba(27,37,79,.3) 0%, transparent 60%),
    linear-gradient(170deg, #0E0E14 0%, #1a1a28 100%);
}

/* Foto de fundo — opacidade baixa para manter o navy */
.hero-photo {
  position: absolute;
  inset: 0;
  background: url('../image/galleria-vittorio-emanuele-milan.jpg') center/cover no-repeat;
  opacity: .05;
  mix-blend-mode: luminosity;
}

/* Padrão geométrico — estrela de Davi em grade discreta */
.hero-pattern {
  position: absolute;
  inset: 0;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='92' viewBox='0 0 80 92' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='0.6'%3E%3Cpolygon points='40,4 60,36 80,36 60,56 68,88 40,72 12,88 20,56 0,36 20,36'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 80px 92px;
}

/* Linha dourada vertical decorativa */
.hero-vline {
  position: absolute;
  left: var(--gutter);
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent 0%, var(--gold) 30%, var(--gold) 70%, transparent 100%);
  opacity: .25;
}

/* Número do ano — detalhe editorial */
.hero-year {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: center center;
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .2em;
  color: rgba(255,255,255,.22);
  white-space: nowrap;
}

/* Conteúdo principal do hero */
.hero-body {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(3rem, 6vw, 5rem);
  padding-top: 60px;
}

/* Tag superior */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  font-family: var(--mono);
  font-size: .65rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 1.75rem;
  animation: hIn .8s .1s ease both;
}
.hero-eyebrow::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--gold);
}

/* Título enorme — a peça central */
.hero-title {
  font-family: var(--serif);
  font-size: clamp(3.5rem, 9vw, 9rem);
  font-weight: 300;
  color: white;
  line-height: .95;
  letter-spacing: -.02em;
  margin-bottom: 2rem;
  animation: hIn .9s .2s ease both;
}
.hero-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--gold-light);
}
.hero-title .line-sub {
  display: block;
  font-size: clamp(1.5rem, 3.5vw, 3.5rem);
  font-weight: 300;
  font-style: normal;
  color: rgba(255,255,255,.55);
  letter-spacing: .01em;
  margin-top: .3em;
}

/* Regra + subtexto + CTAs */
.hero-rule {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, var(--gold) 0%, rgba(180,145,80,.2) 60%, transparent 100%);
  margin-bottom: 1.5rem;
  animation: hIn .8s .35s ease both;
}
.hero-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  animation: hIn .8s .45s ease both;
}
.hero-sub {
  font-size: clamp(.875rem, 1.5vw, 1rem);
  color: var(--inv-muted);
  line-height: 1.65;
  max-width: 480px;
}
.hero-btns {
  display: flex;
  gap: .75rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* Faixa de info na base */
.hero-infobar {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255,255,255,.08);
  animation: hIn .7s .55s ease both;
}
.hero-infobar-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 0;
}
.hero-info-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .875rem 1.5rem .875rem 0;
  margin-right: 1.5rem;
  border-right: 1px solid rgba(255,255,255,.08);
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .06em;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  white-space: nowrap;
}
.hero-info-item:last-child { border-right: none; }
.hero-info-item .icon { color: var(--gold); opacity: .7; }

@keyframes hIn {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ══════════════════════════════════════
   SEÇÃO 01 — O MUSEU
   Layout: texto corrido com pull-quote editorial
══════════════════════════════════════ */
.museu-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: clamp(3rem, 6vw, 7rem);
  align-items: start;
}

.museu-lead {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.45;
  color: var(--ink);
  letter-spacing: -.01em;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}
.museu-body {
  font-size: .9375rem;
  color: var(--ink-2);
  line-height: 1.75;
  column-gap: 2.5rem;
  margin-bottom: 2rem;
}
.museu-body p + p { margin-top: 1rem; }

.museu-cta-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color 150ms, color 150ms;
}
.museu-cta-link:hover { color: var(--gold-dark); border-color: var(--gold); }

/* Coluna lateral sticky — fact panel */
.museu-aside {
  position: sticky;
  top: calc(60px + 2rem);
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(14,14,20,.06);
}
.museu-fact {
  padding: 1.25rem 1.5rem;
  background: white;
  border-bottom: 1px solid var(--border);
}
.museu-fact:last-child { border-bottom: none; }
.museu-fact-label {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .5rem;
}
.museu-fact-value {
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}
.museu-fact-sub {
  font-size: .8rem;
  color: var(--ink-3);
  margin-top: .25rem;
  line-height: 1.5;
}
.museu-fact-map {
  background: var(--navy);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  transition: background 150ms;
}
.museu-fact-map:hover { background: var(--navy-deep); }
.museu-fact-map .icon { color: var(--gold-light); }
.museu-fact-map-text .t1 {
  font-size: .8125rem;
  font-weight: 600;
  color: white;
  line-height: 1.3;
}
.museu-fact-map-text .t2 {
  font-family: var(--mono);
  font-size: .6rem;
  color: rgba(255,255,255,.4);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* ══════════════════════════════════════
   SEÇÃO 02 — ACERVO
   Layout assimétrico: featured + 3 cards
══════════════════════════════════════ */
.acervo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1.5px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(14,14,20,.07);
}

.ac-card {
  background: var(--off-white);
  display: flex;
  flex-direction: column;
  transition: background 220ms;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
}
.ac-card:hover { background: white; }

/* Card featured — ocupa 2 colunas */
.ac-card--featured {
  grid-column: span 2;
  flex-direction: row;
  min-height: 320px;
}
.ac-featured-img {
  width: 260px;
  flex-shrink: 0;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.ac-featured-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ac-featured-img::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(27,37,79,.3) 0%, rgba(17,24,48,.75) 100%);
}
.ac-featured-img::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(135deg, rgba(180,145,80,.12) 0%, transparent 60%);
}
/* Estrela de Davi SVG decorativa no bg do card featured */
.ac-feat-bg-icon {
  position: absolute;
  bottom: -20px;
  right: -20px;
  opacity: .07;
}
.ac-feat-icon {
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,.35);
}
.ac-featured-body {
  flex: 1;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Cards normais */
.ac-card--normal {
  padding: 1.75rem;
  min-height: 200px;
  border-left: 1px solid var(--border);
}
.ac-card--normal:hover .ac-arrow { transform: translate(3px, -3px); }

/* Conteúdo compartilhado dos cards */
.ac-num {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .12em;
  color: var(--gold);
  margin-bottom: 1.25rem;
}
.ac-cat {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .625rem;
}
.ac-title {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: .75rem;
  letter-spacing: -.01em;
}
.ac-featured-body .ac-title {
  font-size: clamp(1.5rem, 2.5vw, 2.125rem);
}
.ac-text {
  font-size: .8375rem;
  color: var(--ink-3);
  line-height: 1.65;
  flex: 1;
  margin-bottom: 1.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ac-link {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
}
.ac-arrow { transition: transform 200ms ease; display:inline-flex; align-items:center; }
.ac-card:hover .ac-arrow { transform: translate(3px, -3px); }

/* Card bottom row — icon grande decorativo */
.ac-icon-bottom {
  position: absolute;
  bottom: 1.25rem;
  right: 1.25rem;
  color: rgba(14,14,20,.06);
}

/* ══════════════════════════════════════
   SEÇÃO 03 — NOSSA COMUNIDADE
   Fundo navy, split layout
══════════════════════════════════════ */
.comunidade-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 7rem);
  align-items: center;
}
.comunidade-img-wrap {
  position: relative;
}
.comunidade-img {
  width: 100%;
  aspect-ratio: 3/4;
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--navy-mid) 0%, #0a0c1e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.08);
  box-shadow: 0 24px 64px rgba(0,0,0,.4);
  position: relative;
}
.comunidade-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.comunidade-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(27,37,79,.55) 0%, rgba(17,24,48,.4) 100%);
  pointer-events: none;
}
/* Detalhe dourado — moldura offset */
.comunidade-img-wrap::before {
  content: '';
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  right: -1.5rem;
  bottom: -1.5rem;
  border: 1px solid rgba(180,145,80,.25);
  border-radius: 6px;
  z-index: -1;
}
.comunidade-quote {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-style: italic;
  font-weight: 300;
  color: var(--gold-pale);
  line-height: 1.55;
  margin-bottom: 2rem;
  padding-left: 1.5rem;
  border-left: 2px solid var(--gold);
}
.comunidade-body {
  font-size: .9rem;
  color: var(--inv-muted);
  line-height: 1.75;
  margin-bottom: 2.5rem;
}
.comunidade-body p + p { margin-top: .875rem; }

/* ══════════════════════════════════════
   SEÇÃO 04 — VISITE
   Layout horizontal estilo editorial
══════════════════════════════════════ */
.visite-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(14,14,20,.05);
  margin-top: 3rem;
}
.visite-item {
  padding: 2.5rem 2rem;
  background: white;
  border-right: 1px solid var(--border);
  position: relative;
}
.visite-item:last-child { border-right: none; }
.visite-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--navy);
}
.visite-icon-box {
  width: 40px; height: 40px;
  border-radius: 6px;
  background: var(--navy-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  margin-bottom: 1.5rem;
}
.visite-title {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 1rem;
  letter-spacing: -.01em;
}
.visite-text {
  font-size: .85rem;
  color: var(--ink-3);
  line-height: 1.7;
}
.visite-text strong { color: var(--ink-2); font-weight: 600; }

/* ══════════════════════════════════════
   SEÇÃO 05 — APOIE / CTA
   Fundo escuro, layout centrado e poético
══════════════════════════════════════ */
.cta-center {
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}
.cta-ornament {
  margin: 0 auto 2rem;
  width: 1px;
  height: 64px;
  background: linear-gradient(to bottom, transparent, var(--gold) 50%, transparent);
}
.cta-title {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 300;
  color: white;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin-bottom: 1.5rem;
}
.cta-title em { font-style: italic; color: var(--gold-light); }
.cta-sub {
  font-size: .9375rem;
  color: var(--inv-muted);
  line-height: 1.7;
  margin-bottom: 2.5rem;
}
.cta-divider {
  width: 60px;
  height: 1px;
  background: var(--gold);
  margin: 0 auto 2.5rem;
  opacity: .5;
}
.cta-btns { display: flex; gap: .875rem; justify-content: center; flex-wrap: wrap; }

/* ══════════════════════════════════════
   RESPONSIVE — Tablet (≤960px)
══════════════════════════════════════ */
@media (max-width:960px) {
  .hero-year { display:none; }
  .hero-infobar-inner { flex-wrap:wrap; }
  .hero-info-item { font-size:.7rem; padding:.75rem 1rem .75rem 0; margin-right:1rem; }
  .museu-layout { grid-template-columns:1fr; }
  .museu-aside { position:static; }
  .acervo-grid { grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .ac-card--featured { grid-column:span 2; }
  .ac-featured-img { width:200px; }
  .comunidade-split { grid-template-columns:1fr; gap:3rem; }
  .comunidade-img-wrap { order:2; max-width:400px; }
  .comunidade-img-wrap::before { top:1rem; left:1rem; right:-1rem; bottom:-1rem; }
  .visite-row { grid-template-columns:1fr; }
  .visite-item { border-right:none; border-bottom:1px solid var(--border); }
  .visite-item:last-child { border-bottom:none; }
}

/* ══════════════════════════════════════
   RESPONSIVE — Mobile (≤600px)
══════════════════════════════════════ */
@media (max-width:600px) {
  .hero-body { padding-bottom:clamp(2rem,5vw,3rem); }
  .hero-row { flex-direction:column; align-items:flex-start; gap:1.5rem; }
  .hero-btns { width:100%; }
  .hero-btns .btn { flex:1; justify-content:center; min-width:0; }
  .hero-infobar-inner { flex-direction:column; gap:0; }
  .hero-info-item { border-right:none; border-bottom:1px solid rgba(255,255,255,.06); margin-right:0; padding:.625rem 0; width:100%; }
  .hero-info-item:last-child { border-bottom:none; }
  .acervo-grid { grid-template-columns:1fr; }
  .ac-card--featured { grid-column:span 1; flex-direction:column; min-height:auto; }
  .ac-featured-img { width:100%; height:160px; }
  .ac-featured-body { padding:1.5rem; }
  .ac-card--normal { border-left:none; border-top:1px solid var(--border); min-height:auto; padding:1.5rem; }
  .comunidade-img-wrap::before { display:none; }
  .visite-item { padding:1.75rem 1.5rem; }
  .cta-title { font-size:clamp(2rem,5vw,3rem); }
}