/* La cabecera es fixed; el hero necesita aire arriba para no meterse debajo. OJO especificidad: EstilosLanding trae ".vxl-sec:first-of-type{padding-top:0}" (0,2,0), que ganaba a un ".vxe-hero" suelto (0,1,0) y dejaba el H1 y "Volver" DEBAJO de la cabecera (elementFromPoint devolvia HEADER). Con la clase repetida (0,3,0) gana siempre, vaya donde vaya. */ .vxl-sec.vxe-hero.vxe-hero,.vxl-sec.vxe-detalle.vxe-detalle{padding-top:72px} .vxe-h1{margin:14px 0 0;font-size:clamp(2.1rem,4.4vw,3.4rem);line-height:1.1;color:#EAF0F0;font-weight:400} .vxe-h2{font-family:var(--font-manrope),system-ui,sans-serif;font-size:15px;font-weight:700; color:#EAF0F0;text-transform:uppercase;letter-spacing:.08em;margin:36px 0 14px} /* --- Buscador: form GET, funciona sin JavaScript --------------------------- */ /* Buscador de cristal: fila 1 = palabra clave, ciudad y Buscar; fila 2 = los 4 desplegables (modalidad, puesto, pais, moneda). */ .vxe-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:34px;align-items:stretch; padding:14px;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); border:1px solid rgba(184,196,208,.12);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); box-shadow:0 30px 80px -40px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.05)} .vxe-form{transition:border-color .45s cubic-bezier(.32,.72,0,1),box-shadow .45s cubic-bezier(.32,.72,0,1),background .45s cubic-bezier(.32,.72,0,1)} /* Foco vivo (s4): al entrar en cualquier campo el cristal entero se enciende. */ .vxe-form:focus-within{border-color:rgba(0,230,176,.38);background:linear-gradient(180deg,rgba(0,230,176,.06),rgba(255,255,255,.015)); box-shadow:0 0 0 4px rgba(0,230,176,.07),0 30px 90px -40px rgba(0,230,176,.35),inset 0 1px 0 rgba(255,255,255,.06)} .vxe-form>input[name="q"]{grid-column:span 2} /* Campos con icono (lupa y chincheta). */ .vxe-form>input[name="q"],.vxe-form>input[name="ciudad"]{padding-left:44px;background-repeat:no-repeat;background-position:16px center;background-size:16px 16px} .vxe-form>input[name="q"]{background-image:url("data:image/svg+xml;utf8,")} .vxe-form>input[name="ciudad"]{background-image:url("data:image/svg+xml;utf8,")} .vxe-dd{min-width:0} /* Cifras reales de la bolsa bajo el buscador. */ .vxe-stats{display:flex;flex-wrap:wrap;gap:12px 36px;margin:28px 0 0;padding:0} .vxe-stats div{display:flex;align-items:baseline;gap:10px} .vxe-stats dt{font-size:28px;font-weight:700;color:#EAF0F0;letter-spacing:-.01em;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:8px} /* Anillo que se dibuja junto a la cifra de "100% gratis" (s1). */ .vxe-anillo{width:26px;height:26px;transform:rotate(-90deg)} .vxe-anillo circle{fill:none;stroke-width:3.5} .vxe-anillo .vxe-anillo-f{stroke:rgba(255,255,255,.08)} .vxe-anillo .vxe-anillo-a{stroke:#00E6B0;stroke-linecap:round;stroke-dasharray:57;stroke-dashoffset:57;filter:drop-shadow(0 0 4px rgba(0,230,176,.6)); animation:fx-traza 1.6s cubic-bezier(.32,.72,0,1) .35s forwards} .vxe-stats dd{margin:0;color:#B8C4D0;font-size:13.5px} .vxe-stats div:first-child dt{color:#00E6B0} .vxe-banner-ctas{display:flex;flex-wrap:wrap;gap:10px} .vxe-in,.vxe-sel{box-sizing:border-box;width:100%;height:52px;padding:0 16px;border-radius:12px; border:1px solid #232C36;background:rgba(255,255,255,.03);color:#EAF0F0; font-family:var(--font-manrope),system-ui,sans-serif;font-size:14px} .vxe-in::placeholder{color:#6b7683} .vxe-in,.vxe-sel{transition:border-color .3s cubic-bezier(.32,.72,0,1),box-shadow .3s cubic-bezier(.32,.72,0,1),background-color .3s cubic-bezier(.32,.72,0,1)} .vxe-in:hover{border-color:#2f3b48} .vxe-in:focus,.vxe-sel:focus{outline:none;border-color:#00E6B0;background-color:rgba(0,230,176,.04);box-shadow:0 0 0 4px rgba(0,230,176,.12)} /* Select nativo con la pinta del sistema: sin la flecha del navegador, la propia (currentColor, ver MEMORY sobre el halo premium con currentColor) dibujada con un SVG en background. */ .vxe-sel{appearance:none;-webkit-appearance:none;cursor:pointer; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:right 14px center;padding-right:36px} .vxe-sel option{background:#12181F;color:#EAF0F0} .vxe-form .vxl-btn{height:52px;padding:0 28px} /* Desplegable premium (components/rh/panel/Selector) a la altura de los campos del buscador. */ .vxe-form .vx-sel{height:52px;border-radius:12px;padding:0 14px 0 16px;font-size:14px} .vxe-coach{display:inline-block;margin-top:16px;color:#B8C4D0;font-size:14px;text-decoration:none; border-bottom:1px solid transparent;transition:color .3s cubic-bezier(.32,.72,0,1),border-color .3s cubic-bezier(.32,.72,0,1)} .vxe-coach:hover{color:#00E6B0;border-color:#00E6B0} /* --- Rejilla de tarjetas ----------------------------------------------------- */ .vxe-contador{color:#B8C4D0;font-size:13px;letter-spacing:.04em;margin:0 0 20px} .vxe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px} .vxe-card{display:flex;flex-direction:column;position:relative;text-decoration:none;border:1px solid #232C36; background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01)),#12181F; border-radius:18px;padding:22px;transition:border-color .45s cubic-bezier(.32,.72,0,1),transform .45s cubic-bezier(.32,.72,0,1),box-shadow .45s cubic-bezier(.32,.72,0,1)} .vxe-card>*{position:relative;z-index:1} .vxe-card:hover{border-color:#00E6B066;transform:translateY(-5px);box-shadow:0 28px 60px -30px rgba(0,230,176,.5),inset 0 1px 0 rgba(255,255,255,.06)} .vxe-card:active{transform:translateY(-2px) scale(.995)} .vxe-card-pie{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px} .vxe-card-pie .vxe-card-fecha{margin:0} .vxe-card-ir{display:inline-flex;align-items:center;color:#00E6B0;font-size:12.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap; opacity:.6;transform:translateX(-4px);transition:opacity .4s cubic-bezier(.32,.72,0,1),transform .4s cubic-bezier(.32,.72,0,1)} .vxe-card-ir .fx-flecha{margin-left:6px} .vxe-card:hover .vxe-card-ir,.vxe-card:focus-visible .vxe-card-ir{opacity:1;transform:none} .vxe-card:hover .vxe-card-ir .fx-flecha{transform:translateX(4px)} .vxe-card:hover .vxe-chip{border-color:#2f3b48;color:#D5DEE7} @media(hover:none){.vxe-card-ir{opacity:1;transform:none}} .vxe-card-empresa{color:#00E6B0;font-size:12px;font-weight:600;letter-spacing:.06em; text-transform:uppercase;margin:0 0 6px} .vxe-card-t{font-family:var(--font-instrument),Georgia,serif;font-style:italic;font-weight:400; font-size:20px;color:#EAF0F0;margin:0 0 12px;line-height:1.25} .vxe-card-fecha{color:#6b7683;font-size:12px;margin:14px 0 0} /* --- Chips (tarjeta y detalle) ------------------------------------------------ */ .vxe-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0} .vxe-chip{display:inline-flex;align-items:center;background:rgba(184,196,208,.09); border:1px solid #232C36;border-radius:999px;padding:5px 12px;font-size:12.5px;color:#B8C4D0; transition:border-color .35s cubic-bezier(.32,.72,0,1),color .35s cubic-bezier(.32,.72,0,1),background .35s cubic-bezier(.32,.72,0,1)} /* --- Chips de filtro (modalidad rapida + filtros activos) ----------------------- */ .vxe-chipsbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:16px} .vxe-rapidos{display:inline-flex;flex-wrap:wrap;gap:2px;padding:4px;border-radius:999px;border:1px solid rgba(184,196,208,.12); background:rgba(255,255,255,.02);max-width:100%} .vxe-rapidos a{position:relative;padding:7px 14px;border-radius:999px;color:#B8C4D0;font-size:13px;font-weight:600;text-decoration:none; white-space:nowrap;transition:color .3s cubic-bezier(.32,.72,0,1),background .3s cubic-bezier(.32,.72,0,1)} .vxe-rapidos a:hover{color:#EAF0F0} .vxe-rapidos a[aria-current="true"]{color:#00E6B0;background:rgba(0,230,176,.1)} .vxe-activos{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0} .vxe-activo{display:inline-flex;align-items:center;gap:8px;padding:6px 10px 6px 13px;border-radius:999px;text-decoration:none; font-size:12.5px;font-weight:600;color:#EAF0F0;background:rgba(0,230,176,.1);border:1px solid rgba(0,230,176,.35); animation:fx-pop .45s cubic-bezier(.32,.72,0,1) both;transition:border-color .3s cubic-bezier(.32,.72,0,1),background .3s cubic-bezier(.32,.72,0,1)} .vxe-activo span{max-width:26ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .vxe-activo svg{color:#00E6B0;transition:transform .35s cubic-bezier(.32,.72,0,1)} .vxe-activo:hover{background:rgba(0,230,176,.16);border-color:#00E6B0} .vxe-activo:hover svg{transform:rotate(90deg)} .vxe-limpiar{display:inline-flex;align-items:center;height:100%;padding:6px 4px;font-size:12.5px;color:#B8C4D0;text-decoration:none; border-bottom:1px solid transparent;transition:color .3s cubic-bezier(.32,.72,0,1),border-color .3s cubic-bezier(.32,.72,0,1)} .vxe-limpiar:hover{color:#00E6B0;border-color:#00E6B0} .vxe-chip-salario{color:#00E6B0;border-color:#00E6B055} /* --- Estado vacío -------------------------------------------------------------- */ .vxe-vacio{text-align:center;padding:56px 20px;border:1px dashed #232C36;border-radius:16px} .vxe-vacio-t{font-size:22px;margin:0 0 10px} .vxe-vacio .vxl-cuerpo{margin:0 auto 26px;max-width:52ch} .vxe-vacio .vxl-btn{display:inline-flex} /* --- Banner "¿Eres empresa?" --------------------------------------------------- */ .vxe-banner-sec{padding-top:56px} .vxe-banner{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between; background:linear-gradient(180deg,rgba(0,230,176,.07),rgba(0,230,176,.02)); border:1px solid #00E6B033;border-radius:20px;padding:32px} .vxe-banner-t{font-size:22px;margin:0 0 6px} /* --- Detalle -------------------------------------------------------------------- */ .vxe-volver{display:inline-block;color:#B8C4D0;font-size:13px;text-decoration:none;margin-bottom:22px} .vxe-volver{transition:color .3s cubic-bezier(.32,.72,0,1),transform .4s cubic-bezier(.32,.72,0,1)} .vxe-volver:hover{color:#00E6B0;transform:translateX(-3px)} .vxe-fecha{color:#6b7683;font-size:13px;margin:16px 0 0} .vxe-ctas{margin:26px 0} .vxe-descripcion{color:#B8C4D0;font-size:16px;line-height:1.7;white-space:pre-line;margin:0} .vxe-requisitos{margin:0;padding-left:20px;color:#B8C4D0;font-size:15px;line-height:1.8} .vxe-requisitos li{margin-bottom:4px} /* --- Móvil: todo a una columna, sin scroll horizontal --------------------------- */ @media(max-width:900px){ .vxl-sec.vxe-hero.vxe-hero,.vxl-sec.vxe-detalle.vxe-detalle{padding-top:40px} .vxe-form{grid-template-columns:1fr 1fr;padding:12px} .vxe-form>input[name="q"],.vxe-form>input[name="ciudad"],.vxe-form .vxe-buscar{grid-column:1/-1} .vxe-form .vxl-btn{width:100%} .vxe-stats{gap:10px 22px} .vxe-stats dt{font-size:22px} .vxe-banner{flex-direction:column;align-items:flex-start;padding:26px} .vxe-banner .vxl-btn-2,.vxe-banner .vxl-btn{width:100%;text-align:center;justify-content:center} .vxe-banner-ctas{width:100%} }

Encuentra tu próximo empleo