/* =========================================================================
   Pagina Tracking prodotti postali - hero con forme, card a due pesi, ricerca grande, passi illustrati
   ========================================================================= */

/* ---------- Hero ---------- */
.trk-hero {
  position: relative; overflow: hidden; color: #fff; padding: 88px 0 96px;
  background: linear-gradient(125deg, #6E2F77 0%, var(--color-primary) 45%, var(--color-secondary) 100%);
}
.trk-shape { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .09); pointer-events: none; }
.trk-shape.s1 { width: 420px; height: 420px; top: -170px; left: -120px; }
.trk-shape.s2 { width: 280px; height: 280px; bottom: -140px; left: 42%; background: rgba(255, 255, 255, .07); }
.trk-shape.s3 { width: 190px; height: 190px; top: 40px; right: 6%; background: rgba(255, 255, 255, .06); }
.trk-hero-grid { position: relative; display: grid; grid-template-columns: 1.25fr .75fr; gap: 40px; align-items: center; }
.trk-chip {
  display: inline-block; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .35);
  padding: 6px 16px; border-radius: 999px; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 22px;
}
.trk-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.08; margin-bottom: .5em; }
.trk-hero .lead { color: rgba(255, 255, 255, .92); font-size: 1.15rem; max-width: 54ch; margin: 0; }

.trk-hero-art { position: relative; display: flex; align-items: center; justify-content: center; min-height: 260px; }
.trk-orbit {
  position: absolute; width: 250px; height: 250px; border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, .45); animation: trk-spin 28s linear infinite;
}
.trk-orbit::after {
  content: ""; position: absolute; top: -9px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 6px rgba(255, 255, 255, .25);
}
.trk-envelope {
  position: relative; width: 150px; height: 150px; border-radius: 34px; background: #fff; color: var(--color-primary);
  display: flex; align-items: center; justify-content: center; padding: 30px;
  box-shadow: 0 24px 50px rgba(30, 6, 36, .35); animation: trk-float 4.5s ease-in-out infinite;
}
.trk-envelope > svg { width: 100%; height: 100%; }
.trk-pin {
  position: absolute; right: -14px; bottom: -14px; width: 50px; height: 50px; border-radius: 50%;
  background: var(--color-success); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .25); border: 4px solid #fff;
}
.trk-pin svg { width: 24px; height: 24px; }
@keyframes trk-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes trk-spin { to { transform: rotate(360deg); } }

/* ---------- Card ---------- */
.trk-main { padding-top: 0; }
.trk-cards { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; margin-top: -56px; position: relative; z-index: 2; }
.trk-card {
  border-radius: 24px; padding: 38px 36px; display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 22px 50px rgba(45, 20, 55, .16); transition: transform .25s ease, box-shadow .25s ease;
}
.trk-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(45, 20, 55, .22); }
.trk-card h2 { font-size: 1.7rem; margin: 4px 0 6px; }
.trk-card p { font-size: 1.02rem; margin-bottom: 18px; }
.trk-kicker { font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.trk-note { font-size: .82rem; margin-top: 12px; opacity: .8; }
.trk-icon {
  width: 60px; height: 60px; border-radius: 18px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.trk-icon svg { width: 32px; height: 32px; }

.trk-card-search { background: var(--color-surface); border: 1px solid var(--color-divider); }
.trk-card-search .trk-kicker { color: var(--color-primary); }
.trk-card-search .trk-icon { background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); color: #fff; }

.trk-card-area { background: linear-gradient(150deg, #6E2F77 0%, var(--color-primary) 100%); color: #fff; }
.trk-card-area p, .trk-card-area .trk-kicker { color: rgba(255, 255, 255, .92); }
.trk-card-area .trk-icon { background: rgba(255, 255, 255, .18); color: #fff; }

/* Campo di ricerca grande, con pulsante dentro */
.trk-search {
  position: relative; display: flex; align-items: center; background: var(--color-bg);
  border: 2px solid var(--color-divider); border-radius: 999px; padding: 6px 6px 6px 52px; transition: border-color .2s, box-shadow .2s;
}
.trk-search:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-primary) 18%, transparent); }
.trk-search-ico { position: absolute; left: 20px; width: 22px; height: 22px; color: var(--color-text-muted); }
.trk-search input[type="text"] {
  flex: 1; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none; font-size: 1.05rem; padding: 12px 8px; color: var(--color-text);
}
.trk-search input:focus { outline: none; }
.trk-search button {
  border: 0; cursor: pointer; font: inherit; font-weight: 700; color: #fff; padding: 13px 30px; border-radius: 999px;
  background: linear-gradient(135deg, var(--color-primary), #7B1FA2); transition: transform .15s, box-shadow .15s;
}
.trk-search button:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(123, 31, 162, .35); }

.trk-btn-light {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; background: #fff; color: #6E2F77;
  font-weight: 700; padding: 14px 26px; border-radius: 999px; transition: transform .15s, box-shadow .15s;
}
.trk-btn-light svg { width: 20px; height: 20px; transition: transform .2s; }
.trk-btn-light:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, .28); }
.trk-btn-light:hover svg { transform: translateX(4px); }

/* ---------- Passi ---------- */
.trk-steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.trk-steps::before {
  content: ""; position: absolute; top: 34px; left: 16%; right: 16%; height: 3px;
  background: repeating-linear-gradient(90deg, var(--color-secondary) 0 10px, transparent 10px 20px); opacity: .7;
}
.trk-step { position: relative; text-align: center; padding: 0 12px; }
.trk-step-n {
  width: 68px; height: 68px; margin: 0 auto 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 800; color: #fff; position: relative;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); box-shadow: 0 0 0 8px var(--color-bg-grey), 0 12px 26px rgba(146, 82, 152, .35);
}
.trk-step h3 { font-size: 1.15rem; margin-bottom: 8px; }
.trk-step p { font-size: .95rem; max-width: 30ch; margin: 0 auto; }

.trk-help {
  margin-top: 64px; border-radius: 24px; padding: 32px 36px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  background: var(--color-surface); border: 1px solid var(--color-divider); box-shadow: var(--shadow-sm);
}
.trk-help .btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.3; }
.trk-help h3 { font-size: 1.25rem; margin-bottom: 4px; }
.trk-help p { margin: 0; }

@media (max-width: 960px) {
  .trk-hero-grid, .trk-cards { grid-template-columns: 1fr; }
  .trk-hero-art { display: none; }
  .trk-steps { grid-template-columns: 1fr; }
  .trk-steps::before { display: none; }
}
@media (max-width: 520px) {
  .trk-help { padding: 26px 22px; }
  .trk-help > div { min-width: 0; }
  .trk-help .btn { width: 100%; padding: 14px 18px; }
  .trk-card { padding: 28px 22px; }
  .trk-search { flex-wrap: wrap; border-radius: 22px; padding: 6px 6px 6px 48px; }
  .trk-search button { width: 100%; margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .trk-orbit, .trk-envelope { animation: none; }
}