/* =========================================================
   EMPLEO – PÁGINA PUENTE (VERSIÓN FINAL ROBUSTA)
   ========================================================= */

/* -------------------------
   HERO EMPLEO (BASE)
   ------------------------- */
.hero.hero--empleo{
  position: relative;
  overflow: hidden;
  padding: 8rem 0 7rem;
}

/* Fondo editorial garantizado (no depende de otros CSS) */
.hero.hero--empleo::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #f6fafc 0%, #ffffff 70%);
  z-index: 0;
}

/* Gráfico corporativo decorativo (imagen molecular) */
.hero.hero--empleo::after{
  content: "";
  position: absolute;
  right: -6%;
  top: 50%;
  transform: translateY(-50%);
  width: 520px;
  height: 520px;
  background: url("/assets/img/global/fondoTransparente.png") no-repeat center;
  background-size: contain;
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
}

/* Contenido siempre por encima */
.hero.hero--empleo .hero__content{
  position: relative;
  z-index: 1;
  max-width: 760px;
}

/* Subrayado editorial del título (marca visual clara) */
.hero.hero--empleo h1{
  position: relative;
}

.hero.hero--empleo h1::after{
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: 1rem;
  background: linear-gradient(90deg, #00a3c7, #7ac143);
  border-radius: 2px;
}

/* -------------------------
   SECCIONES – RITMO EDITORIAL
   ------------------------- */
.section{
  padding: 5rem 0;
}

.section + .section{
  border-top: 1px solid rgba(0,0,0,.04);
}

/* Variantes suaves de fondo */
.section-light{
  background-color: #f9fbfc;
}

.section-soft{
  background-color: #ffffff;
}

/* -------------------------
   CTA FINAL – CIERRE PREMIUM
   ------------------------- */
.section-cta{
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fb 100%);
}

.section-cta .cta-box{
  max-width: 720px;
  margin: auto;
  text-align: center;
}

.section-cta .cta-box h2{
  max-width: 520px;
  margin: 0 auto;
}

.section-cta .btn{
  margin-top: 1.5rem;
}

/* -------------------------
   RESPONSIVE AJUSTES
   ------------------------- */
@media (max-width: 900px){
  .hero.hero--empleo{
    padding: 7rem 0 6rem;
  }

  .hero.hero--empleo::after{
    right: -18%;
    width: 420px;
    height: 420px;
    opacity: 0.18;
  }
}

@media (max-width: 600px){
  .hero.hero--empleo{
    padding: 6rem 0 5rem;
  }

  .hero.hero--empleo::after{
    display: none;
  }
}

/*
   HERO EMPLEO – IMAGEN CORPORATIVA INTEGRADA (DEFINITIVO)
   ========================================================= */

.hero--empleo{
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    #f5f9fb 0%,
    #ffffff 70%
  );
}

.hero-empleo-bg{
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(
      circle at 75% 50%,
      rgba(0,163,199,0.06),
      transparent 60%
    ),
    url("/assets/img/global/empleo.png") no-repeat 85% center;
  background-size: 640px auto;
  opacity: 0.32;
  pointer-events: none;
  z-index: 0;
}

/* Asegurar texto por encima */
.hero--empleo .hero__content{
  position: relative;
  z-index: 1;
  max-width: 720px;
}

/* Línea editorial (la que ya ves) */
.hero-empleo__rule{
  display: block;
  width: 64px;
  height: 3px;
  margin: 1rem 0 1.5rem;
  background: linear-gradient(90deg, #00a3c7, #7ac143);
  border-radius: 2px;
}

/* Responsive */
@media (max-width: 1024px){
  .hero-empleo-bg{
    background-size: 420px auto;
    opacity: 0.18;
  }
}

@media (max-width: 768px){
  .hero-empleo-bg{
    display: none;
  }
}

/* Ancho editorial para cuerpo de Empleo */
.site-main .container{
  max-width: 880px;
}

/* Jerarquía editorial secundaria */
.site-main h2{
  margin-bottom: .5rem;
}

.site-main h2 + p{
  max-width: 720px;
  color: #5f6f7a;
}

/* Ritmo vertical editorial */
.site-main section:nth-of-type(even){
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.site-main section:nth-of-type(odd){
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* =========================================================
   EMPLEO – MICRODETALLE EDITORIAL RECURRENTE
   ========================================================= */

/* Contenedor editorial con filete */
.site-main section{
  position: relative;
}

.site-main section::before{
  content: "";
  position: absolute;
  left: -24px;
  top: 2.5rem;
  width: 2px;
  height: calc(100% - 5rem);
  background: linear-gradient(
    180deg,
    rgba(0,163,199,.6),
    rgba(122,193,67,.6)
  );
  opacity: .35;
}

/* el título */
.section-cta p{
  text-align: center;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* Fondo editorial suave para secciones amplias */
.section-cta{
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #f7fafc 100%
  );
}

/* HERO EMPLEO – CONTENIDO CENTRADO */
.hero--empleo .hero__content{
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.hero-empleo__rule{ margin-right: auto;
}

  margin-left: auto;


.hero--empleo{
  padding: 7.5rem 0 6.5rem;
}

/* =========================================================
   EMPLEO – FONDO EDITORIAL VERDE (ELEGANTE)
   ========================================================= */

.site-main section.enfoque-empleador{
  background: linear-gradient(
    180deg,
    rgba(122,193,67,0.06) 0%,
    rgba(255,255,255,1) 70%
  );
}

/* =========================================================
   HERO EMPLEO – CENTRADO DE LÍNEA EDITORIAL
   ========================================================= */

.hero--empleo .hero-empleo__rule{
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* EMPLEO – FONDO VERDE PARA ENFOQUE EMPLEADOR */
.site-main .section.section-soft{
  background: linear-gradient(
    180deg,
    rgba(122,193,67,0.06) 0%,
    #ffffff 70%
  );
}

/* HERO EMPLEO – CENTRADO REAL DE LA LÍNEA */
.hero--empleo h1::after{
  left: 50%;
  transform: translateX(-50%);
}

/* =========================================================
   HERO EMPLEO – CENTRADO DEFINITIVO DE LÍNEA EDITORIAL
   ========================================================= */

/* Aseguramos contexto */
.hero--empleo h1{
  position: relative;
}

/* Reposicionamos la línea real (pseudo-elemento) */
.hero--empleo h1::after{
  left: 50%;
  transform: translateX(-50%);
  margin-left: 0;
}

========
   EMPLEO – FONDO CORPORATIVO ELEGANTE (SECCIÓN ENFOQUE)
   ========================================================= */

.site-main .section.section-soft{
  background: linear-gradient(
    90deg,
    rgba(28,54,83,0.95) 0%,
    rgba(70,124,95,0.92) 55%,
    rgba(122,193,67,0.88) 100%
  );
  color: #ffffff;
}

.site-main .section.section-soft h2,
.site-main .section.section-soft p{
  color: #ffffff;
}

.site-main .section.section-soft p{
  opacity: 0.92;
}

========
   HERO EMPLEO – CENTRADO REAL DE LÍNEA (INFALIBLE)
   ========================================================= */

.hero--empleo h1{
  text-align: center;
}

.hero--empleo h1::after{
  display: block;
  margin: 1rem auto 0 auto;
}

/* EMPLEO – SECCIÓN ENFOQUE (FONDO CORPORATIVO) */
.site-main .section.section-soft{
  background: linear-gradient(
    90deg,
    #1c3653 0%,
    #3f6f63 55%,
    #7ac143 100%
  );
}

/* Asegurar legibilidad del texto sobre fondo */
.site-main .section.section-soft h2,
.site-main .section.section-soft p{
  color: #ffffff !important;
}

.site-main .section.section-soft p{
  opacity: 0.9;
}

.site-main .section.section-soft{
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}

/* =========================================================
   EMPLEO – LÍNEA VERTICAL EDITORIAL
   ========================================================= */

/* Secciones con línea vertical */
.site-main .section.has-vertical-line .container{
  position: relative;
  padding-left: 2.5rem; /* espacio para la línea */
}

/* Línea */
.site-main .section.has-vertical-line .container::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.25rem;
  width: 2px;
  height: calc(100% - 0.5rem);
  background: linear-gradient(
    180deg,
    rgba(122,193,67,0.9),
    rgba(122,193,67,0.2)
  );
  border-radius: 1px;
}