/* ================================================================
   PATCH V6 FINAL — All section titles, colors, layout, spacing
   ================================================================ */

/* ═══════════════════════════════════════════
   1. ALL SECTION TITLES — Cinzel Decorative gold
      Same as CONVERTEM in the hero
   ═══════════════════════════════════════════ */

.hiw-title,
#portfolio-section .section-title-premium,
#entregavel .section-title-premium,
#transform h2,
#contact h2,
.section-manifesto .manifesto-label {
  font-family: 'Cinzel Decorative', 'Cinzel', 'Cormorant Garamond', serif !important;
  font-weight: 900 !important;
  -webkit-text-fill-color: #f5e4a0 !important;
  color: #f5e4a0 !important;
  background: none !important;
  text-shadow:
    0 0 14px rgba(212,175,55,0.18),
    0 0 38px rgba(212,175,55,0.14),
    0 10px 34px rgba(0,0,0,0.58) !important;
}

.hiw-title,
#portfolio-section .section-title-premium,
#entregavel .section-title-premium,
#transform h2,
#contact h2 {
  font-size: clamp(26px, 3.5vw, 44px) !important;
  letter-spacing: 0.01em !important;
  line-height: 1.15 !important;
}

.section-manifesto .manifesto-label {
  font-size: 10px !important;
}

.hero-description { display: none !important; }
.footer-infinite-marquee { display: none !important; }


/* ═══════════════════════════════════════════
   2. STARS CANVAS
   ═══════════════════════════════════════════ */

.hiw-stars-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  pointer-events: none !important;
}


/* ═══════════════════════════════════════════
   3. COLORS — Dark, connected
   ═══════════════════════════════════════════ */

#portfolio-section {
  background: linear-gradient(180deg, #050506 0%, #040405 30%, #040405 70%, #050506 100%) !important;
}
.section-transform {
  background: linear-gradient(180deg, #050506 0%, #060810 30%, #060810 70%, #040506 100%) !important;
}
.section-manifesto {
  background: linear-gradient(180deg, #040506 0%, #030304 50%, #040608 100%) !important;
}
.hiw {
  background:
    radial-gradient(ellipse 70% 50% at 20% 15%, rgba(16,28,72,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(215,180,106,0.04) 0%, transparent 55%),
    linear-gradient(180deg, #040608 0%, #050810 12%, #060a14 50%, #050810 88%, #040608 100%) !important;
}
.section-entregas-premium {
  background: linear-gradient(180deg, #040608 0%, #050608 15%, #050608 85%, #040506 100%) !important;
}
.section-entregas-premium::before {
  background: radial-gradient(circle, rgba(20,40,100,0.04) 0%, transparent 70%) !important;
}
.section-contact {
  background: linear-gradient(180deg, #040506 0%, #050810 30%, #050810 70%, #040506 100%) !important;
}
.site-footer {
  background: linear-gradient(180deg, #040506 0%, #030304 100%) !important;
  border-bottom: 1px solid rgba(215,180,106,0.08) !important;
}
.marquee-strip {
  background: linear-gradient(180deg, #050506 0%, #040506 100%) !important;
}


/* ═══════════════════════════════════════════
   4. COMO FUNCIONA — Compact + scroll fill
   ═══════════════════════════════════════════ */

.hiw { padding: 100px 0 80px !important; }
.hiw-header { margin-bottom: 50px !important; }
.hiw-step { margin-bottom: 32px !important; }
.hiw-step:last-child { margin-bottom: 0 !important; }
.hiw-card { padding: 28px 26px !important; }
.hiw-card-ghost { font-size: 72px !important; top: -6px !important; }
.hiw-end-mark { margin-top: 50px !important; }

/* Timeline: gray default */
.hiw-line-bg {
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.08) 8%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.08) 92%, transparent 100%) !important;
}
.hiw-line-glow { background: none !important; }
.hiw-line-pulse { display: none !important; }

/* Gold fill layer (JS animates scaleY) */
.hiw-line-fill {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  transform-origin: top; transform: scaleY(0);
  background: linear-gradient(180deg, transparent 0%, rgba(215,180,106,0.45) 8%, rgba(215,180,106,0.65) 50%, rgba(215,180,106,0.45) 92%, transparent 100%);
  z-index: 2; transition: transform 0.1s linear;
}
.hiw-line-fill-glow {
  position: absolute; left: -4px; right: -4px; top: 0; height: 100%;
  transform-origin: top; transform: scaleY(0);
  background: linear-gradient(180deg, transparent 0%, rgba(215,180,106,0.14) 8%, rgba(215,180,106,0.22) 50%, rgba(215,180,106,0.14) 92%, transparent 100%);
  filter: blur(6px); z-index: 1; transition: transform 0.1s linear;
}

/* Nodes: gray default → gold on scroll reveal */
.hiw-node-dot {
  background: radial-gradient(circle at 40% 35%, #777, #555 60%, #444) !important;
  box-shadow: 0 0 8px rgba(255,255,255,0.12) !important;
  transition: all 0.6s ease !important;
}
.hiw-node-ring {
  border-color: rgba(255,255,255,0.12) !important;
  transition: all 0.6s ease !important;
}
.hiw-node-num {
  color: rgba(255,255,255,0.2) !important;
  transition: color 0.6s ease !important;
}

.hiw-step.on .hiw-node-dot {
  background: radial-gradient(circle at 40% 35%, #f5e4a0, #d7b46a 60%, #b8935a) !important;
  box-shadow: 0 0 14px rgba(215,180,106,0.5), 0 0 40px rgba(215,180,106,0.15) !important;
}
.hiw-step.on .hiw-node-ring {
  border-color: rgba(215,180,106,0.35) !important;
}
.hiw-step.on .hiw-node-num {
  color: rgba(215,180,106,0.7) !important;
}
.hiw-step:hover .hiw-node-ring {
  border-color: rgba(215,180,106,0.6) !important;
  box-shadow: 0 0 20px rgba(215,180,106,0.2) !important;
}


/* ═══════════════════════════════════════════
   5. ENTREGAS — Dark professional bento
   ═══════════════════════════════════════════ */

.section-entregas-premium { padding: 100px 0 !important; }

.bento-grid-premium {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  max-width: 1100px;
  margin: 0 auto;
}

.deliver-card-premium {
  background: linear-gradient(135deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.01) 100%) !important;
  border-color: rgba(255,255,255,0.06) !important;
}

.deliver-card-premium:nth-child(1),
.deliver-card-premium:nth-child(4) {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 28px;
  padding: 36px !important;
  border-color: rgba(215,180,106,0.1) !important;
  background: linear-gradient(135deg, rgba(215,180,106,0.025) 0%, rgba(255,255,255,0.015) 50%, rgba(215,180,106,0.015) 100%) !important;
}

.deliver-card-premium:nth-child(1) .card-icon,
.deliver-card-premium:nth-child(4) .card-icon {
  margin-bottom: 0; width: 80px; height: 80px;
}
.deliver-card-premium:nth-child(1) .card-content h3,
.deliver-card-premium:nth-child(4) .card-content h3 {
  font-size: clamp(20px, 2vw, 26px);
}
.deliver-card-premium:nth-child(1) .card-number,
.deliver-card-premium:nth-child(4) .card-number {
  top: 50%; transform: translateY(-50%); right: 24px;
}

.deliver-card-premium:nth-child(2),
.deliver-card-premium:nth-child(3) {
  display: flex; flex-direction: column;
}
.deliver-card-premium .card-content { flex: 1; display: flex; flex-direction: column; }
.deliver-card-premium .card-content p { flex: 1; }

.deliver-card-premium:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(215,180,106,0.22) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(215,180,106,0.1) inset, 0 0 30px rgba(215,180,106,0.04) !important;
}

.card-glow { opacity: 0 !important; }
.deliver-card-premium:hover .card-glow { opacity: 0.35 !important; }

@media (max-width: 768px) {
  .bento-grid-premium { grid-template-columns: 1fr !important; gap: 18px !important; }
  .deliver-card-premium:nth-child(1),
  .deliver-card-premium:nth-child(4) {
    grid-column: 1; grid-template-columns: 1fr; gap: 14px; padding: 28px 22px !important;
  }
  .deliver-card-premium:nth-child(1) .card-icon,
  .deliver-card-premium:nth-child(4) .card-icon { width: 64px; height: 64px; margin-bottom: 8px; }
  .deliver-card-premium:nth-child(1) .card-number,
  .deliver-card-premium:nth-child(4) .card-number { top: 24px; transform: none; }
}


/* ═══════════════════════════════════════════
   6. POLISH
   ═══════════════════════════════════════════ */

.hero-sep { margin: 14px auto 28px !important; }
#entregavel .section-badge { box-shadow: 0 0 20px rgba(215,180,106,0.08); }