/* empleos only: capa de diseño y motion graphics del portal (prefijo em-).
   Mismo contrato que home/coaching/cursos/linkedin-cv: el CSS base muestra la
   composición TERMINADA; `.hm-discovered` (js/em-motion.js) sólo dispara la
   entrada, una vez por escena, nunca con movimiento reducido ni navegando con
   Tab. Lo que sí es continuo es lo que responde a la persona: la lista que se
   vuelve a dibujar al filtrar y el detalle que cambia al elegir un aviso. */

/* ══ Tipografía y respuesta ═════════════════════════════════════════════ */
body[data-em] .jp-hero h1 { letter-spacing: -.025em; line-height: 1.08; }
body[data-em] .section-title { letter-spacing: -.018em; }
body[data-em] .section-label { letter-spacing: .16em; }
body[data-em] .jp-btn, body[data-em] .jp-card, body[data-em] .jp-chip { transition-property: transform, box-shadow, border-color, color, background; transition-duration: 160ms; transition-timing-function: cubic-bezier(.2, .8, .2, 1); }
body[data-em] .jp-btn:active { transform: scale(.965); transition-duration: 70ms; }
body[data-em] .jp-card:active { transform: scale(.99); transition-duration: 70ms; }

/* ══ Vocabulario hm-art ═════════════════════════════════════════════════ */
.hp-c-green  { --hp: var(--green); }
.hp-c-cyan   { --hp: var(--cyan); }
.hp-c-purple { --hp: var(--purple); }
.hp-c-orange { --hp: #f97316; }
.hm-art {
  --hm-ease: cubic-bezier(.22, 1, .36, 1);
  --hm-accent: var(--hp, var(--green));
  position: relative; isolation: isolate; flex: none;
  color: var(--hm-accent); pointer-events: none; overflow: hidden;
}
.hm-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hm-art .hm-panel { fill: #142032; stroke: color-mix(in srgb, var(--hm-accent) 48%, #263449); }
.hm-art .hm-panel-back { fill: #101c2c; stroke: color-mix(in srgb, var(--hm-accent) 24%, #263449); }
.hm-art .hm-tint { fill: currentColor; fill-opacity: .12; stroke-opacity: .55; }
.hm-art .hm-solid { fill: currentColor; stroke: none; }
.hm-art .hm-white { stroke: #dce9f5; }
.hm-art .hm-muted { opacity: .35; }
.hm-art .hm-label { font: 800 8.5px var(--font-body, 'Inter', sans-serif); letter-spacing: .5px; fill: #bacbdd; stroke: none; }
.hm-art .hm-art-main, .hm-art .hm-art-detail, .hm-art .hm-art-orbit, .hm-art .hm-art-glint, .hm-art .hm-art-blip, .hm-art .hm-art-drop { transform-box: fill-box; transform-origin: center; }
.hm-art .hm-art-ring { stroke-dasharray: 1; stroke-dashoffset: 0; }
.hm-art-icon { width: 56px; height: 56px; overflow: visible; }

/* ══ Hero ═══════════════════════════════════════════════════════════════ */
/* El anillo del visual gira: su caja rotada asomaba 128px por la derecha en
   escritorio y dejaba scroll horizontal en toda la página. */
body[data-em] .jp-hero { overflow-x: clip; }
@supports not (overflow-x: clip) { body[data-em] .jp-hero { overflow-x: hidden; } }
body[data-em] .jp-hero-sub { font-size: 1.02rem; line-height: 1.7; }
body[data-em] .jp-chip { transform-origin: left center; }
/* Señal en vivo con el número real de búsquedas (lo espeja el JS desde #jpCount) */
.em-live { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 1.1rem; padding: .45rem .95rem .45rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 700; color: var(--text); background: rgba(0,230,118,.08); border: 1px solid rgba(0,230,118,.28); }
.em-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(0,230,118,.5); }
.em-live-n { font-variant-numeric: tabular-nums; color: var(--green); }
.em-live[hidden] { display: none; }
/* Aviso flotante sobre el visual: la postulación que llega */
.em-ping { position: absolute; left: -14px; top: 26px; z-index: 4; display: inline-flex; align-items: center; gap: .55rem; padding: .55rem .8rem .55rem .6rem; border-radius: 14px;
  background: rgba(13,21,37,.84); border: 1px solid rgba(0,230,118,.4); box-shadow: 0 14px 40px rgba(0,0,0,.45); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); }
.em-ping-ico { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: linear-gradient(135deg, var(--green), var(--cyan)); color: #04130a; font-size: .8rem; }
.em-ping-txt { display: grid; line-height: 1.25; }
.em-ping-txt b { font-size: .74rem; color: var(--text); }
.em-ping-txt span { font-size: .64rem; color: var(--muted); }
@media (prefers-reduced-transparency: reduce) { .em-ping { background: #0d1525; backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media (max-width: 1024px) { .em-ping { display: none; } }

/* ══ Barra del portal, filtros y contador ═══════════════════════════════ */
body[data-em] .jp-portalbar-ico { position: relative; }
.em-portal-dot { position: absolute; right: -3px; top: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--green); border: 2px solid var(--bg); }
body[data-em] .jp-filters select.em-on, body[data-em] .jp-filters input.em-on { border-color: var(--green) !important; color: var(--text) !important; background: rgba(0,230,118,.06) !important; }
body[data-em] .jp-search:focus-within { box-shadow: 0 0 0 3px rgba(0,230,118,.16); border-radius: var(--radius-pill); }
body[data-em] .jp-count strong { display: inline-block; color: var(--green); font-size: 1rem; }
.jp-count strong.em-bump { animation: emBump 420ms cubic-bezier(.34,1.56,.64,1); }
@keyframes emBump { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }

/* ══ Lista: cada aviso entra en su turno; el elegido se marca con una guía ══ */
body[data-em] .jp-card { overflow: hidden; }
body[data-em] .jp-card::before { content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--green), var(--cyan)); transform: scaleY(0); transform-origin: center; transition: transform 220ms cubic-bezier(.22,1,.36,1); }
body[data-em] .jp-card.jp-selected::before { transform: scaleY(1); }
body[data-em] .jp-card:hover .jp-avatar { transform: scale(1.04); }
body[data-em] .jp-avatar { transition: transform 200ms cubic-bezier(.22,1,.36,1); }
body[data-em] .jp-badge.b-urgent i { display: inline-block; }
body[data-em] .jp-card.em-in { animation: emCardIn 460ms cubic-bezier(.22,1,.36,1) calc(var(--i, 0) * 45ms) both; }
@keyframes emCardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ══ Detalle: la ficha nueva llega, no aparece; el vacío es una escena ═══ */
body[data-em] .jp-detail > .em-swap { animation: emSwap 320ms cubic-bezier(.22,1,.36,1) both; }
@keyframes emSwap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.em-empty-art { width: 150px; height: 120px; margin: 0 auto .8rem; }
body[data-em] .jp-detail-empty p { font-size: .9rem; line-height: 1.6; }
body[data-em] .jp-detail-empty small { display: block; margin-top: .5rem; font-size: .76rem; color: rgba(128,144,176,.7); }

/* ══ Cómo funciona: íconos animados, ruta que se dibuja, salida a la acción ══ */
body[data-em] .jp-how-head .hm-art-icon { width: 52px; height: 52px; }
body[data-em] .jp-how-steps li > span { transform-origin: center; }
body[data-em] .jp-how-steps li:not(:last-child)::before { transform-origin: top center; }
.em-how-cta { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--border-subtle); display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.em-how-cta .jp-btn { padding: .7rem 1.25rem; font-size: .88rem; }
.em-how-cta small { color: var(--muted); font-size: .76rem; }

/* ══ Banda de cierre: la búsqueda abierta, publicada en tres minutos ═════ */
.em-band { padding: 1rem 0 3.5rem; }
.em-band-box { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.4rem; padding: 1.6rem 1.8rem; border-radius: 24px;
  background: linear-gradient(135deg, rgba(0,230,118,.09), rgba(0,212,255,.05) 60%, var(--bg3)); border: 1px solid rgba(0,230,118,.22); }
.em-band-box .hm-art-icon { width: 64px; height: 64px; }
.em-band-box h3 { font-size: 1.25rem; margin: 0 0 .3rem; letter-spacing: -.015em; }
.em-band-box p { margin: 0; color: var(--text2); font-size: .9rem; line-height: 1.6; }
.em-band-halo { position: absolute; width: 300px; height: 300px; right: -100px; top: -140px; border-radius: 50%; background: rgba(0,230,118,.35); filter: blur(50px); opacity: .3; pointer-events: none; }
.em-band-box > * { position: relative; }
.em-band-box > .em-band-halo { position: absolute; }
@media (max-width: 800px) { .em-band-box { grid-template-columns: 1fr; text-align: center; justify-items: center; } }

/* ══ Legal ══════════════════════════════════════════════════════════════ */
body[data-em] .jp-legal-card h3 i { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(0,230,118,.1); border: 1px solid rgba(0,230,118,.25); font-size: .9rem; }

/* ══ Motion: al descubrir, una vez, nunca con movimiento reducido ═══════ */
@media (prefers-reduced-motion: no-preference) {
  .hm-art.hm-discovered .hm-art-main { animation: hmArtAssemble 680ms var(--hm-ease) 60ms both; }
  .hm-art.hm-discovered .hm-art-detail { animation: hmArtAssemble 600ms var(--hm-ease) calc(180ms + var(--hm-order, 0) * 90ms) both; }
  .hm-art.hm-discovered .hm-art-orbit { animation: hmArtOrbit 1100ms var(--hm-ease) both; }
  .hm-art.hm-discovered .hm-art-route { animation: hmArtTrace 950ms var(--hm-ease) 250ms both; }
  .hm-art.hm-discovered .hm-art-glint { animation: hmArtGlint 1600ms ease-in-out 500ms both; }
  .hm-art.hm-discovered .hm-art-blip { animation: hmArtBlip 900ms ease-in-out calc(700ms + var(--hm-order, 0) * 650ms) 2 both; }
  .hm-art.hm-discovered .hm-art-ring { animation: hmArtRing 1500ms var(--hm-ease) 200ms both; }
  @keyframes hmArtAssemble { from { opacity: 0; transform: translateY(12px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
  @keyframes hmArtOrbit { from { opacity: 0; transform: rotate(-12deg) scale(.88); } to { opacity: 1; transform: rotate(0) scale(1); } }
  @keyframes hmArtTrace { from { clip-path: inset(0 100% 0 0); opacity: 0; } to { clip-path: inset(0); opacity: 1; } }
  @keyframes hmArtGlint { 0%, 100% { opacity: .5; transform: scale(.8); } 40% { opacity: 1; transform: scale(1.15); } }
  @keyframes hmArtBlip { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.25); } }
  @keyframes hmArtRing { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @media (hover: hover) and (pointer: fine) {
    .hm-art svg { transition: transform 260ms var(--hm-ease); }
    .jp-how-col:hover .hm-art svg, .em-band-box:hover .hm-art svg { transform: translateY(-3px); }
  }

  /* Hero */
  .jp-hero.hm-discovered .jp-chip { animation: emPop 520ms cubic-bezier(.22,1,.36,1) calc(350ms + var(--i, 0) * 80ms) both; }
  .jp-hero.hm-discovered .em-live-dot { animation: emPulse 1400ms ease-out 600ms 3 both; }
  .jp-hero.hm-discovered .em-ping { animation: emPing 700ms cubic-bezier(.22,1,.36,1) 1900ms both; }
  @keyframes emPop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
  @keyframes emPulse { 0% { box-shadow: 0 0 0 0 rgba(0,230,118,.55); } 100% { box-shadow: 0 0 0 12px rgba(0,230,118,0); } }
  @keyframes emPing { from { opacity: 0; transform: translateX(-14px) scale(.94); } to { opacity: 1; transform: none; } }

  /* Portal */
  main.hm-discovered .em-portal-dot { animation: emPulse 1400ms ease-out 300ms 3 both; }
  main.hm-discovered .jp-badge.b-urgent i { animation: emBlink 700ms ease-in-out 3 both; }
  @keyframes emBlink { 50% { opacity: .35; } }

  /* Cómo funciona */
  section.hm-discovered .jp-how-steps li > span { animation: emPopBounce 520ms cubic-bezier(.34,1.56,.64,1) calc(250ms + var(--i, 0) * 200ms) both; }
  section.hm-discovered .jp-how-steps li:not(:last-child)::before { animation: emGrowY 700ms cubic-bezier(.22,1,.36,1) calc(450ms + var(--i, 0) * 200ms) both; }
  section.hm-discovered .em-how-cta { animation: emPop 520ms cubic-bezier(.22,1,.36,1) 1200ms both; }
  @keyframes emPopBounce { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
  @keyframes emGrowY { from { transform: scaleY(0); } to { transform: scaleY(1); } }

  /* Banda y legal */
  section.hm-discovered .em-band-halo { animation: emBreathe 2600ms ease-in-out 3 both; }
  section.hm-discovered .jp-legal-card h3 i { animation: emPopBounce 520ms cubic-bezier(.34,1.56,.64,1) calc(200ms + var(--i, 0) * 150ms) both; }
  @keyframes emBreathe { 0%, 100% { transform: scale(1); opacity: .3; } 50% { transform: scale(1.18); opacity: .45; } }
}