/* =====================================================================
 * «Trabaja con nosotros»: estilos propios de las páginas de empleo
 * (trabaja-con-nosotros/index.html y cada oferta en su subcarpeta).
 * Cabecera, pie y banner de cookies van en el <style> de cada página,
 * igual que en el resto de la web; aquí solo lo que es de empleo.
 * ===================================================================== */

main.jobs{ padding:0 0 40px; }
.jobs-wrap{ max-width:880px; margin:0 auto; padding:0 24px; }

/* ---------- Cabecera de página ---------- */
.jobs-hero{ padding:150px 0 56px; text-align:center; }
.jobs-hero .kicker{
  font-size:13px; font-weight:600; color:var(--accent); text-transform:uppercase; letter-spacing:.08em; margin:0 0 14px;
}
.jobs-hero h1{
  font-size:clamp(34px,6vw,60px); font-weight:700; letter-spacing:-.03em; line-height:1.05;
  max-width:820px; margin:0 auto;
  /* Igual que el titular de loomedia.es: degradado sutil de blanco a gris, sin colores */
  background:linear-gradient(180deg,var(--text) 40%, var(--text-dim));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.jobs-hero .sub{
  margin:22px auto 0; max-width:660px; font-size:clamp(17px,2.1vw,21px); line-height:1.5; color:var(--text-dim);
}
.jobs-hero .cta-row{ margin-top:34px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.jobs-back{
  display:inline-flex; align-items:center; gap:6px; margin-bottom:26px;
  font-size:14px; color:var(--text-dim); transition:color .2s ease;
}
.jobs-back:hover{ color:var(--text); }

.btn{
  padding:14px 28px; border-radius:980px; font-size:16px; font-weight:600; font-family:inherit;
  display:inline-block; transition:transform .25s ease, opacity .25s ease, box-shadow .25s ease;
  border:1px solid transparent; cursor:pointer;
}
.btn-primary{ background:var(--accent); color:#fff; border:none; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(41,151,255,0.4); }
.btn-ghost{ border-color:var(--border); color:var(--text); background:transparent; }
.btn-ghost:hover{ background:var(--surface-2); transform:translateY(-2px); }

.chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:26px; }
.chip{ display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:500; color:var(--text-dim);
  padding:7px 14px; border-radius:980px; border:1px solid var(--border); background:var(--surface);
}

/* ---------- Bloques ---------- */
.jobs-section{ padding:40px 0; scroll-margin-top:60px; }
.jobs-section-head{ text-align:center; max-width:680px; margin:0 auto 36px; }
.jobs-section-head .kicker{
  font-size:13px; font-weight:600; color:var(--accent); text-transform:uppercase; letter-spacing:.08em; margin:0 0 12px;
}
.jobs-section-head h2{ font-size:clamp(28px,4.4vw,42px); font-weight:700; letter-spacing:-.02em; line-height:1.1; margin:0; }
.jobs-section-head p{ margin:16px 0 0; font-size:18px; line-height:1.55; color:var(--text-dim); }

.lang-notice{
  display:none; gap:12px; align-items:flex-start;
  background:rgba(41,151,255,0.08); border:1px solid rgba(41,151,255,0.25);
  border-radius:14px; padding:14px 18px; margin:0 auto 8px; max-width:880px;
  font-size:14px; line-height:1.6; color:var(--text-dim);
}
.lang-notice.show{ display:flex; }
.lang-notice .ico{ flex-shrink:0; font-size:17px; line-height:1.5; }
.lang-notice strong{ color:var(--text); }

/* Lista de ofertas */
.offer-list{ display:grid; gap:16px; }
.offer-card{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:28px 30px; border-radius:22px; border:1px solid var(--border); background:var(--surface);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.offer-card:hover{ transform:translateY(-3px); border-color:rgba(41,151,255,0.45); box-shadow:0 14px 40px rgba(0,0,0,0.18); }
.offer-card h3{ font-size:21px; font-weight:700; letter-spacing:-.01em; line-height:1.25; }
.offer-card .meta{ margin-top:8px; font-size:14px; color:var(--text-dim); line-height:1.5; }
.offer-card .go{ flex-shrink:0; font-size:15px; font-weight:600; color:var(--accent); white-space:nowrap; }
.offer-status{
  display:inline-block; margin-bottom:10px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#32d74b; background:rgba(50,215,75,0.12); padding:4px 10px; border-radius:980px;
}
.offer-empty{ text-align:center; font-size:16px; color:var(--text-dim); padding:28px; border:1px dashed var(--border); border-radius:22px; }

/* Perfiles (página general): mismas tarjetas que «Nuestras soluciones» de loomedia.es */
.roles{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; max-width:1000px; margin:0 auto; }
.role{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:40px 36px;
  transition:transform .35s ease, border-color .35s ease;
}
.role:hover{ transform:translateY(-6px); border-color:rgba(41,151,255,0.4); }
.role .icon{
  width:56px; height:56px; border-radius:14px; margin-bottom:24px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(41,151,255,0.18), rgba(191,90,242,0.18));
}
.role .icon svg{ width:28px; height:28px; stroke:var(--accent); fill:none; }
.role h3{ font-size:26px; font-weight:700; letter-spacing:-.015em; margin:0 0 6px; }
.role .tagline{ font-size:16px; color:var(--accent); font-weight:600; margin:0 0 22px; }
.role ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.role li{ font-size:15px; color:var(--text-dim); line-height:1.5; }
.role li strong{ color:var(--text); font-weight:600; }
@media (max-width:768px){ .roles{ grid-template-columns:1fr; } .role{ padding:30px 24px; } }

/* Perfiles en el formulario: tarjetas que se marcan */
.perfiles-opciones{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.perfil-opcion{ position:relative; cursor:pointer; }
.perfil-opcion input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.perfil-caja{ display:grid; gap:6px; height:100%; padding:16px 18px; border-radius:16px; border:1.5px solid var(--border); background:var(--surface-2); transition:border-color .2s ease, background-color .2s ease; }
:root[data-theme="light"] .perfil-caja{ background:#fff; }
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .perfil-caja{ background:#fff; } }
.perfil-caja strong{ font-size:15.5px; color:var(--text); }
.perfil-caja span{ font-size:13.5px; line-height:1.5; color:var(--text-dim); }
.perfil-opcion input:checked + .perfil-caja{ border-color:var(--accent); background:rgba(41,151,255,0.10); }
.perfil-opcion input:focus-visible + .perfil-caja{ box-shadow:0 0 0 4px rgba(41,151,255,0.25); }
.field.error .perfil-caja{ border-color:rgba(255,69,58,0.6); }
.field select:disabled, .field input:disabled{ opacity:.55; cursor:not-allowed; }
@media (max-width:640px){ .perfiles-opciones{ grid-template-columns:1fr; } }

/* Texto de la oferta */
.offer-intro p{ font-size:18px; line-height:1.65; color:var(--text-dim); margin:0 0 16px; }
.offer-intro p strong{ color:var(--text); }
.offer-blocks{ display:grid; gap:18px; margin-top:34px; }
.offer-block{ padding:30px 32px; border-radius:22px; background:var(--surface); border:1px solid var(--border); }
.offer-block h2{ font-size:22px; font-weight:700; letter-spacing:-.01em; margin:0 0 6px; }
.offer-block .hint{ font-size:14px; color:var(--text-faint); margin:0 0 4px; }
.ticks{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:12px; }
.ticks li{ position:relative; padding-left:30px; font-size:16px; line-height:1.55; color:var(--text-dim); }
.ticks li::before{
  content:""; position:absolute; left:0; top:3px; width:19px; height:19px; border-radius:50%;
  background:rgba(41,151,255,0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232997ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat;
}
.ticks.plus li::before{
  background:rgba(191,90,242,0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bf5af2' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/11px no-repeat;
}
.ticks li strong{ color:var(--text); font-weight:600; }
.offer-highlight{
  margin-top:18px; padding:22px 26px; border-radius:18px;
  background:linear-gradient(135deg,rgba(41,151,255,0.12),rgba(191,90,242,0.12));
  border:1px solid rgba(41,151,255,0.25);
  font-size:17px; line-height:1.6; color:var(--text);
}
.offer-thanks{ text-align:center; max-width:640px; margin:0 auto; font-size:16px; line-height:1.65; color:var(--text-dim); }
.offer-thanks strong{ color:var(--text); }

/* Oferta cerrada */
.offer-closed-note{ display:none; }
main[data-cerrada] .offer-closed-note{
  display:block; text-align:center; padding:26px; border-radius:22px; margin-top:28px;
  background:rgba(255,159,10,0.1); border:1px solid rgba(255,159,10,0.35); font-size:16px; line-height:1.6; color:var(--text);
}
main[data-cerrada] .only-open{ display:none !important; }

/* ---------- Formulario ---------- */
.apply-panel{
  max-width:760px; margin:0 auto;
  background:var(--surface); border:1px solid var(--border);
  border-radius:28px; padding:48px 52px;
}
form.apply-form{ display:grid; gap:30px; min-width:0; }
form.apply-form[hidden]{ display:none; }
.apply-form fieldset{ border:none; padding:0; margin:0; min-width:0; display:grid; gap:18px; }
.apply-form legend{
  font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint);
  padding:0; margin-bottom:16px;
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; min-width:0; }
.field{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.field > label, .field .q{ font-size:14px; color:var(--text); font-weight:500; }
.field .q-hint{ font-weight:400; color:var(--text-faint); }
.field select{
  width:100%; min-width:0; appearance:none; -webkit-appearance:none;
  background:var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center/16px no-repeat;
  border:1px solid var(--border); border-radius:12px; padding:14px 40px 14px 16px; font-size:16px; color:var(--text); font-family:inherit;
}
:root[data-theme="light"] .field select{ background-color:#fff; }
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .field select{ background-color:#fff; } }
.field select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(41,151,255,0.15); }
.field.error select{ border-color:#ff453a; }
.hp{ position:absolute !important; left:-10000px; width:1px; height:1px; overflow:hidden; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="url"], .field textarea{
  width:100%; min-width:0;
  background:var(--surface-2); border:1px solid var(--border); border-radius:12px;
  padding:14px 16px; font-size:16px; color:var(--text); font-family:inherit;
  transition:border-color .2s ease, box-shadow .2s ease, background-color .3s ease, color .3s ease;
}
:root[data-theme="light"] .field input[type="text"], :root[data-theme="light"] .field input[type="email"],
:root[data-theme="light"] .field input[type="tel"], :root[data-theme="light"] .field input[type="url"],
:root[data-theme="light"] .field textarea{ background:#fff; }
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .field input[type="text"], :root:not([data-theme="dark"]) .field input[type="email"],
  :root:not([data-theme="dark"]) .field input[type="tel"], :root:not([data-theme="dark"]) .field input[type="url"],
  :root:not([data-theme="dark"]) .field textarea{ background:#fff; }
}
.field input::placeholder, .field textarea::placeholder{ color:var(--text-faint); opacity:1; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(41,151,255,0.15); }
.field textarea{ resize:vertical; min-height:130px; }
.field.error input[type="text"], .field.error input[type="email"], .field.error input[type="tel"],
.field.error input[type="url"], .field.error textarea{ border-color:#ff453a; }
.error-msg{ font-size:12.5px; color:#ff453a; min-height:0; }
.error-msg:empty{ display:none; }

/* Opciones en forma de píldora (radio y checkbox) */
.pills{ display:flex; flex-wrap:wrap; gap:8px; }
.pill{ position:relative; }
.pill input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.pill span{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 16px; border-radius:980px; border:1px solid var(--border); background:var(--surface-2);
  font-size:14.5px; color:var(--text-dim); cursor:pointer; user-select:none;
  transition:border-color .2s ease, color .2s ease, background-color .2s ease;
}
:root[data-theme="light"] .pill span{ background:#fff; }
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .pill span{ background:#fff; } }
.pill span:hover{ color:var(--text); border-color:var(--text-faint); }
.pill input:checked + span{ color:#fff; background:var(--accent); border-color:var(--accent); }
.pill input:focus-visible + span{ box-shadow:0 0 0 4px rgba(41,151,255,0.25); }
.field.error .pill span{ border-color:rgba(255,69,58,0.6); }
.cond[hidden]{ display:none; }
.cond{ display:grid; gap:18px; padding-left:16px; border-left:2px solid var(--border); }

/* CV */
.cv-drop{
  display:flex; align-items:center; gap:16px; padding:18px 20px; cursor:pointer;
  border:1.5px dashed var(--border); border-radius:16px; background:var(--surface-2);
  transition:border-color .2s ease, background-color .2s ease;
}
:root[data-theme="light"] .cv-drop{ background:#fff; }
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .cv-drop{ background:#fff; } }
.cv-drop:hover, .cv-drop.drag{ border-color:var(--accent); }
.cv-drop input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.cv-ico{
  flex-shrink:0; width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:rgba(41,151,255,0.14); color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.03em;
}
.cv-text{ min-width:0; font-size:14.5px; line-height:1.45; color:var(--text-dim); }
.cv-text strong{ display:block; color:var(--text); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cv-remove{
  margin-left:auto; flex-shrink:0; background:none; border:none; color:var(--text-faint); font:inherit; font-size:13px;
  cursor:pointer; text-decoration:underline; text-underline-offset:2px;
}
.cv-remove[hidden]{ display:none; }
.field.error .cv-drop{ border-color:#ff453a; }

.consent-field{ gap:4px; }
.checkbox-row{
  display:flex; align-items:flex-start; gap:11px; cursor:pointer;
  font-size:14px; color:var(--text-dim); line-height:1.55;
}
.checkbox-row input[type="checkbox"]{ width:18px; height:18px; flex-shrink:0; margin-top:2px; accent-color:var(--accent); cursor:pointer; }
.checkbox-row a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.consent-field.error .checkbox-row{ color:#ff453a; }
.consent-field .error-msg{ margin-left:29px; }

.privacy-note{
  font-size:12.5px; line-height:1.65; color:var(--text-faint);
  padding:16px 18px; border:1px solid var(--border); border-radius:14px; background:var(--surface-2);
}
.privacy-note strong{ color:var(--text-dim); font-weight:600; }
.privacy-note ul{ margin:8px 0 0 18px; display:flex; flex-direction:column; gap:5px; }
.privacy-note a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }

.submit-row{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.form-status{ font-size:14px; color:var(--text-dim); line-height:1.5; }

.form-success{ text-align:center; padding:24px 8px; }
.form-success[hidden]{ display:none; }
.form-success-icon{
  width:56px; height:56px; margin:0 auto 22px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff; font-size:24px; font-weight:700; display:flex; align-items:center; justify-content:center;
}
.form-success h3{ font-size:26px; font-weight:800; letter-spacing:-.02em; margin-bottom:14px; }
.form-success p{ font-size:15.5px; line-height:1.65; color:var(--text-dim); max-width:460px; margin:0 auto; }

@media (max-width:768px){
  .jobs-hero{ padding:120px 0 40px; }
  .jobs-wrap{ padding:0 16px; }
  .apply-panel{ padding:30px 20px; border-radius:22px; }
  .form-row{ grid-template-columns:1fr; }
  .offer-card{ flex-direction:column; align-items:flex-start; gap:14px; padding:24px; }
  .offer-block{ padding:24px 22px; }
  .offer-intro p{ font-size:17px; }
  .submit-row .btn{ width:100%; text-align:center; }
}

/* Vista previa de la foto (opcional) */
.foto-prev{ background-size:cover; background-position:center; border-radius:50%; font-size:10px; }