/* Página Servicios: hero oscuro con abanico de tarjetas (desktop) o fila con
   scroll horizontal (móvil), y cierre. */

.svc-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 5vw, 72px) 0 clamp(72px, 6vw, 96px);
  background: var(--ink);
  color: var(--cream);
}

.glow--svc-top {
  top: -140px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 640px;
  opacity: .5;
  filter: blur(110px);
}
.glow--svc-bl {
  bottom: -160px;
  left: -120px;
  width: 460px;
  height: 440px;
  opacity: .28;
  filter: blur(100px);
}

/* ---------- introducción ---------- */

.svc-hero__intro {
  position: relative;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}

.svc-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--yellow);
}
.svc-hero__dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--yellow);
}

.svc-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 4.8vw, 64.5px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--white);
  text-wrap: balance;
}
.svc-hero__lede {
  max-width: 52ch;
  margin: 0;
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.6;
  color: #C9C8C3;
}
.svc-hero__cta { margin-top: 10px; }
/* Sobre este fondo oscuro el hover aclara en vez de oscurecer, como en el cierre de Home.
   Dos clases para no depender del orden de la cascada frente a .btn--violet:hover. */
.svc-hero__cta.btn--violet:hover { background: #8A55FF; }

/* ---------- tarjetas: base compartida por abanico y fila ---------- */

.svc-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  padding: 24px;
  padding-top: 46px;
  border-radius: 26px;
}

.svc-card__badge {
  position: absolute;
  top: 16px;
  left: 18px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.svc-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.svc-card__subtitle { margin: 0; font-size: 12px; }

.svc-card__art {
  display: flex;
  flex: 1;
  min-height: 96px;
  align-items: stretch;
  justify-content: center;
  margin-top: 12px;
}
.svc-card__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

/* ---------- variantes de color (compartidas entre abanico y fila) ---------- */

.svc-card--talent { background: linear-gradient(160deg, #8A55FF, #6C2BF2); }
.svc-card--talent .svc-card__title { color: var(--white); }
.svc-card--talent .svc-card__subtitle { color: #EDE6FF; }
.svc-card--talent .svc-card__badge { background: var(--yellow); color: var(--ink); }

.svc-card--influencer { background: linear-gradient(160deg, #F4F3EF, #D8D5CC); }
.svc-card--influencer .svc-card__title { color: var(--ink); }
.svc-card--influencer .svc-card__subtitle { color: var(--ink-70); }
.svc-card--influencer .svc-card__badge { background: rgba(16, 16, 20, 0.12); color: var(--ink); }

.svc-card--brand { background: linear-gradient(160deg, #FFE24B, #F0B429); }
.svc-card--brand .svc-card__title { color: var(--ink); }
.svc-card--brand .svc-card__subtitle { color: #3A3315; }
.svc-card--brand .svc-card__badge { background: rgba(16, 16, 20, 0.16); color: var(--ink); }

.svc-card--content { background: linear-gradient(160deg, #2B2B33, #101014); }
.svc-card--content .svc-card__title { color: var(--white); }
.svc-card--content .svc-card__subtitle { color: #C9C8C3; }
.svc-card--content .svc-card__badge { background: rgba(255, 255, 255, 0.16); color: var(--white); }

.svc-card--events { background: linear-gradient(160deg, #4A17BC, #2E1660); }
.svc-card--events .svc-card__title { color: var(--white); }
.svc-card--events .svc-card__subtitle { color: #DCD6F2; }
.svc-card--events .svc-card__badge { background: rgba(255, 255, 255, 0.18); color: var(--white); }

/* ---------- abanico (≥900px) ---------- */

.svc-deck {
  display: none;
  position: relative;
  max-width: 1240px;
  margin: clamp(36px, 4vw, 64px) auto 0;
  padding: 0 24px;
  min-height: clamp(320px, 32vw, 440px);
  justify-content: center;
  align-items: flex-end;
}

.svc-card--deck {
  position: relative;
  width: clamp(176px, 16vw, 248px);
  aspect-ratio: 3 / 4.6;
  margin: 0 -16px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45);
  transform-origin: 50% 100%;
  transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}

/* Puntas del abanico, de afuera hacia adentro. */
.svc-card--tail-l2 { z-index: 1; transform: rotate(-11deg) translateY(16px); }
.svc-card--tail-l2:hover { transform: rotate(-11deg) translateY(6px); }

.svc-card--tail-l1 { z-index: 2; width: clamp(186px, 17vw, 262px); transform: rotate(-5.5deg) translateY(12px); }
.svc-card--tail-l1:hover { transform: rotate(-5.5deg) translateY(-8px); }

.svc-card--tail-r1 { z-index: 2; width: clamp(186px, 17vw, 262px); transform: rotate(5.5deg) translateY(12px); }
.svc-card--tail-r1:hover { transform: rotate(5.5deg) translateY(-8px); }

.svc-card--tail-r2 { z-index: 1; transform: rotate(11deg) translateY(16px); }
.svc-card--tail-r2:hover { transform: rotate(11deg) translateY(6px); }

/* Carta central: al frente, más grande, sin rotar. */
.svc-card--center {
  z-index: 3;
  width: clamp(200px, 19vw, 288px);
  margin: 0 -10px;
  padding: 26px;
  padding-top: 48px;
  gap: 8px;
  border-radius: 28px;
  box-shadow: 0 34px 74px rgba(108, 43, 242, 0.5);
  transform: translateY(-10px);
}
.svc-card--center:hover { transform: translateY(-30px); }
.svc-card--center .svc-card__title { font-size: 20px; letter-spacing: -0.015em; line-height: 1.12; }
.svc-card--center .svc-card__subtitle { font-size: 12.5px; }
.svc-card--center .svc-card__badge { top: 16px; left: 20px; padding: 4px 11px; }

/* ---------- fila con scroll horizontal (<900px) ---------- */

.svc-rail {
  display: flex;
  gap: 14px;
  padding: 32px 24px 36px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.svc-card--rail {
  flex: 0 0 200px;
  aspect-ratio: 3 / 4.1;
  padding: 20px;
  padding-top: 46px;
  border-radius: 22px;
}
.svc-card--rail .svc-card__title { font-size: 18px; }

@media (min-width: 900px) {
  .svc-deck { display: flex; }
  .svc-rail { display: none; }
}