/* dirigido — ¿Para quién es este diploma? (Roster de comando) */

.dirigido { background: var(--bg); padding: var(--sp) 0; }
.dirigido__label { font-family: var(--font-sora); font-weight: 600; font-size: 14px; letter-spacing: .12em; color: var(--gold); text-align: center; margin-bottom: 16px; }
.dirigido__title { font-family: var(--font-sora); font-weight: 800; font-size: clamp(28px, 4vw, 44px); text-align: center; line-height: 1.1; margin-bottom: 18px; }
.dirigido__lead { text-align: center; color: var(--white-75); font-family: var(--font-mont); font-size: 16px; line-height: 1.65; max-width: 720px; margin: 0 auto 52px; }

/* ===== Grilla de perfiles (4 x 2) ===== */
.dirigido__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 1040px;
  margin: 0 auto;
}

.dirigido__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 178px;
  padding: 22px 20px 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
  overflow: hidden;
  transition: transform .42s cubic-bezier(.2, .7, .2, 1), border-color .4s ease, box-shadow .4s ease, background .4s ease;
}
/* hairline dorado superior, aparece en hover */
.dirigido__card::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0; transition: opacity .4s ease;
}

.dirigido__ic {
  width: 50px; height: 50px; border-radius: 14px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 200, 0, 0.28);
  background: radial-gradient(circle at 50% 32%, rgba(255, 200, 0, .14), rgba(255, 200, 0, .02));
  color: var(--gold);
  transition: transform .42s cubic-bezier(.34, 1.56, .64, 1), background .4s ease, box-shadow .4s ease, color .4s ease;
}
.dirigido__ic svg { width: 26px; height: 26px; }

.dirigido__txt { margin-top: auto; }
.dirigido__name {
  font-family: var(--font-sora); font-weight: 700; font-size: 15.5px; line-height: 1.3;
  color: var(--white); margin: 0 0 9px;
}
.dirigido__role {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mont); font-weight: 600; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); margin: 0; opacity: .85;
}
.dirigido__role::before { content: ""; width: 16px; height: 1px; background: var(--gold); opacity: .55; }

/* ===== Hover: lift + glow dorado + ícono encendido ===== */
.dirigido__card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 200, 0, 0.5);
  background: linear-gradient(158deg, rgba(255, 200, 0, .075), rgba(255, 200, 0, .015));
  box-shadow: 0 22px 50px -22px rgba(0, 0, 0, .85), 0 0 38px -14px rgba(255, 200, 0, .42);
}
.dirigido__card:hover::before { opacity: 1; }
.dirigido__card:hover .dirigido__ic {
  transform: scale(1.07) rotate(-3deg);
  background: var(--gold);
  color: #0a0a0a;
  box-shadow: 0 0 0 4px rgba(255, 200, 0, .12), 0 0 24px rgba(255, 200, 0, .55);
}
.dirigido__card:hover .dirigido__role { opacity: 1; }

/* ===== Cierre ===== */
.dirigido__note {
  text-align: center; color: var(--white-75); font-family: var(--font-mont); font-size: 15px; line-height: 1.7;
  max-width: 720px; margin: 48px auto 0; padding-top: 30px;
  border-top: 1px solid rgba(255, 200, 0, 0.16);
}
.dirigido__note strong { color: var(--white); font-weight: 700; }

/* ===== Reveal escalonado al scroll (activado por core.js -> html.reveal-on) ===== */
html.reveal-on .dirigido__card { opacity: 0; }
html.reveal-on .dirigido__card.is-revealed {
  opacity: 1;
  animation: dirigidoRise .6s cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * .055s) backwards;
}
@keyframes dirigidoRise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* ===== Responsive ===== */
@media (max-width: 980px) {
  .dirigido__grid { grid-template-columns: repeat(2, 1fr); max-width: 620px; }
}
@media (max-width: 560px) {
  .dirigido__grid { grid-template-columns: 1fr; max-width: 440px; gap: 14px; }
  .dirigido__card {
    flex-direction: row; align-items: center; gap: 16px; min-height: 0; padding: 16px 18px;
  }
  .dirigido__ic { width: 46px; height: 46px; }
  .dirigido__ic svg { width: 24px; height: 24px; }
  .dirigido__txt { margin-top: 0; }
  .dirigido__name { margin-bottom: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  html.reveal-on .dirigido__card { opacity: 1; animation: none; }
  .dirigido__card, .dirigido__ic { transition: none; }
}