.page-hero--sm {
  height: 40vh;
  min-height: 200px;
  margin-top: 76px;
  position: relative;
  overflow: hidden;
}
.page-hero--sm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(28,28,28,.65) 0%,
    rgba(0,0,0,.15) 100%
  );
}
.page-hero__caption {
  position: absolute;
  bottom: 48px;
  left: 80px;
  color: #fff;
}
.page-hero__caption .section-label {
  color: var(--pink);
  margin-bottom: 10px;
}
.page-hero__caption h1 {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 700;
  text-shadow: 0 2px 16px rgba(0,0,0,.25);
}

/* ════════════════════════════════════════════
   SECCIÓN
   ════════════════════════════════════════════ */
.empleo-section {
  padding: 80px 0;
}
.empleo-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 48px;
}

.empleo-intro {
  margin-bottom: 48px;
}
.empleo-intro h2 {
  font-size: clamp(1.7rem, 2.4vw, 2.2rem);
  font-weight: 700;
  color: var(--black);
  margin-bottom: 16px;
}
.empleo-intro p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--gray);
}

/* ── Mensajes estado ──────────────────────── */
.form-message {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 6px;
  font-size: .93rem;
  line-height: 1.5;
  margin-bottom: 32px;
}
.form-message[hidden] { display: none; }
.form-message svg { flex-shrink: 0; margin-top: 2px; }
.form-message--success { background:#edf7ed; color:#2e7d32; border:1px solid #a5d6a7; }
.form-message--error   { background:#fdecea; color:#c62828; border:1px solid #ef9a9a; }

/* ════════════════════════════════════════════
   FORMULARIO
   ════════════════════════════════════════════ */
#website {
  position: absolute;
  left: -9999px; top: -9999px;
  opacity: 0; pointer-events: none;
}

.empleo-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: .88rem;
  font-weight: 600;
  color: var(--black);
  letter-spacing: .02em;
}
.form-group label span[aria-hidden] { color: var(--red); margin-left: 2px; }

.form-group input,
.form-group textarea {
  font-family: 'DM Sans', sans-serif;
  font-size: .96rem;
  color: var(--black);
  background: #fff;
  border: 1.5px solid #d8d8d8;
  border-radius: 5px;
  padding: 12px 16px;
  transition: border-color .25s ease, box-shadow .25s ease;
  outline: none;
  width: 100%;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: #b0b0b0; }
.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(191,48,60,.1);
}
.form-group textarea { resize: vertical; min-height: 130px; }

.form-group input.is-invalid,
.form-group textarea.is-invalid {
  border-color: #e53935;
  box-shadow: 0 0 0 3px rgba(229,57,53,.1);
}
.form-group input.is-valid,
.form-group textarea.is-valid { border-color: #43a047; }

.field-error { font-size: .8rem; color: #e53935; min-height: 18px; line-height: 1.3; }
.field-hint  { font-size: .78rem; color: #aaa; text-align: right; }

/* ── Zona de subida de archivo ─────────────── */
.file-drop {
  position: relative;
  border: 2px dashed #d8d8d8;
  border-radius: 6px;
  background: #fafafa;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease;
  overflow: hidden;
}
.file-drop:hover,
.file-drop.dragover {
  border-color: var(--red);
  background: rgba(191,48,60,.03);
}
.file-drop.is-invalid { border-color: #e53935; }
.file-drop.is-valid   { border-color: #43a047; background: rgba(67,160,71,.03); }

/* Input real invisible pero sobre toda la zona */
.file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  font-size: 0; /* evita que el nombre nativo aparezca */
}

.file-drop__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 36px 24px;
  color: var(--gray);
  text-align: center;
  pointer-events: none;
}
.file-drop__label {
  font-size: .92rem;
  font-weight: 500;
}
.file-drop__label u { color: var(--red); }
.file-drop__hint {
  font-size: .78rem;
  color: #aaa;
}

/* Estado: archivo seleccionado */
.file-drop__selected {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  pointer-events: none;
}
.file-drop__selected[hidden] { display: none; }
#fileSelectedName {
  flex: 1;
  font-size: .9rem;
  font-weight: 500;
  color: var(--black);
  word-break: break-all;
}
.file-remove {
  pointer-events: auto;
  background: none;
  border: none;
  font-size: 1.4rem;
  color: var(--gray);
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 3px;
  transition: color .2s, background .2s;
  flex-shrink: 0;
}
.file-remove:hover { color: var(--red); background: rgba(191,48,60,.08); }

/* ── Checkbox privacidad ─────────────────── */
.form-group--check { gap: 8px; }
.check-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: .9rem;
  color: var(--gray);
  line-height: 1.5;
}
.check-label input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.checkmark {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border: 1.5px solid #d8d8d8;
  border-radius: 4px;
  background: #fff;
  margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .25s, background .25s;
}
.check-label input:checked + .checkmark {
  background: var(--red); border-color: var(--red);
}
.check-label input:checked + .checkmark::after {
  content: '';
  display: block;
  width: 5px; height: 9px;
  border: 2px solid #fff;
  border-top: none; border-left: none;
  transform: rotate(45deg) translate(-1px, -1px);
}
.check-label input:focus + .checkmark { box-shadow: 0 0 0 3px rgba(191,48,60,.15); }
.check-label a { color: var(--red); text-decoration: underline; }

/* ── Botón submit ───────────────────────── */
.btn-submit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--red);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .03em;
  padding: 14px 32px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background .3s ease, transform .25s ease, box-shadow .25s ease;
  min-width: 200px;
  justify-content: center;
}
.btn-submit:hover {
  background: var(--red-alt);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(191,48,60,.3);
}
.btn-submit:disabled { opacity: .7; cursor: not-allowed; transform: none; }

.btn-submit__spinner {
  display: none;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.btn-submit.loading .btn-submit__text,
.btn-submit.loading .btn-submit__arrow { display: none; }
.btn-submit.loading .btn-submit__spinner { display: block; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════ */
@media (max-width: 768px) {
  .empleo-inner { padding: 0 24px; }
  .empleo-section { padding: 56px 0; }
  .form-row { grid-template-columns: 1fr; gap: 20px; }
  .page-hero__caption { left: 28px; bottom: 32px; }
  .btn-submit { width: 100%; }
}