/* =========================================================
   SCT Security — sección "Trabaje con nosotros"
   ========================================================= */
#trabaja .head-center { margin-bottom: 48px; }
.tw-block { margin-top: 56px; }
.tw-block:first-of-type { margin-top: 0; }
.tw-title { display: flex; align-items: baseline; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-bottom: 22px; }
.tw-title h3 { font-size: 24px; letter-spacing: -0.03em; }
.tw-title p { color: var(--ink-3); font-size: 15px; }

/* ---------- Ruta de crecimiento (escalera) ---------- */
.path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: end; }
.path-step {
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 22px 24px;
  margin-top: calc((3 - var(--i)) * 0px); min-height: calc(190px + var(--i) * 26px);
  display: flex; flex-direction: column; gap: 8px; transition: border-color .2s, box-shadow .2s, transform .3s var(--ease);
}
.path-step::before { content: ""; position: absolute; left: 22px; top: 0; width: 36px; height: 3px; border-radius: 0 0 3px 3px; background: var(--primary); opacity: calc(.35 + var(--i) * .22); }
.path-step:hover { border-color: var(--line-2); box-shadow: var(--shadow); transform: translateY(-3px); }
.path-lvl { align-self: flex-start; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--primary); background: var(--primary-soft); padding: 3px 10px; border-radius: 999px; }
.path-step h4 { font-size: 18px; letter-spacing: -0.02em; margin-top: 6px; }
.path-step p { color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }
.path-top { background: var(--ink); border-color: var(--ink); color: #fff; }
.path-top p { color: rgba(255,255,255,.72); }
.path-top .path-lvl { background: rgba(255,255,255,.12); color: #A9C8FF; }
.path-top::before { background: #7FB0FF; opacity: 1; }
.path-side {
  margin-top: 16px; display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px;
  border: 1.5px dashed var(--line-2); border-radius: var(--radius-lg); background: var(--soft);
}
.path-side-ic, .train-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; flex-shrink: 0; }
.path-side-ic svg, .train-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.path-side b { display: block; font-size: 16px; margin-bottom: 2px; }
.path-side span { color: var(--ink-2); font-size: 14.5px; }

/* ---------- Formación ---------- */
.train { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.train-card { background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; transition: border-color .2s, box-shadow .2s; }
.train-card:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.train-card h4 { font-size: 17px; letter-spacing: -0.02em; margin: 16px 0 6px; }
.train-card p { color: var(--ink-2); font-size: 14.5px; }

/* ---------- Qué ofrecemos ---------- */
.perks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.perks li { padding: 24px; display: flex; flex-direction: column; gap: 6px; }
.perks li + li { border-left: 1px solid var(--line); }
.perks b { font-size: 16px; letter-spacing: -0.015em; }
.perks b::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); margin-right: 8px; vertical-align: 1px; }
.perks span { color: var(--ink-2); font-size: 14.5px; }

/* ---------- Requisitos y formulario ---------- */
.apply { margin-top: 64px; display: grid; grid-template-columns: 1fr 1.25fr; gap: 24px; align-items: start; }
.apply-info { background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; }
.apply-info h3 { font-size: 26px; letter-spacing: -0.03em; margin-bottom: 10px; }
.apply-lead { color: var(--ink-2); font-size: 15.5px; }
.apply-h { margin: 24px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.apply-list { list-style: none; margin: 0; padding: 0; }
.apply-list li { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; }
.apply-list li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; margin-top: 2px; background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.2 2.2 2.2 4.8-4.8' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }
.apply-contact { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-2); display: grid; gap: 4px; }
.apply-contact p { font-size: 14px; color: var(--ink-3); }
.apply-contact a { font-weight: 500; text-decoration: none; color: var(--primary); }
.apply-contact a:hover { text-decoration: underline; text-underline-offset: 3px; }

.apply-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 28px; position: relative; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); margin: 4px 0 18px; cursor: pointer; }
.consent input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--primary); flex-shrink: 0; }
.consent.invalid { color: var(--danger); }
.f.invalid select { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(229,72,77,.12); }
.apply-status { font-size: 13.5px; min-height: 18px; margin-top: 10px; text-align: center; color: var(--ink-2); }
.apply-status.err { color: var(--danger); }
.apply-done { text-align: center; padding: 56px 12px; animation: fadeUp .45s var(--ease); }
.apply-form.sent > :not(.apply-done) { display: none; }

@media (max-width: 1100px) {
  .path { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .path-step { min-height: 0; }
  .train { grid-template-columns: 1fr 1fr; }
  .perks { grid-template-columns: 1fr 1fr; }
  .perks li:nth-child(3) { border-left: 0; }
  .perks li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .apply { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .path, .train, .perks { grid-template-columns: 1fr; }
  .perks li + li { border-left: 0; border-top: 1px solid var(--line); }
  .apply-info, .apply-form { padding: 22px; }
  .path-side { flex-direction: column; }
}
.apply-form .btn-block { width: 100%; }

/* ---------- Página propia ---------- */
.tw-page { padding-top: 56px; }
.tw-page .head-center { margin-bottom: 64px; }
.tw-h1 { font-size: clamp(34px, 4.6vw, 54px); letter-spacing: -0.04em; line-height: 1.08; margin-top: 16px; }
.tw-page .hero-ctas { margin-top: 28px; }
.crumbs { display: flex; justify-content: center; gap: 8px; font-size: 13.5px; color: var(--ink-3); margin-bottom: 18px; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--primary); }
#ruta, #postular { scroll-margin-top: 88px; }
