/* Reclutamiento — composiciones propias de esta página.
   Clima desagrega una organización; aquí se sigue el recorrido de una plaza
   que está vacante hasta que vuelve a estar ocupada. Superficie propia: frío.
   Sin violeta (Talento) y sin mint como fondo dominante (Compensación). */

/* --- hero --- */
.hero-r{position:relative;overflow:hidden;padding:clamp(52px,7vw,92px) 0 clamp(58px,8vw,104px)}
.hero-r::after{content:"";position:absolute;left:-16%;bottom:-46%;width:64%;height:96%;
  background:radial-gradient(circle closest-side,rgba(15,143,131,.34),rgba(8,34,56,0));pointer-events:none}
.hero-r .wrap{position:relative;z-index:2}
.hero-r-rejilla{display:grid;gap:clamp(38px,5vw,56px)}
.hero-r h1{max-width:16ch;font-size:clamp(2.15rem,4.7vw,3.6rem)}
.hero-r .texto-l{margin-top:22px;color:#C4D4E1;max-width:50ch}
.hero-r .btn{margin-top:30px}
.rotulo-r{font-size:.98rem;font-weight:600;color:var(--mint);letter-spacing:-.01em}

/* --- lienzo --- */
.fig .vacante,.s-navy .fig .vacante{fill:rgba(255,255,255,.03);stroke:rgba(255,255,255,.34);stroke-dasharray:5 4}
.fig .ocupada,.s-navy .fig .ocupada{fill:rgba(40,199,137,.18);stroke:#28C789}
.fig .expediente,.s-navy .fig .expediente{fill:rgba(40,199,137,.09);stroke:rgba(40,199,137,.55)}
.fig .hilo.vivo,.s-navy .fig .hilo.vivo{stroke:var(--mint);stroke-width:1.8}

/* --- preguntas --- */
.pendientes{display:grid;gap:16px}
.pendientes p{padding-left:20px;border-left:2px solid #C2CEDA;
  font-size:clamp(1.14rem,2.3vw,1.48rem);font-weight:600;letter-spacing:-.02em;line-height:1.24;color:#3D5163;max-width:30ch}
.tajo{margin-top:clamp(32px,4.4vw,52px);padding-top:24px;border-top:2px solid var(--navy);max-width:26ch;
  font-size:clamp(1.42rem,2.9vw,2rem);font-weight:700;letter-spacing:-.026em;line-height:1.18}

/* --- estado de la plaza --- */
.estados{display:grid;gap:10px;margin-top:8px}
.estado{padding:16px 18px;border-radius:var(--radio-m);border:1px solid var(--linea);background:#fff}
.estado b{display:block;font-weight:600}
.estado span{font-size:.92rem;color:#4A5C6E}
.estado-vacante{border-color:#C2CEDA;background:#EEF2F6}
.estado-ocupada{border-color:var(--mint);background:#EAF8F1}

/* --- origen de la vacante --- */
.origen{display:grid;gap:0}
.origen div{position:relative;padding:15px 0 15px 30px;border-bottom:1px solid var(--linea)}
.origen div:last-child{border-bottom:0}
.origen div::before{content:"";position:absolute;left:0;top:22px;width:11px;height:11px;border-radius:2px;background:var(--teal)}
.origen b{font-weight:600;font-size:1.06rem}
.origen span{display:block;font-size:.93rem;color:var(--gris)}


/* --- evaluación --- */
.pruebas{display:grid;gap:0;border-top:1px solid var(--linea)}
.prueba-i{display:grid;gap:3px;padding:18px 0;border-bottom:1px solid var(--linea)}
.prueba-i b{font-weight:600;font-size:1.1rem;letter-spacing:-.014em}
.prueba-i span{font-size:.96rem;color:var(--gris);max-width:56ch}

/* --- lo que no hace --- */
.limites{display:grid;gap:0;border-top:1px solid var(--linea)}
.limite{padding:16px 0;border-bottom:1px solid var(--linea)}
.limite b{font-weight:600;display:block}
.limite span{font-size:.94rem;color:var(--gris)}

/* --- recorrido completo --- */
.riel{position:relative;display:grid;gap:0}
.riel::before{content:"";position:absolute;left:7px;top:14px;bottom:14px;width:2px;background:var(--linea)}
.hito{position:relative;padding:13px 0 13px 32px}
.hito::before{content:"";position:absolute;left:0;top:20px;width:16px;height:16px;border-radius:4px;background:#DCE3EA}
.hito b{font-weight:600;font-size:1.1rem;letter-spacing:-.014em}
.hito span{display:block;font-size:.93rem;color:var(--gris)}
.s-navy .hito span{color:var(--gris-claro)}
.hito-vivo::before{background:var(--mint)}
.hito-fin::before{background:var(--navy)}

/* --- reparto --- */

body{--acento:var(--teal)}

@media (min-width:720px){
  .estados{grid-template-columns:1fr 1fr}
  .limites{grid-template-columns:1fr 1fr;column-gap:36px}
  .pendientes{grid-template-columns:1fr 1fr;gap:22px 34px}
}
@media (min-width:900px){
  .hero-r-rejilla{grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(38px,4.4vw,64px)}
  .riel{max-width:640px}
}