/* Misma fuente que el menú, también en los títulos */
.ms-banner, .ms-banner h1, .vac, .vac h2, .vac h3 { font-family: var(--nav-font); }

/* ---------- BANNER ---------- */
.ms-banner { position: relative; overflow: hidden; text-align: center; padding: 2.5rem 1.5rem 3rem;
  background: linear-gradient(135deg, #FBF0DA 0%, #fff6e6 45%, #e8f3f1 100%); }
.ms-banner::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; left: -180px; top: -260px;
  background: radial-gradient(circle, rgba(232,169,63,.45) 0%, rgba(232,169,63,0) 70%); }
.ms-banner::after { content: ""; position: absolute; width: 480px; height: 480px; border-radius: 50%; right: -160px; bottom: -280px;
  background: radial-gradient(circle, rgba(143,196,190,.55) 0%, rgba(143,196,190,0) 70%); }
.ms-banner-in { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.ms-banner h1 { font-size: clamp(2rem, 5.5vw, 3.4rem); line-height: 1.1; margin: 0 0 .8rem; font-weight: 700; }
.ms-banner p { font-size: 1.1rem; color: #4a4a4a; margin: 0 auto 1.8rem; max-width: 520px; }
.ms-actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.ms-btn { display: inline-block; text-decoration: none; font-weight: 600; padding: .9rem 1.9rem; border-radius: 999px; transition: filter .2s, transform .2s; }
.ms-btn:hover { transform: translateY(-1px); }
.ms-btn-primary { background: #E8A93F; color: #1f1f1f; }
.ms-btn-ghost { background: #fff; color: #1f1f1f; border: 1.5px solid #1f1f1f1f; }

/* ---------- REGISTRO PÚBLICO DE VACANTES ---------- */
.vac, .vac * { box-sizing: border-box; }
.vac {
  --sun: #E8A93F;        /* mostaza del logo */
  --sun-soft: #FBF0DA;
  --sea: #8FC4BE;        /* verde agua del logo */
  --sea-deep: #3E7F79;
  --ink: #1f1f1f;
  --muted: #6b6b6b;
  --line: #ece7dd;
  background: linear-gradient(180deg, #fffdf8 0%, #fff 100%);
  padding: 4rem 1.25rem; color: var(--ink);
  scroll-margin-top: 90px; /* main.css pone 900px en todas las secciones y el enlace "Ver vacantes" no bajaba */
}
.vac-wrap { max-width: 1080px; margin: 0 auto; }
.vac-head { text-align: center; max-width: 640px; margin: 0 auto 2.5rem; }
.vac-eyebrow { display: inline-block; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--sea-deep); background: #e8f3f1; padding: .35rem .9rem; border-radius: 999px; }
.vac-head h2 { font-size: clamp(1.75rem, 4vw, 2.4rem); margin: .9rem 0 .5rem; line-height: 1.15; }
.vac-year { display: inline-block; background: var(--sun); color: #1f1f1f; padding: 0 .5em; border-radius: 999px; white-space: nowrap; }
.vac-date { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .95rem; margin: 0; }
.vac-date::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--sun); }

.vac-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 600px)  { .vac-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .vac-grid { grid-template-columns: repeat(4, 1fr); } }
.vac-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 1.5rem 1.4rem 1.4rem;
  display: flex; flex-direction: column; gap: 1rem; position: relative; overflow: hidden;
  box-shadow: 0 6px 20px rgba(60, 45, 10, .05); transition: transform .2s ease, box-shadow .2s ease; }
.vac-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--sea); }
.vac-card.is-full::before { background: #d6d2c8; }
.vac-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(60, 45, 10, .09); }

.vac-level { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sea-deep); margin: .4rem 0 0; }
.vac-card h3 { font-size: 1.2rem; line-height: 1.25; margin: 0; }
.vac-range { color: var(--muted); font-size: .95rem; margin: 0; }

.vac-count { display: flex; align-items: baseline; gap: .5rem; margin-top: auto; }
.vac-count .vac-num { font-size: 3.2rem; font-weight: 800; line-height: 1; color: var(--ink); }
.vac-count .vac-unit { color: var(--muted); font-size: .95rem; }
.vac-card.is-full .vac-count .vac-num { color: #b5b0a4; }

.vac-bar { height: 8px; border-radius: 99px; background: var(--sun-soft); overflow: hidden; }
.vac-bar i { display: block; height: 100%; background: var(--sun); border-radius: 99px; }
.vac-meta { display: flex; justify-content: space-between; font-size: .85rem; color: var(--muted); margin: -.4rem 0 0; }
.vac-meta b { color: var(--ink); }

.vac-chip { align-self: flex-start; font-size: .8rem; font-weight: 700; padding: .3rem .75rem; border-radius: 999px;
  background: #e8f3f1; color: var(--sea-deep); }
.vac-card.is-full .vac-chip { background: #f1eee7; color: #8a857a; }

.vac-cta { text-align: center; margin-top: 2.5rem; }
.vac-btn { display: inline-block; background: var(--sun); color: #1f1f1f; font-weight: 700; text-decoration: none;
  padding: .9rem 1.8rem; border-radius: 999px; transition: filter .2s; }
.vac-btn:hover { filter: brightness(.95); color: #1f1f1f; }
.vac-note { color: var(--muted); font-size: .9rem; margin: .9rem 0 0; }