:root{
  --detail-blue:#0b0f63;
  --detail-pink:#ffafcc;
  --detail-pink-soft:#ffdce8;
  --detail-yellow:#f7c95c;
  --detail-bg:#fffdfb;
  --detail-wa:#25D366;
  --detail-text:#1c1c1c;
  --detail-muted:rgba(28,28,28,.62);
  --detail-line:rgba(11,15,99,.10);
  --detail-pink-line:rgba(255,175,204,.44);
  --detail-shadow:0 18px 46px rgba(11,15,99,.08);
  --detail-soft-shadow:0 10px 26px rgba(11,15,99,.065);
}

.job-detail-page{
  min-height:100vh;
  margin:0;
  background:
    radial-gradient(circle at 8% 4%,rgba(255,175,204,.22),transparent 27%),
    radial-gradient(circle at 92% 5%,rgba(247,201,92,.16),transparent 25%),
    linear-gradient(180deg,#fffdfb 0%,#fff7fb 100%);
  color:var(--detail-text);
  font-family:Poppins,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:400;
}

.job-detail-page *{box-sizing:border-box}

.job-detail-main{
  width:min(1120px,100%);
  margin:0 auto;
  padding:24px 18px 36px;
}

.job-detail-hero,
.job-detail-section,
.job-detail-sidebar,
.job-detail-final-cta{
  background:rgba(255,255,255,.96);
  border:1px solid var(--detail-pink-line);
  border-radius:26px;
  box-shadow:var(--detail-shadow);
}

.job-detail-hero{
  min-height:330px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:34px;
  align-items:center;
  padding:42px 50px;
  margin-bottom:20px;
  overflow:hidden;
  position:relative;
}

.job-detail-hero::before{
  content:"";
  position:absolute;
  left:-58px;
  top:-92px;
  width:168px;
  height:245px;
  border-radius:0 0 999px 999px;
  background:rgba(255,175,204,.52);
  transform:rotate(8deg);
  pointer-events:none;
}

.job-detail-hero::after{
  content:"";
  position:absolute;
  right:-72px;
  bottom:-64px;
  width:250px;
  height:250px;
  border-radius:70% 0 0 0;
  background:rgba(247,201,92,.86);
  pointer-events:none;
}

.job-detail-copy{
  position:relative;
  z-index:1;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
}

.job-detail-badge{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(37,211,102,.55);
  color:#0f9f4a;
  padding:0 14px;
  font-size:12px;
  line-height:1;
  font-weight:600;
}

.job-detail-hero h1{
  margin:2px 0 0;
  color:var(--detail-blue);
  font-size:clamp(33px,4.6vw,52px);
  line-height:1.04;
  letter-spacing:-.03em;
  font-weight:600;
}

.job-detail-code{
  margin:0;
  color:var(--detail-blue);
  opacity:.78;
  font-size:14px;
  line-height:1.4;
  font-weight:500;
}

.job-detail-salary{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  border-radius:999px;
  background:rgba(247,201,92,.28);
  color:var(--detail-blue);
  padding:0 17px;
  font-size:20px;
  line-height:1;
  font-weight:600;
}

.job-detail-mini{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:2px;
}

.job-detail-mini span{
  display:inline-flex;
  align-items:center;
  min-height:35px;
  max-width:100%;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--detail-line);
  color:var(--detail-blue);
  padding:0 14px;
  font-size:13px;
  line-height:1.25;
  font-weight:500;
  box-shadow:0 8px 18px rgba(11,15,99,.04);
}

.job-detail-wa{
  min-height:46px;
  border:0;
  border-radius:14px;
  background:var(--detail-wa);
  color:#fff;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:14px;
  line-height:1;
  font-weight:600;
  padding:0 22px;
  box-shadow:0 12px 24px rgba(37,211,102,.25);
  transition:transform .2s ease-out,box-shadow .2s ease-out,filter .2s ease-out;
}

.job-detail-wa:hover{
  transform:translateY(-1px);
  filter:saturate(1.05);
  box-shadow:0 15px 30px rgba(37,211,102,.30);
}

.job-detail-wa:active{transform:translateY(0) scale(.98)}

.job-detail-wa svg{
  width:19px;
  height:19px;
  fill:currentColor;
  flex:0 0 auto;
}

.job-detail-verified{
  margin:0;
  color:var(--detail-blue);
  opacity:.82;
  font-size:12px;
  line-height:1.5;
  font-weight:500;
}

.job-detail-hero-brand{
  position:relative;
  z-index:1;
  justify-self:center;
  width:min(300px,100%);
  min-height:260px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.job-detail-hero-brand img{
  width:210px;
  max-width:80%;
  height:auto;
  display:block;
  filter:drop-shadow(0 18px 24px rgba(11,15,99,.08));
}

.job-detail-hero-brand p{
  margin:8px 0 0;
  color:var(--detail-blue);
  font-size:13px;
  line-height:1.45;
  font-weight:500;
}

.job-detail-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 420px;
  gap:20px;
  align-items:start;
}

.job-detail-content{
  display:grid;
  gap:16px;
  min-width:0;
}

.job-detail-section,
.job-detail-sidebar{
  padding:22px;
}

.job-detail-section h2,
.job-detail-sidebar h2,
.job-detail-final-cta h2{
  margin:0;
  color:var(--detail-blue);
  display:flex;
  align-items:center;
  gap:12px;
  font-size:20px;
  line-height:1.2;
  font-weight:600;
}

.job-detail-section-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:var(--detail-pink-soft);
  color:#ff4f8b;
  flex:0 0 auto;
}

.job-detail-section-icon svg{
  width:18px;
  height:18px;
  fill:currentColor;
}

.job-detail-list{
  display:grid;
  gap:10px;
  margin-top:16px;
}

.job-detail-list p{
  margin:0;
  display:flex;
  gap:10px;
  align-items:flex-start;
  color:rgba(28,28,28,.76);
  font-size:14px;
  line-height:1.58;
  font-weight:400;
}

.job-detail-list p span,
.job-detail-checklist span::before{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(247,201,92,.32);
  color:var(--detail-blue);
  font-size:13px;
  font-weight:600;
  flex:0 0 auto;
}

.job-detail-checklist{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:16px;
}

.job-detail-checklist span{
  position:relative;
  min-height:44px;
  display:flex;
  align-items:center;
  border:1px solid rgba(255,175,204,.38);
  border-radius:15px;
  background:#fff;
  color:rgba(28,28,28,.76);
  padding:10px 12px 10px 44px;
  font-size:13px;
  line-height:1.35;
  font-weight:500;
}

.job-detail-checklist span::before{
  content:"✓";
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  background:var(--detail-pink-soft);
  color:#ff4f8b;
}

.job-detail-tags{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:16px;
}

.job-detail-tags span{
  display:inline-flex;
  align-items:center;
  min-height:33px;
  border-radius:999px;
  background:var(--detail-pink-soft);
  color:var(--detail-blue);
  padding:0 13px;
  font-size:13px;
  line-height:1;
  font-weight:500;
}

.job-detail-sidebar{
  position:sticky;
  top:18px;
}

.job-detail-sidebar dl{
  display:grid;
  gap:0;
  margin:16px 0 0;
}

.job-detail-sidebar dl div{
  display:grid;
  grid-template-columns:28px minmax(0,1fr) auto;
  grid-template-areas:"icon dt dd";
  column-gap:11px;
  align-items:center;
  min-height:43px;
  border-bottom:1px solid var(--detail-line);
  padding:7px 0;
}

.job-detail-sidebar dl div:last-child{border-bottom:0}

.job-detail-sidebar dl div > span{
  grid-area:icon;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:var(--detail-pink-soft);
  color:#ff4f8b;
  font-size:12px;
  font-weight:600;
}

.job-detail-sidebar dl div > span svg{
  width:15px;
  height:15px;
  fill:currentColor;
}

.job-detail-sidebar dt{
  grid-area:dt;
  margin:0;
  color:rgba(28,28,28,.62);
  font-size:13px;
  line-height:1.2;
  font-weight:400;
}

.job-detail-sidebar dd{
  grid-area:dd;
  margin:0;
  color:var(--detail-blue);
  font-size:13px;
  line-height:1.35;
  font-weight:600;
  text-align:right;
}

.job-detail-final-cta{
  margin-top:20px;
  padding:24px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
  background:linear-gradient(90deg,rgba(255,220,232,.72),rgba(255,255,255,.96));
  border-color:rgba(255,175,204,.62);
}

.job-detail-final-cta > div{
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  grid-template-areas:"icon title" "icon text";
  column-gap:14px;
  align-items:center;
}

.job-detail-cta-icon{
  grid-area:icon;
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:#fff;
  color:var(--detail-wa);
  box-shadow:0 10px 20px rgba(11,15,99,.06);
}

.job-detail-cta-icon svg{
  width:28px;
  height:28px;
  fill:currentColor;
}

.job-detail-final-cta h2{grid-area:title}

.job-detail-final-cta p{
  grid-area:text;
  margin:7px 0 0;
  color:rgba(28,28,28,.64);
  font-size:14px;
  line-height:1.55;
  font-weight:400;
}

.job-detail-final-cta .job-detail-wa{
  min-width:230px;
  min-height:52px;
  font-size:15px;
}

@media(max-width:960px){
  .job-detail-layout{grid-template-columns:1fr}
  .job-detail-hero{grid-template-columns:1fr;gap:20px}
  .job-detail-hero-brand{order:-1;min-height:auto;width:100%}
  .job-detail-hero-brand img{width:128px}
  .job-detail-sidebar{position:static}
}

@media(max-width:640px){
  .job-detail-main{padding:14px 12px 30px}
  .job-detail-hero{min-height:auto;padding:24px 18px;border-radius:24px;margin-bottom:14px;gap:18px}
  .job-detail-hero-brand img{width:112px;max-width:46vw}
  .job-detail-hero-brand p{font-size:12px;margin-top:4px}
  .job-detail-hero::before{width:118px;height:180px;left:-62px;top:-64px}
  .job-detail-hero::after{width:142px;height:142px;right:-64px;bottom:-58px}
  .job-detail-copy{width:100%;gap:11px}
  .job-detail-hero h1{font-size:29px;line-height:1.08}
  .job-detail-code{font-size:13px}
  .job-detail-salary{font-size:17px;min-height:38px;padding:0 14px}
  .job-detail-mini{display:grid;width:100%;gap:8px}
  .job-detail-mini span{width:100%;min-height:36px;white-space:normal;justify-content:flex-start}
  .job-detail-wa{width:100%;min-height:48px;border-radius:14px}
  .job-detail-section,.job-detail-sidebar{padding:16px;border-radius:22px}
  .job-detail-section h2,.job-detail-sidebar h2,.job-detail-final-cta h2{font-size:18px}
  .job-detail-section-icon{width:34px;height:34px;border-radius:12px}
  .job-detail-checklist{grid-template-columns:1fr}
  .job-detail-layout,.job-detail-content{gap:12px}
  .job-detail-sidebar dl div{grid-template-columns:28px minmax(0,1fr);grid-template-areas:"icon dt" "icon dd";min-height:52px}
  .job-detail-sidebar dd{text-align:left;font-size:13px;margin-top:3px}
  .job-detail-final-cta{padding:16px;border-radius:22px;grid-template-columns:1fr}
  .job-detail-final-cta > div{grid-template-columns:46px minmax(0,1fr);column-gap:11px}
  .job-detail-cta-icon{width:46px;height:46px;border-radius:15px}
  .job-detail-final-cta .job-detail-wa{min-width:0;width:100%}
}

/* FIX: evita que iconos SVG se agranden en rutas limpias */
svg{max-width:100%;height:auto;}
a svg, button svg, .job-detail-wa svg, .job-detail-section-icon svg, .job-detail-sidebar svg{width:1.15em;height:1.15em;display:inline-block;vertical-align:middle;fill:currentColor;}
.job-detail-wa svg{width:19px!important;height:19px!important;}
.job-detail-section-icon svg{width:18px!important;height:18px!important;}
.job-detail-sidebar dl div > span svg{width:15px!important;height:15px!important;}