/* NABAT | CORE — CARDS */

/* =========================================================
   SERVIÇOS / CARDS HORIZONTAIS (ESTILO NOSTÁLGICO 80s)
   ========================================================= */
.horizontal-section { 
  height: 340vh; 
  position: relative; 
  color: var(--ink);
  background: radial-gradient(ellipse at 50% 30%, rgba(255,255,255,.26), transparent 62%), var(--pearl); 
}

.sticky-wrap { 
  position: sticky; 
  top: 0; 
  height: 100vh; 
  display: flex; 
  align-items: center; 
  overflow: hidden; 
  padding: 0 clamp(18px, 6vw, 96px); 
  gap: clamp(30px, 5vw, 90px); 
}

.section-title { 
  min-width: min(34vw, 440px); 
  position: relative; 
  z-index: 1; /* Reduzido para ficar atrás dos cards */
}

.section-title h2 { 
  color: var(--ink); 
  opacity: 1; 
  mix-blend-mode: normal; 
  text-shadow: none; 
  font-size: clamp(3.5rem, 10vw, 9rem); 
  line-height: .8; 
  margin: 0 0 12px; 
}

.section-title p {
  color: var(--bronze); 
  text-transform: uppercase; 
  letter-spacing: .24em; 
  font-size: .72rem; 
  font-weight: 800; 
  margin: 0 0 16px;
}

.section-title small { 
  display: block; 
  max-width: 260px; 
  margin-top: 22px; 
  color: var(--metal-muted); 
  line-height: 1.65; 
}

.cards-track { 
  display: flex; 
  gap: clamp(22px, 3vw, 44px); 
  align-items: center; 
  will-change: transform; 
  z-index: 5; /* Mantido em 5, agora é maior que o título */
  position: relative; 
}

/* Card Estrutura Principal */
.case-card { 
  position: relative; 
  isolation: isolate; 
  overflow: hidden; 
  width: min(70vw, 610px); 
  min-height: clamp(480px, 64vh, 660px); 
  padding: clamp(30px, 4vw, 46px); 
  border: 1px solid rgba(216,182,122,.30); 
  border-radius: 32px; 
  background: linear-gradient(180deg, rgba(9,10,16,.52), rgba(5,6,10,.92)); 
  box-shadow: 0 26px 44px -14px rgba(41,40,36,.42), 0 5px 9px rgba(41,40,36,.24), inset 0 1px 0 rgba(255,255,255,.24), inset 0 -2px 3px rgba(0,0,0,.42); 
  display: flex; 
  flex-direction: column; 
}

.case-card:hover, .case-card.is-warping { 
  border-color: rgba(216,182,122,.58); 
  box-shadow: 0 32px 52px -14px rgba(41,40,36,.46), 0 7px 12px rgba(41,40,36,.26), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 3px rgba(0,0,0,.42); 
}

/* Filtros Nostálgicos (Grade e Vinheta) */
.case-card::before { 
  content: ""; 
  position: absolute; 
  inset: 0; 
  z-index: 0; 
  background: linear-gradient(rgba(247,240,228,.035) 1px, transparent 1px), 
              linear-gradient(90deg, rgba(247,240,228,.03) 1px, transparent 1px); 
  background-size: 24px 24px; 
  opacity: .54; 
  mix-blend-mode: screen; 
  pointer-events: none; 
}

.case-card::after { 
  content: ""; 
  position: absolute; 
  inset: 0; 
  z-index: 2; 
  pointer-events: none; 
  background: radial-gradient(circle at 26% 18%, rgba(216,182,122,.18), transparent 24%), 
              linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.66) 72%, rgba(0,0,0,.88)); 
  transition: opacity .45s ease; 
}

.case-card:hover::after { opacity: .82; }

/* Imagem Full Bleed */
.case-card-visual { 
  position: absolute; 
  inset: 0; 
  z-index: 1; 
  border-radius: inherit; 
  overflow: hidden; 
  opacity: .96; 
}

.case-card-visual img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  object-position: center; 
  filter: saturate(1.08) contrast(1.07) brightness(.72); 
  transform: scale(1.035); 
  transition: transform .75s var(--ease-premium), filter .55s ease; 
}

.case-card:hover .case-card-visual img { 
  transform: scale(1.09); 
  filter: saturate(1.18) contrast(1.08) brightness(.86); 
}

/* Tipografia e Textos do Card */
.case-card > span, .case-card > h3, .case-card > p { 
  position: relative; 
  z-index: 5; 
  margin: 0; 
}

.case-card > span { 
  display: inline-grid; 
  place-items: center; 
  width: 54px; 
  height: 54px; 
  margin-top: clamp(14px, 2vh, 24px); 
  color: #211b12; 
  border: 1px solid #ebd2a0; 
  border-radius: 18px; 
  background: linear-gradient(145deg, #efd6a5, #d8b67a); 
  box-shadow: 0 3px 8px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.45); 
  font-size: .85rem; 
  font-weight: 700; 
}

.case-card > h3 { 
  margin-top: auto; /* Empurra o texto para a base do card */
  padding-top: clamp(220px, 34vh, 360px); 
  color: var(--fg); 
  font-family: var(--font-brand); 
  font-size: clamp(2.5rem, 4.2vw, 5.1rem); 
  line-height: .9; 
  letter-spacing: -.08em; 
  text-shadow: 0 20px 60px rgba(0,0,0,.72); 
}

.case-card > p { 
  max-width: 520px; 
  margin-top: 12px; 
  color: rgba(247,240,228,.78); 
  text-shadow: 0 12px 34px rgba(0,0,0,.72); 
  font-size: .95rem; 
  line-height: 1.6; 
}
/* Abertura sobreposta: mantém largura, altura e fluxo originais dos cards. */
.card-open { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 8; border: 0; border-radius: inherit; background: transparent; color: var(--gold); cursor: pointer; }
/* Identificação do link visível e com contraste sobre a imagem. */
.card-open > span {
  position: absolute;
  top: calc(clamp(30px, 4vw, 46px) + clamp(14px, 2vh, 24px));
  right: clamp(30px, 4vw, 46px);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid #ebd2a0;
  border-radius: 12px;
  background: linear-gradient(145deg, #efd6a5, #d8b67a);
  color: #211b12;
  box-shadow: 0 3px 8px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.45);
  font: 700 .75rem var(--font-ui);
  transition: box-shadow .2s ease;
}
.card-open:hover > span, .card-open:focus-visible > span { box-shadow: 0 4px 12px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.65); }
.card-open:focus-visible { outline: 2px solid #efd6a5; outline-offset: -5px; }