.horizontal-section { 
  height: 340vh; 
  position: relative; 
  border-top: 1px solid var(--line); 
  background: radial-gradient(circle at 18% 18%, rgba(216,182,122,.08), transparent 28%), 
              radial-gradient(circle at 78% 42%, rgba(93,52,156,.10), transparent 28%), 
              linear-gradient(180deg, #05060a 0%, #0b0814 48%, #05060a 100%); 
}

.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: rgba(247,240,228,.11); 
  opacity: .18; 
  mix-blend-mode: screen; 
  text-shadow: none; 
  font-size: clamp(3.5rem, 10vw, 9rem); 
  line-height: .8; 
  margin: 0 0 12px; 
}

.section-title p {
  color: var(--gold); 
  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(--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 34px 110px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06), 0 0 34px rgba(216,182,122,.07); 
  display: flex; 
  flex-direction: column; 
}

.case-card:hover, .case-card.is-warping { 
  border-color: rgba(216,182,122,.58); 
  box-shadow: 0 44px 140px rgba(0,0,0,.42), 0 0 52px rgba(216,182,122,.14), inset 0 1px 0 rgba(255,255,255,.08); 
}

/* 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: var(--gold); 
  border: 1px solid rgba(216,182,122,.45); 
  border-radius: 18px; 
  background: rgba(6,8,13,.50); 
  backdrop-filter: blur(10px); 
  box-shadow: 0 0 28px rgba(216,182,122,.10); 
  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; 
}


.warp-border { transform-style: preserve-3d; }
.warp-border.is-warping { border-radius: var(--warp-radius,34px); }

.case-card > .card-action { position: relative; z-index: 6; align-self: flex-start; margin-top: 20px; }
.card-action { display: inline-flex; align-items: center; gap: 18px; padding: 13px 18px; background: rgba(12,15,20,.88); border: 1px solid var(--gold); border-radius: 12px; color: var(--fg); font: 600 .82rem var(--font-ui); cursor: pointer; }
.card-action:hover { background: var(--gold); color: #0b0c10; }
.service-card-dev > h3, .service-card-systems > h3 { padding-top: clamp(130px, 23vh, 270px); }
.social-contact { margin-top: 28px; }
.social-contact p { color: var(--muted); font-size: .9rem; margin-bottom: 12px; }
.social-link { display: inline-flex; align-items: center; gap: 12px; color: var(--gold); padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(198,160,98,.06); }
.social-link svg { width: 24px; height: 24px; flex-shrink: 0; }
.social-link strong { display: block; font-size: .85rem; color: var(--fg); }
.social-link:hover { border-color: var(--gold); }
.social-footer { margin-bottom: 20px; }

@media (max-width:960px){.horizontal-section{height:auto}.sticky-wrap{position:relative;height:auto;overflow:visible;flex-direction:column;align-items:flex-start;padding:80px 18px}.section-title h2{font-size:clamp(3.2rem,12vw,4.5rem)}.cards-track{width:100%;display:grid;grid-template-columns:1fr;gap:24px;transform:none!important}.case-card{width:100%;min-height:480px;padding:24px}.case-card>h3{padding-top:240px;font-size:clamp(2.4rem,10vw,3.5rem)}}
@media(max-width:560px){.case-card{min-height:420px}.case-card>h3{padding-top:180px}}
@media(min-width:961px) and (max-height:740px){.case-card{min-height:0;padding:26px}.case-card>h3{padding-top:130px}.case-card>span{margin-top:0}}