/* ============================================================
   CSS: PÁGINA OFERTAS DE EMPLEO — sfm-of v2 CLARA (11-09-2026)
   Rediseño: fuera foto stock fucsia y textos blancos.
   Fondo claro #F8F6F7 · textos #3A3340 · acento coral #FA5B60
   · único golpe de color: CTA inferior morado #614258.
   ============================================================ */

/* ── FONDO GLOBAL claro ── */
.page-id-453 #Body,
.page-id-453 #body_wrapper,
.page-id-453 .body_wrapper,
.page-id-453 #Wrapper,
.page-id-453 #wrapper {
  background: #F8F6F7 !important;
  background-image: none !important;
}
.page-id-453 #Body::before,
.page-id-453 #body_wrapper::before,
.page-id-453 .body_wrapper::before,
.page-id-453 #Wrapper::before,
.page-id-453 #wrapper::before {
  content: none !important;
}

/* ── INTRO ── */
.sfm-of-intro {
  text-align: center;
  padding: 64px 40px 24px;
}
.sfm-of-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #614258 !important;
  border: 1px solid rgba(97, 66, 88, 0.35);
  padding: 5px 16px;
  border-radius: 20px;
  margin-bottom: 16px;
  background: transparent;
}
.sfm-of-title {
  font-size: clamp(34px, 4.5vw, 48px);
  color: #3A3340 !important;
  margin: 0 0 14px 0;
  line-height: 1.15;
  animation: none;
}
.sfm-of-subtitle {
  font-size: 17px;
  color: #6E6672 !important;
  line-height: 1.6;
  max-width: 580px;
  margin: 0 auto;
}

/* ── LISTADO ── */
.sfm-of-listings-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 40px 64px;
}
.page-id-453 .awsm-no-jobs-found,
.page-id-453 .awsm-jobs-no-listing {
  color: #6E6672 !important;
}

/* ── FILTROS — barra blanca ── */
.page-id-453 .awsm-filter-wrap {
  background: #ffffff !important;
  border: 1px solid #E5E0E6;
  border-radius: 12px;
  box-shadow: 0 3px 16px rgba(97, 66, 88, 0.07);
  padding: 14px 18px;
}
.page-id-453 .awsm-selectric {
  background: #ffffff !important;
  border: 1px solid #E5E0E6;
  border-radius: 8px;
  color: #3A3340;
}
.page-id-453 .awsm-selectric .label { color: #3A3340; }
.page-id-453 .awsm-selectric-items {
  background: #ffffff;
  border: 1px solid #E5E0E6;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(97, 66, 88, 0.12);
}
.page-id-453 .awsm-selectric-items li { color: #3A3340; }
.page-id-453 .awsm-selectric-items li:hover {
  background: #F8F6F7;
  color: #614258;
}

/* ── TARJETA DE OFERTA — título fuera del azul demo ── */
.page-id-453 .awsm-job-post-title,
.page-id-453 .awsm-job-post-title a {
  color: #3A3340 !important;
}
.page-id-453 .awsm-job-post-title a:hover { color: #614258 !important; }
.page-id-453 .awsm-job-specification-term,
.page-id-453 .awsm-job-specification-item { color: #6E6672 !important; }


/* ── CTA INFERIOR — el único bloque de color de la página ── */
.sfm-of-cta-strip {
  background: #614258;
  border-top: none;
  padding: 48px 40px;
}
.sfm-of-cta-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  max-width: 900px;
  margin: 0 auto;
}
.sfm-of-cta-text {
  font-size: 22px;
  color: #ffffff !important;
  margin: 0;
}
.sfm-of-cta-btn {
  display: inline-block;
  background: #FA5B60;
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 13px 28px;
  border-radius: 6px;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease;
}
.sfm-of-cta-btn:hover {
  background: #e04a4f;
  transform: translateY(-1px);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .sfm-of-intro { padding: 40px 20px 16px; }
  .sfm-of-listings-wrap { padding: 20px 20px 40px; }
  .sfm-of-cta-strip { padding: 36px 20px; }
  .sfm-of-cta-inner { flex-direction: column; text-align: center; gap: 20px; }
  .sfm-of-cta-text { font-size: 18px; }
}

/* ═══ Lote 10-09-2026: ofertas — una sola flecha en «Más detalles» ═══ */
.awsm-job-more span::after { content: none !important; }
/* ═══ Lote 10-09-2026: filtros a ancho completo en móvil ═══ */
@media (max-width:767px) {
  .awsm-filter-wrap, .awsm-filter-items, .awsm-filter-item,
  .awsm-selectric-wrapper, .awsm-selectric { width: 100% !important; max-width: 100% !important; }
}

/* ═══ Lote 10-09-2026 (b): label de filtros compacto + aire flecha ═══ */
.awsm-selectric .label { font-size: 13px !important; }
.awsm-job-more span { margin-left: 4px; }

/* Dropdown filtros: por delante y completo (fix movil 10-09) */
.awsm-selectric-items { z-index: 999 !important; height: auto !important; max-height: none !important; overflow: visible !important; }

/* ── CTA v2 (11-09): banda morada sobre el propio inner (no existe .sfm-of-cta-strip en markup) ── */
.sfm-of-cta-inner {
  background: #614258;
  border-radius: 12px;
  padding: 36px 40px;
  margin-top: 28px;
  box-shadow: 0 6px 24px rgba(97, 66, 88, 0.18);
}
@media (max-width: 768px) {
  .sfm-of-cta-inner { padding: 28px 20px; }
}

/* ═══ Lote 11-09: alertas de empleo — visible, estilo claro ═══ */
.page-id-453 .awsm-jobs-alerts-widget-wrapper { display:block !important; }
.page-id-453 .awsm-jobs-alerts-widget-content {
  background:#fff;
  border:1px solid #E5E0E6;
  border-radius:12px;
  padding:32px 36px 36px;
  margin:0 0 40px;
}
.page-id-453 .awsm-jobs-alerts-widget-content h2 { font-size:22px; color:#3A3340; margin:0 0 6px; }
.page-id-453 .awsm-jobs-alerts-widget-description p { color:#6E6672; font-size:15px; margin:0 0 20px; }
.page-id-453 .awsm-jobs-alerts-form .awsm-job-form-control {
  height:46px;
  border:1px solid #E5E0E6 !important;
  border-radius:8px;
  color:#3A3340;
  background:#fff;
}
.page-id-453 .awsm-jobs-alerts-form .awsm-job-form-control:focus { outline:none; border-color:#614258 !important; }
.page-id-453 .awsm-jobs-alerts-form .ms-choice {
  border:1px solid #E5E0E6 !important;
  border-radius:8px;
  color:#3A3340;
  height:46px;
  background:#fff;
}
.page-id-453 .awsm-jobs-alerts-btn {
  background:#FA5B60 !important;
  color:#fff !important;
  border:none;
  border-radius:8px;
  font-size:14px;
  font-weight:700;
  padding:12px 24px;
  cursor:pointer;
  transition:background 0.2s ease;
}
.page-id-453 .awsm-jobs-alerts-btn:hover { background:#e04a4f !important; }
@media (max-width:767px) {
  .page-id-453 .awsm-jobs-alerts-widget-content { padding:24px 20px; }
}

/* ═══ Lote 11-09 (c): alertas DEBAJO del listado (petición Carlos) + hover tarjeta ═══ */
.page-id-453 .awsm-job-wrap { display:flex; flex-direction:column; }
.page-id-453 .awsm-job-wrap > .awsm-filter-wrap { order:1; width:100%; }
.page-id-453 .awsm-job-wrap > .awsm-job-listings { order:2; width:100%; }
.page-id-453 .awsm-job-wrap > .awsm-jobs-alerts-widget-wrapper { order:3; width:100%; margin-top:8px; }
.page-id-453 .awsm-job-item { transition:box-shadow 0.2s ease, transform 0.2s ease; }
.page-id-453 .awsm-job-item:hover { box-shadow:0 6px 24px rgba(58,51,64,0.08); transform:translateY(-2px); }

/* ═══ Lote 11-09 (d): hero morado sin foto + filtros limpios + iconos lineales ═══ */
/* Hero de marca (intro completa en morado, sin foto) */
.page-id-453 .mcb-item-zza3z5kb { background:none; }
.page-id-453 .sfm-of-intro { background:#614258; margin:0 calc(50% - 50vw); }
.page-id-453 .sfm-of-intro { padding:56px 40px 52px; }
.page-id-453 .sfm-of-eyebrow { color:rgba(255,255,255,0.85) !important; border-color:rgba(255,255,255,0.4); }
.page-id-453 .sfm-of-title { color:#ffffff !important; }
.page-id-453 .sfm-of-subtitle { color:rgba(255,255,255,0.82) !important; }

/* Filtros: fuera el borde izquierdo coral del plugin, unificado con el estándar */
.page-id-453 .awsm-selectric { border:1px solid #E5E0E6 !important; }
.page-id-453 .awsm-selectric:hover { border-color:#614258 !important; }

/* Icono lineal (campana) en el bloque de alertas */
.page-id-453 .awsm-jobs-alerts-widget-content h2 { padding-left:36px; position:relative; }
.page-id-453 .awsm-jobs-alerts-widget-content h2::before {
  content:'';
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:24px;
  height:24px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23614258' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Icono lineal (documento CV) en el CTA final */
.page-id-453 .sfm-of-cta-text { padding-left:38px; position:relative; }
.page-id-453 .sfm-of-cta-text::before {
  content:'';
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:26px;
  height:26px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ═══ Lote 11-09 (e): hero degradado estilo formación + espacios compensados ═══ */
.page-id-453 .sfm-of-intro {
  background:linear-gradient(135deg, #614258 0%, #7A5A6E 100%);
  padding:80px 40px 72px;
}
.page-id-453 .sfm-of-eyebrow {
  background:rgba(250,91,96,0.25);
  border-color:transparent;
  color:#ffd2d3 !important;
  font-size:0.8rem;
  letter-spacing:0.12em;
  padding:6px 18px;
  border-radius:50px;
}
.page-id-453 .sfm-of-title {
  font-size:clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight:700;
  line-height:1.25;
  margin:0 0 14px;
}
.page-id-453 .sfm-of-subtitle {
  font-size:1.05rem;
  line-height:1.65;
  max-width:680px;
  margin:0 auto;
  color:rgba(255,255,255,0.8) !important;
}
/* Espacios del bloque del plugin: más aire arriba, menos abajo */
.page-id-453 .sfm-of-listings-wrap { padding:56px 40px 24px; }


/* ═══════════════════════════════════════════════════════════
   Lote 11-09 (f): página alineada con Formación (hero) y con el
   final de la Home (banda oscura de ofertas). Petición Carlos.
   1) Hero: degradado y badge exactos de formación-y-desarrollo-2
   2) Filtros + ofertas sobre banda oscura #151A2D (como la home)
   3) Orden: filtros → ofertas → CTA (sin botón, copy alertas) → alertas
   4) Alertas como tarjeta tipo oferta
   ═══════════════════════════════════════════════════════════ */

/* ── 1. HERO: degradado y badge de Formación y Desarrollo ── */
.page-id-453 .sfm-of-intro {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1e1218 0%, #614258 40%, #9b7389 85%, #c4a0b3 100%);
  padding: 96px 40px 76px;
}
.page-id-453 .sfm-of-intro::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(250,91,96,0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.page-id-453 .sfm-of-eyebrow {
  position: relative;
  background: rgba(250,91,96,0.2);
  border: none;
  color: #FA5B60 !important;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 6px 18px;
  border-radius: 50px;
  margin-bottom: 24px;
}
.page-id-453 .sfm-of-title {
  position: relative;
  color: #ffffff !important;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 20px;
}
.page-id-453 .sfm-of-subtitle {
  position: relative;
  color: rgba(255,255,255,0.7) !important;
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 680px;
  margin: 0 auto;
}

/* ── 2. ÁREA DE OFERTAS — fondo claro (petición Carlos 11-09: la banda oscura pesaba demasiado) ── */
.page-id-453 .sfm-of-listings-wrap {
  max-width: none;
  margin: 0 calc(50% - 50vw);
  background: #F8F6F7;
  padding: 56px 40px 64px;
}
.page-id-453 .awsm-job-wrap {
  display: flex;
  flex-direction: column;
  max-width: 900px;
  margin: 0 auto;
}
.page-id-453 .awsm-job-wrap > * { width: 100%; }

/* Filtros: fila flex + barra blanca (el fondo oscuro se retiró 11-09) */
.page-id-453 .awsm-filter-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  background: rgba(255,255,255,0.65) !important;
  border: 1px solid rgba(97,66,88,0.12) !important;
  border-radius: 12px;
  box-shadow: 0 3px 16px rgba(97,66,88,0.07) !important;
  padding: 14px 18px !important;
  margin: 0 !important;
  margin-bottom: 24px !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.page-id-453 .awsm-filter-wrap form {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.page-id-453 .awsm-filter-items {
  display: flex !important;
  gap: 12px !important;
  flex: 1 !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}
.page-id-453 .awsm-filter-item { flex: 1 !important; min-width: 160px !important; }
/* El sobre del popup sobra: las alertas ya se muestran debajo */
.page-id-453 .awsm-jobs-alerts-popup-trigger-btn { display: none !important; }

/* Ofertas: sombra suave sobre fondo claro */
.page-id-453 .awsm-job-item {
  box-shadow: 0 6px 24px rgba(58,51,64,0.08);
}

/* ── 3. ORDEN: filtros → ofertas → CTA → alertas ──
   El CTA se inserta dentro de .awsm-job-wrap con un pequeño script
   del bloque de contenido; aquí solo se reparte el orden. */
.page-id-453 .awsm-job-wrap > .awsm-filter-wrap { order: 1; }
.page-id-453 .awsm-job-wrap > .awsm-job-listings { order: 2; }
.page-id-453 .awsm-job-wrap > .sfm-of-cta-inner { order: 3; }
.page-id-453 .awsm-job-wrap > .awsm-jobs-alerts-widget-wrapper { order: 4; margin-top: 0; }

/* CTA: barra morada centrada, sin botón, orienta hacia las alertas */
.page-id-453 .sfm-of-cta-inner {
  background: #614258;
  border-radius: 12px;
  padding: 36px 48px;
  margin: 44px 0 28px;
  box-shadow: 0 6px 24px rgba(97,66,88,0.25);
  text-align: center;
}
.page-id-453 .sfm-of-cta-text {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  color: #ffffff !important;
  margin: 0;
  padding-left: 0;
}
.page-id-453 .sfm-of-cta-text::before { display: none; }
.page-id-453 .sfm-of-cta-sub {
  display: block;
  margin-top: 10px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
}

/* ── 4. ALERTAS: tarjeta tipo oferta ── */
.page-id-453 .awsm-jobs-alerts-widget-content {
  background: #ffffff;
  border: 1px solid rgba(97,66,88,0.12);
  border-radius: 12px;
  box-shadow: 0 3px 16px rgba(97,66,88,0.09);
  padding: 32px 36px;
  margin: 0;
  text-align: center;
}
.page-id-453 .awsm-jobs-alerts-widget-content h2 { padding-left: 0; }
.page-id-453 .awsm-jobs-alerts-widget-content h2::before { display: none; }
.page-id-453 .awsm-jobs-alerts-widget-description p { margin-bottom: 24px; }
.page-id-453 .awsm-jobs-alerts-form { max-width: 90%; margin: 0 auto; text-align: left; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .page-id-453 .sfm-of-intro { padding: 56px 20px 48px; }
  .page-id-453 .sfm-of-listings-wrap { padding: 40px 20px 48px; }
  .page-id-453 .sfm-of-cta-inner { padding: 28px 22px; margin: 36px 0 24px; }
  .page-id-453 .sfm-of-cta-text { font-size: 19px; }
  .page-id-453 .sfm-of-cta-sub { font-size: 15px; }
  .page-id-453 .awsm-jobs-alerts-widget-content { padding: 24px 20px; }
}

/* ═══ Lote 11-09 (g): dropdowns de filtros por delante de las ofertas ═══ */
.page-id-453 .awsm-job-wrap > .awsm-filter-wrap { position: relative !important; z-index: 50 !important; }
.page-id-453 .awsm-job-wrap > .awsm-job-listings { position: relative !important; z-index: 1 !important; }

/* ═══ 24-09: marca de agua del logo blanco en el hero (petición Carlos) ═══ */
.page-id-453 .sfm-of-intro::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 52%;
  aspect-ratio: 2560 / 1810;
  background: url('/wp-content/uploads/SF-Mardonar_logo_C_blanco-scaled.png') no-repeat center;
  background-size: contain;
  opacity: 0.18;
  pointer-events: none;
}
@media (max-width: 767px) {
  .page-id-453 .sfm-of-intro::after { display: none; }
}
/* texto del hero confinado a la mitad derecha (50/50 con el logo) */
@media (min-width: 768px) {
  .page-id-453 .sfm-of-intro { padding-left: 50%; }
}