/* ════════════════════════════════════════════
   PÁGINA DE VENCEDORES (vencedores.html)
   Lógica: js/vencedores.js
   ════════════════════════════════════════════ */
.win-hero {
  position: relative;
  padding: 150px 24px 56px;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(232, 98, 10, 0.28) 0%, transparent 62%),
    linear-gradient(180deg, #0A0A12 0%, #170f2e 100%);
  overflow: hidden;
}
.win-hero-inner { position: relative; max-width: 820px; margin: 0 auto; }
.win-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FF7D2E;
}
.win-hero h1 {
  margin: 0 0 14px;
  font-family: var(--font-title, 'Ubuntu', sans-serif);
  font-size: clamp(2.2rem, 6vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  color: #fff;
}
.win-hero h1 em { font-style: normal; color: #FF7D2E; }
.win-hero p {
  margin: 0 auto;
  max-width: 600px;
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

.win-hero p strong { color: #FF7D2E; font-weight: 700; }

.win-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }

.win-section { background: #0A0A12; padding: 24px 24px 90px; }
.win-wrap { max-width: 1180px; margin: 0 auto; }

.win-tabs { display: flex; justify-content: center; gap: 10px; margin: 8px 0 32px; flex-wrap: wrap; }
.win-tab {
  padding: 10px 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.75);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.win-tab:hover { background: rgba(255, 255, 255, 0.1); }
.win-tab.active {
  background: linear-gradient(135deg, #E8620A 0%, #FF7D2E 100%);
  border-color: transparent;
  color: #fff;
}

.win-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 22px;
}
.win-card {
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255, 125, 46, 0.28);
  background: #120a26;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.4);
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
  scroll-margin-top: 110px;
}
.win-card:hover { transform: translateY(-4px); border-color: rgba(255, 125, 46, 0.6); }
.win-card.is-target { border-color: #FF7D2E; box-shadow: 0 0 0 3px rgba(255, 125, 46, 0.45), 0 16px 44px rgba(0, 0, 0, 0.4); }
.win-art { display: block; aspect-ratio: 4 / 5; background: #0A0A12; }
.win-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.win-cap { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px 16px; }
.win-cat { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #FF7D2E; }
.win-name { font-size: 1.05rem; color: #fff; }
.win-offer { font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); }

.win-empty {
  max-width: 560px;
  margin: 20px auto 0;
  padding: 44px 28px;
  text-align: center;
  border-radius: 20px;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.03);
}
.win-empty i { font-size: 2rem; color: #FF7D2E; margin-bottom: 14px; }
.win-empty h2 { margin: 0 0 8px; font-size: 1.3rem; color: #fff; }
.win-empty p { margin: 0; color: rgba(255, 255, 255, 0.65); line-height: 1.55; }

.win-cta {
  margin-top: 56px;
  padding: 36px 24px;
  text-align: center;
  border-radius: 20px;
  border: 1px solid rgba(255, 125, 46, 0.35);
  background: linear-gradient(135deg, #1b1236 0%, #120a26 100%);
}
.win-cta h2 { margin: 0 0 8px; font-size: clamp(1.4rem, 3vw, 2rem); color: #fff; }
.win-cta h2 em { font-style: normal; color: #FF7D2E; }
.win-cta p { margin: 0 0 22px; color: rgba(255, 255, 255, 0.72); }

@media (max-width: 640px) {
  .win-hero { padding: 120px 16px 40px; }
  .win-hero-actions { flex-direction: column; }
  .win-hero-actions .post-btn { width: 100%; }
  .win-section { padding: 16px 16px 60px; }
  .win-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .win-cap { padding: 10px 12px 12px; }
  .win-name { font-size: 0.92rem; }
  .win-cat { font-size: 0.64rem; }
}