/* ==========================================================================
   Red Pericial — Página Vincúlate (pages/equipo.html)
   Estilos propios de la página de postulación. Se carga después de
   responsive.css para conservar el mismo orden de cascada que tenía
   cuando estaba incrustado en el HTML.
   ========================================================================== */

.page-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--spacing-lg); }

.career-benefits {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-xl);
}

.career-profiles {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
}
.career-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--radius-lg);
  background: var(--color-elevated);
  border: 1px solid var(--color-line);
  overflow: hidden;
  isolation: isolate;
  scroll-margin-top: calc(var(--header-h) + 2rem);
  transition: border-color var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal);
}
/* Haz de luz sutil (motivo del faro) al pasar el cursor */
.career-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 80% at 100% 0%, rgba(var(--rgb-accent), 0.1), transparent 55%);
  opacity: 0;
  transition: opacity var(--transition-normal);
}
@media (hover: hover) {
  .career-card:hover {
    border-color: rgba(var(--rgb-accent), 0.35);
    transform: translateY(-3px);
    box-shadow: 0 24px 48px -28px rgba(var(--rgb-text), 0.35);
  }
  .career-card:hover::before { opacity: 1; }
}
.career-card__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.career-card h3 { font-size: var(--fs-h3); }
.career-card__summary { color: var(--color-text-soft); }
.career-card__reqs {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  font-size: var(--fs-sm);
  color: var(--color-muted);
}
.career-card__reqs li { display: grid; grid-template-columns: 1rem 1fr; gap: 0.5rem; }
.career-card__reqs li::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-top: 0.6em;
  border-radius: 50%;
  background: var(--color-accent);
}
.career-card__foot {
  margin-top: auto;
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}
.career-card__modality {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
  background: var(--color-accent-soft);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
}

.career-steps {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-xl);
  counter-reset: step;
}
.career-step {
  position: relative;
  display: grid;
  gap: 0.6rem;
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-line);
}
.career-step::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.5rem;
  height: 2px;
  background: var(--color-accent);
  box-shadow: 0 0 14px rgba(var(--rgb-accent), 0.6);
}
.career-step__num { font-size: var(--fs-xs); color: var(--color-accent); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.career-step h3 { font-size: var(--fs-h4); }
.career-step p { color: var(--color-muted); font-size: var(--fs-sm); }

.career-checklist { list-style: none; padding: 0; display: grid; gap: 0.75rem; font-size: var(--fs-sm); color: var(--color-text-soft); }
.career-checklist li { display: grid; grid-template-columns: 1.25rem 1fr; gap: 0.6rem; align-items: start; }
.career-checklist svg { width: 18px; height: 18px; color: var(--color-accent); margin-top: 0.15rem; }

/* Campo de archivo (hoja de vida) */
.field input[type="file"] {
  cursor: pointer;
  padding: 0.55rem;
  min-height: 56px;
  border: 1px dashed var(--color-line-strong);
  color: var(--color-muted);
  font-size: var(--fs-sm);
}
.field input[type="file"]::file-selector-button {
  margin-right: 1rem;
  padding: 0.6rem 1.1rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-text);
  color: var(--color-background);
  font: inherit;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: opacity var(--transition-fast);
}
.field input[type="file"]:hover::file-selector-button { opacity: 0.85; }

@media (min-width: 768px) {
  .career-benefits, .career-profiles, .career-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .career-benefits, .career-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}